.rules-ui { -webkit-tap-highlight-color:transparent; --mr-paper:#fffef7; --mr-ink:#254838; --mr-sub:#71786b; --mr-line:#e5e6da; --mr-soft:#f0f4e9; --mr-green:#21543e; --mr-gold:#826b3b; color-scheme:light; font-family:Arial,'Microsoft JhengHei',sans-serif; color:var(--mr-ink); font-size:14px; line-height:1.5; }
  .rules-ui .mr-panel { max-width:620px; margin:0 auto; }
  .rules-ui .mr-panel { background:var(--mr-paper); border:1px solid #d9dece; border-radius:22px; box-shadow:0 12px 38px #173e2521; overflow:hidden; }
  .rules-ui .mr-panel *, .rules-ui .mr-closed * { box-sizing:border-box; }
  .rules-ui .mr-panel [hidden], .rules-ui [hidden] { display:none; }
  .rules-ui .mr-header { padding:18px 20px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--mr-line); }
  .rules-ui h1, .rules-ui h2 { font-family:Georgia,serif; font-size:27px; line-height:1.2; font-weight:700; margin:0 0 4px; color:var(--mr-ink); letter-spacing:-.5px; }
  .rules-ui .mr-header p { font-size:11px; margin:0; color:var(--mr-sub); }
  .rules-ui button, .rules-ui a { font-family:inherit; }
  .rules-ui .mr-close { flex:none; background:var(--mr-paper); border:1px solid #d9ddcf; border-radius:10px; padding:0 12px; height:36px; color:var(--mr-ink); font-size:12px; }
  .rules-ui .mr-content { padding:16px 20px 0; }
  .rules-ui .mr-duration { display:flex; gap:12px; align-items:flex-start; background:var(--mr-soft); border-radius:13px; padding:13px 14px; }
  .rules-ui .mr-symbol { color:var(--mr-green); display:flex; padding-top:15px; }
  .rules-ui .mr-symbol svg { width:20px; height:20px; }
  .rules-ui .mr-eyebrow { display:block; font-size:10px; font-weight:600; letter-spacing:1.3px; color:#617453; line-height:1.5; }
  .rules-ui .mr-mode { display:block; font-size:18px; font-family:Georgia,serif; line-height:1.3; margin:2px 0; }
  .rules-ui .mr-mode-note { font-size:12px; color:#586850; margin:0; line-height:1.45; }
  .rules-ui .mr-ready { margin:13px 0 16px; display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.6; }
  .rules-ui .mr-ready svg { flex:none; width:16px; height:16px; margin-top:2px; color:#56794e; }
  .rules-ui .mr-muted { color:var(--mr-sub); }
  .rules-ui .mr-section-label { display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .rules-ui h3 { margin:0; font-size:13px; font-weight:600; }
  .rules-ui .mr-section-label > span { color:var(--mr-sub); font-size:11px; }
  .rules-ui .mr-win-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:9px 0 14px; }
  .rules-ui .mr-win-grid > div + div { border-left:1px solid var(--mr-line); padding-left:12px; }
  .rules-ui .mr-win-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .rules-ui .mr-win-head strong { font-size:15px; }
  .rules-ui .mr-win-head b { font-family:Georgia,serif; font-size:23px; font-weight:700; color:var(--mr-gold); line-height:1.2; }
  .rules-ui .mr-win-grid p { margin:3px 0 0; color:var(--mr-sub); font-size:11px; line-height:1.5; }
  .rules-ui .mr-fold { border-top:1px solid var(--mr-line); }
  .rules-ui summary { list-style:none; min-height:47px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--mr-ink); font-size:13px; font-weight:600; }
  .rules-ui summary::-webkit-details-marker { display:none; }
  .rules-ui summary > span { display:flex; align-items:center; gap:9px; }
  .rules-ui summary svg { width:16px; height:16px; flex:none; color:#698066; }
  .rules-ui details[open] > summary .mr-chevron { transform:rotate(180deg); }
  .rules-ui .mr-fold-content { font-size:12px; padding:0 0 14px; }
  .rules-ui .mr-fold-content > p { margin:0 0 10px; }
  .rules-ui .mr-fold-content > p:last-child { margin-bottom:0; }
  .rules-ui sup { font-size:9px; }
  .rules-ui .mr-example { padding:12px; border-radius:10px; background:#f6f3e7; margin:10px 0; }
  .rules-ui .mr-example .mr-eyebrow { color:var(--mr-gold); letter-spacing:.8px; font-size:10px; }
  .rules-ui .mr-example > div { display:grid; grid-template-columns:38px 1fr auto; align-items:start; gap:8px; margin-top:10px; }
  .rules-ui .mr-example b { color:var(--mr-green); font-size:15px; font-variant-numeric:tabular-nums; }
  .rules-ui .mr-example span:not(.mr-eyebrow) { color:#6c705e; font-size:11px; }
  .rules-ui .mr-small { font-size:11px; }
  .rules-ui .mr-pattern-label { display:block; font-size:11px; color:var(--mr-sub); margin:1px 0 5px; }
  .rules-ui .mr-pattern-choice { width:100%; min-width:0; height:44px; padding:0 9px; background:var(--mr-paper); border:1px solid #cbd6c3; border-radius:9px; color:var(--mr-ink); font-family:Arial,sans-serif; font-size:14px; }
  .rules-ui .mr-pattern-view { margin:12px 0; }
  .rules-ui .mr-pattern-name { font:600 15px/1.55 Arial,'Microsoft JhengHei',sans-serif; color:var(--mr-ink); margin:0 0 9px; overflow-wrap:anywhere; }
  .rules-ui .mr-pattern-name span { font-weight:400; }
  .rules-ui .mr-pattern-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px; }
  .rules-ui .mr-illustration-label { font-size:11px; color:var(--mr-sub); }
  .rules-ui .mr-pattern-heading strong { color:var(--mr-gold); font-size:19px; font-family:Georgia,serif; text-align:right; }
  .rules-ui .mr-pattern-heading small { display:block; font:11px Arial,sans-serif; }
  .rules-ui .mr-pattern-heading .mr-point-unit { display:inline; }
  .rules-ui .mr-tile-board { background:radial-gradient(ellipse at 50% 0,#2b644b,#204e3a); border-radius:12px; padding:13px 10px 17px; display:flex; flex-wrap:wrap; justify-content:center; gap:7px 4px; box-shadow:inset 0 1px 5px #153c3060; }
  .rules-ui .mr-game-tile { flex:0 0 calc((100% - 24px) / 7); max-width:40px; aspect-ratio:40/56; border:1px solid #f9f7e8; border-radius:4px; background:linear-gradient(110deg,#fffef9 10%,#f6f2df 75%,#e6dfc5); box-shadow:0 3px 0 #c2cbb6,0 5px 0 #103e2b,1px 6px 3px #08251970; display:flex; align-items:center; justify-content:center; }
  .rules-ui .mr-game-tile img { width:95%; height:93%; display:block; object-fit:contain; }
  .rules-ui .mr-tile-board[data-kind="single"] .mr-game-tile { flex-basis:56px; max-width:56px; }
  .rules-ui .mr-tile-board[data-kind="sequence"] { display:grid; grid-template-columns:1fr; gap:12px; }
  .rules-ui .mr-sequence-step { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .rules-ui .mr-sequence-step > span { color:#e4efde; font-size:11px; }
  .rules-ui .mr-sequence-tiles { display:flex; gap:4px; }
  .rules-ui .mr-sequence-tiles .mr-game-tile { width:28px; flex-basis:28px; }
  .rules-ui .mr-pattern-note { font-size:12px; line-height:1.65; margin:10px 0 0; color:var(--mr-ink); }
  .rules-ui .mr-footer { border-top:1px solid var(--mr-line); padding:13px 20px 16px; }
  .rules-ui .mr-guide { width:100%; text-decoration:none; color:var(--mr-green); font-size:13px; display:flex; gap:8px; justify-content:center; align-items:center; min-height:44px; border:1px solid #d6dfce; border-radius:10px; background:#f5f7ef; }
  .rules-ui .mr-guide svg { width:16px; height:16px; }
  .rules-ui .mr-guide svg:last-child { width:13px; height:13px; margin-left:1px; }
  .rules-ui .mr-closed { padding:40px 0; text-align:center; }
  .rules-ui .mr-reopen { display:inline-flex; align-items:center; gap:8px; background:var(--mr-green); color:var(--mr-paper); border:0; border-radius:12px; padding:12px 18px; font-size:14px; }
  .rules-ui .mr-reopen svg { width:18px; height:18px; }
  .rules-ui .mg-header { padding:12px 20px 16px; border-bottom:1px solid var(--mr-line); }
  .rules-ui .mg-back { display:flex; gap:7px; align-items:center; min-height:44px; padding:0; background:none; border:0; color:var(--mr-green); font-size:12px; }
  .rules-ui .mg-back svg { width:16px; height:16px; }
  .rules-ui .mg-header h2 { margin:5px 0; }
  .rules-ui .mg-header p { font-size:12px; margin:0; color:var(--mr-sub); }
  .rules-ui .mg-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:12px 20px; border-bottom:1px solid var(--mr-line); }
  .rules-ui .mg-nav button { min-height:44px; padding:6px 8px; background:var(--mr-soft); border:0; border-radius:8px; color:var(--mr-ink); font-size:13px; font-weight:500; }
  .rules-ui .mg-nav button[aria-pressed="true"] { background:var(--mr-green); color:var(--mr-paper); }
  .rules-ui .mg-content { padding:18px 20px 12px; font-size:13px; line-height:1.65; }
  .rules-ui .mg-topic > h3 { font:700 21px/1.35 Georgia,'Microsoft JhengHei',serif; margin:0 0 9px; }
  .rules-ui .mg-intro { margin:0 0 14px; color:#53634f; }
  .rules-ui .mg-hand { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px 7px; padding:14px 10px; border-radius:12px; background:#24563f; margin:12px 0 16px; }
  .rules-ui .mg-hand > div { min-width:0; text-align:center; }
  .rules-ui .mg-hand > div:last-child { grid-column:3; }
  .rules-ui .mg-tiles, .rules-ui .mg-demo { display:flex; justify-content:center; align-items:center; gap:3px; }
  .rules-ui .mg-tiles .mr-game-tile { flex:0 1 27px; width:27px; min-width:0; }
  .rules-ui .mg-hand small { display:block; color:#f0f2df; font-size:11px; margin-top:9px; line-height:1.3; }
  .rules-ui .mg-steps { padding-left:20px; margin:0 0 18px; }
  .rules-ui .mg-steps li { padding-left:3px; margin:0 0 10px; }
  .rules-ui .mg-steps li::marker { color:var(--mr-gold); font-weight:700; }
  .rules-ui .mg-fold { border-top:1px solid var(--mr-line); }
  .rules-ui .mg-fold summary { min-height:50px; font-size:13px; gap:8px; }
  .rules-ui .mg-fold summary > span { font-weight:400; font-size:12px; color:var(--mr-sub); margin-left:auto; }
  .rules-ui .mg-fold summary > svg { margin-left:auto; }
  .rules-ui .mg-fold summary > span + svg { margin-left:0; }
  .rules-ui .mg-fold[open] > summary > svg { transform:rotate(180deg); }
  .rules-ui .mg-fold > div { padding-bottom:14px; font-size:12px; }
  .rules-ui .mg-fold p { margin:0 0 11px; }
  .rules-ui .mg-fold p:last-child { margin-bottom:0; }
  .rules-ui .mg-fold h4 { margin:15px 0 5px; font-size:13px; font-weight:600; }
  .rules-ui .mg-demo { padding:15px 10px 20px; background:#24563f; border-radius:10px; margin:0 0 12px; gap:5px; }
  .rules-ui .mg-demo .mr-game-tile { flex:0 0 36px; }
  .rules-ui .mg-callout { background:var(--mr-soft); padding:13px 14px; border-radius:11px; margin:14px 0 10px; }
  .rules-ui .mg-callout strong { font-size:12px; }
  .rules-ui .mg-callout p { font-size:16px; font-weight:600; margin:5px 0; }
  .rules-ui .mg-callout small, .rules-ui .mg-footnote { font-size:11px; line-height:1.6; color:#66715e; }
  .rules-ui .mg-footnote { margin:10px 0 2px; }
  .rules-ui .mg-rows { margin:0 0 12px; font-size:12px; }
  .rules-ui .mg-rows > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px solid #edf0e6; }
  .rules-ui .mg-rows dt { flex:1; min-width:0; }
  .rules-ui .mg-rows dd { margin:0; text-align:right; color:var(--mr-gold); font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0; max-width:55%; }
  .rules-ui .mg-table { width:100%; border-collapse:collapse; font-size:12px; line-height:1.5; margin:10px 0 13px; }
  .rules-ui .mg-table caption { text-align:left; color:var(--mr-sub); font-size:11px; padding-bottom:6px; }
  .rules-ui .mg-table th, .rules-ui .mg-table td { text-align:right; padding:8px 5px; border-bottom:1px solid var(--mr-line); font-variant-numeric:tabular-nums; }
  .rules-ui .mg-table th:first-child, .rules-ui .mg-table td:first-child { text-align:left; padding-left:0; }
  .rules-ui .mg-table th { font-weight:500; }
  .rules-ui .mg-table thead { color:var(--mr-sub); font-size:11px; }
  .rules-ui .mg-formula { padding:13px; border-radius:11px; background:#f6f3e7; margin:13px 0; }
  .rules-ui .mg-formula span, .rules-ui .mg-formula small { display:block; font-size:11px; color:#786b4e; }
  .rules-ui .mg-formula strong { display:block; font-size:15px; margin:3px 0 5px; line-height:1.5; }
  .rules-ui .mg-formula sup { font-size:10px; }
  .rules-ui .mg-pay { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
  .rules-ui .mg-pay > div + div { padding-left:12px; border-left:1px solid var(--mr-line); }
  .rules-ui .mg-pay strong { display:block; font-size:12px; }
  .rules-ui .mg-pay b { font:700 27px/1.4 Georgia,serif; color:var(--mr-gold); }
  .rules-ui .mg-pay p { color:#65715c; font-size:11px; }
  .rules-ui .mg-tile-family { display:flex; gap:13px; align-items:center; padding:12px 0; border-bottom:1px solid var(--mr-line); }
  .rules-ui .mg-tile-family:last-of-type { margin-bottom:14px; }
  .rules-ui .mg-tile-family .mg-tiles { flex:0 0 112px; padding:8px 0; border-radius:8px; background:#24563f; }
  .rules-ui .mg-tile-family .mr-game-tile { flex-basis:23px; width:23px; }
  .rules-ui .mg-tile-family strong { font-size:12px; }
  .rules-ui .mg-tile-family small { display:block; font-size:11px; color:var(--mr-sub); }
  .rules-ui .mg-footer { padding:13px 20px 16px; display:flex; align-items:flex-start; gap:8px; border-top:1px solid var(--mr-line); color:var(--mr-sub); font-size:11px; line-height:1.55; }
  .rules-ui .mg-footer svg { flex:none; width:14px; height:14px; margin-top:2px; }
  @media (max-width:360px) { .rules-ui .mg-header { padding:10px 15px 14px; } .rules-ui .mg-nav { padding:10px 15px; } .rules-ui .mg-content { padding:16px 15px 10px; } .rules-ui .mg-footer { padding:12px 15px 14px; } .rules-ui .mg-hand { grid-template-columns:repeat(2,minmax(0,1fr)); } .rules-ui .mg-hand > div:last-child { grid-column:1 / -1; } .rules-ui .mg-tiles .mr-game-tile { flex-basis:30px; width:30px; } .rules-ui .mg-tile-family .mr-game-tile { flex-basis:23px; width:23px; } }
  @media (max-width:360px) { .rules-ui { padding:12px 6px; } .rules-ui .mr-header { padding:16px 15px 13px; gap:8px; } .rules-ui .mr-content { padding:14px 15px 0; } .rules-ui .mr-footer { padding:12px 15px 14px; } .rules-ui h1, .rules-ui h2 { font-size:25px; } .rules-ui .mr-close { padding:0 10px; } }
  @media (pointer:coarse) { .rules-ui .mr-close { min-height:44px; } .rules-ui .mr-guide { min-height:44px; } .rules-ui .mr-pattern-choice { font-size:16px; } }

/* Shared production surfaces, using the game's existing tile artwork. */
.rules-ui,.rules-ui *{box-sizing:border-box}
.rules-ui.guide-document{margin:0;padding:0;background:#fffef7}
.rules-ui .mr-panel{border:0;border-radius:0;box-shadow:none;background:var(--mr-paper)}
.rules-ui h1{font:700 27px/1.2 Georgia,serif;letter-spacing:-.5px;margin:5px 0;color:var(--mr-ink)}
.rules-ui .mg-back{text-decoration:none}
.rules-ui button,.rules-ui select,.rules-ui summary{cursor:pointer}
.rules-ui summary::after{content:'⌄';font:16px/1 Arial,sans-serif;flex:none;color:#698066;margin-left:auto}
.rules-ui details[open]>summary::after{transform:rotate(180deg)}
.rules-ui .mr-game-tile{position:relative;width:auto;height:auto;min-height:0;padding:0;margin:0;overflow:visible;transform:none}
.rules-ui .mr-game-tile svg{display:block;width:95%;height:93%;object-fit:contain;position:static;transform:none}
.rules-ui .mr-tile-board .mr-game-tile{width:calc((100% - 24px)/7);min-width:0;flex-grow:0;flex-shrink:0}
.rules-ui .mr-tile-board[data-kind="hand"] .mr-game-tile{max-width:none}
.rules-ui .mr-tile-board[data-kind="single"] .mr-game-tile{width:56px}
.rules-ui .mr-sequence-tiles .mr-game-tile{width:28px}
.rules-ui .mg-hand{grid-template-columns:repeat(2,minmax(0,1fr))}
.rules-ui .mg-hand>div:last-child{grid-column:1/-1}
.rules-ui .mg-example-hand{display:flex;flex-wrap:wrap;gap:5px;padding:13px 8px 18px;background:#24563f;border-radius:10px;margin:5px 0 12px}
.rules-ui .mg-example-hand .tile{display:flex;width:32px;height:45px;flex:0 0 32px;padding:2px;background:#fffdf2;border:1px solid #e6dfc5;border-radius:4px;box-shadow:0 3px #b7c4ad}
.rules-ui .mg-example-hand .tile svg{width:100%;height:100%}
.rules-ui .mg-nav{position:sticky;top:0;z-index:2;background:var(--mr-paper)}
.rules-ui .mg-topic[hidden]{display:none}
:host([data-embedded]) .mg-header{display:none}
:host{display:block;overflow:auto;overscroll-behavior:contain}
#lobby-rules-dialog.rules-ui{width:min(420px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;overflow:auto;border:1px solid #d9dece;border-radius:22px;background:var(--mr-paper);color:var(--mr-ink)}
#lobby-rules-dialog>.dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:17px 20px 14px;background:var(--mr-paper);border-bottom:1px solid var(--mr-line)}
#lobby-rules-dialog .dialog-head h2{font:700 27px/1.2 Georgia,serif;margin:0 0 4px;color:var(--mr-ink)}
#lobby-rules-dialog .dialog-head p{font:11px/1.5 Arial,sans-serif;color:var(--mr-sub);margin:0}
#lobby-rules-dialog .dialog-head button{font:12px Arial,sans-serif;min-width:56px;min-height:44px;padding:0 10px;border:1px solid #d9ddcf;border-radius:10px;background:var(--mr-paper);color:var(--mr-ink);flex:none}
#lobby-rules-dialog .mr-content{padding:16px 20px 0}
#lobby-rules-guide{margin:0 20px 17px;width:calc(100% - 40px);min-height:44px}
#lobby-rules-dialog .mr-ready>span:first-child{color:#56794e;font-size:16px;flex:none}
#lobby-rules-dialog .mr-symbol{font-size:23px;padding-top:10px;line-height:1}
#lobby-rules-dialog .mr-content h3{margin:0;font-size:13px}
#lobby-rules-dialog .mr-mode-note{margin:0}
#lobby-rules-dialog .mr-win-grid p{margin:3px 0 0}
#lobby-rules-dialog .mr-pattern-note{margin:10px 0 0}
#lobby-rules-dialog .mr-fold-content>p{margin:0 0 10px}
#lobby-rules-dialog .mr-fold-content>p:last-child{margin-bottom:0}
html[data-high-contrast=on] #lobby-rules-dialog{--mr-ink:#102b1d;--mr-sub:#394735;--mr-line:#798b70}
@media(max-width:360px){#lobby-rules-dialog>.dialog-head{padding:15px}#lobby-rules-dialog .mr-content{padding:14px 15px 0}#lobby-rules-guide{margin:0 15px 15px;width:calc(100% - 30px)}}
@media(min-width:600px){.rules-ui .mg-nav{grid-template-columns:repeat(6,minmax(0,1fr))}.rules-ui .mg-hand{grid-template-columns:repeat(5,minmax(0,1fr))}.rules-ui .mg-hand>div:last-child{grid-column:auto}.rules-ui .mg-content{padding:20px 26px}.rules-ui .mg-hand .mr-game-tile{flex-basis:27px}}