:root{--ink:#1b1b3a;--paper:#f6e8c3;--orange:#f46036;--blue:#2e86ab;--gold:#ffb627;color:var(--ink);font-family:"Nunito",system-ui,sans-serif;background:var(--ink)}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{min-width:44px;min-height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);font-weight:800;padding:8px 13px;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:3px}button:disabled{opacity:.55;cursor:default}[hidden]{display:none!important}#app{position:relative;max-width:1200px;margin:auto;min-height:100svh;padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:var(--paper)}header{display:flex;gap:8px;align-items:center;min-height:48px;flex-wrap:wrap}header strong{margin-right:auto}#wall{font-weight:800}#tableWrap{position:relative;margin-top:8px;height:clamp(230px,49svh,520px);border:3px solid var(--ink);border-radius:28px;overflow:hidden;background:#2e86ab}canvas{width:100%;height:100%;display:block}#status{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);max-width:60%;margin:0;text-align:center;background:var(--paper);padding:8px 15px;border:2px solid var(--ink);border-radius:16px;font-weight:900;font-size:clamp(15px,2vw,22px);pointer-events:none}#player{padding-top:12px}#hand{display:grid;grid-template-columns:repeat(14,minmax(44px,1fr));gap:5px;margin:auto;max-width:1050px}.tile{height:72px;padding:3px;box-shadow:0 5px 0 #a49b83;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:9px;line-height:1.15}.tile span:first-child{font-weight:1000;font-size:23px}.tile span:last-child{font-size:12px;white-space:nowrap}.tile.selected{background:#ffb627;transform:translateY(-6px);box-shadow:0 10px 0 #a49b83}.tile.drawn{border-color:var(--orange)}#actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:14px;min-height:58px}#advice{font-size:14px;text-align:center;margin:7px 0 0;min-height:20px}#actions .primary,#play{background:var(--orange)}.panel{position:absolute;z-index:3;inset:70px auto auto 50%;transform:translateX(-50%);width:min(94%,600px);max-height:calc(100svh - 85px);overflow:auto;background:var(--paper);border:3px solid var(--ink);border-radius:24px;box-shadow:0 12px 0 #1b1b3a66;padding:24px;text-align:center}.panel h1{margin:0;font-size:32px}.panel h2{margin-top:0}.panel p{line-height:1.45}.panel>button{margin:5px}label{display:flex;gap:10px;align-items:center;justify-content:center;font-weight:800;margin:12px 0}input[type=number]{width:165px;min-height:44px;border:2px solid var(--ink);border-radius:10px;padding:7px;background:white}.check{min-height:44px}input[type=checkbox]{width:24px;height:24px;accent-color:var(--orange)}.small{font-size:13px}#rivers p{text-align:left;word-break:break-word}.pattern{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #1b1b3a33;padding:7px}#storage{font-size:13px;color:#8b321a}body.no-motion .tile.selected{transform:none}@media(max-width:720px){#app{padding:6px 8px calc(8px + env(safe-area-inset-bottom))}header strong{font-size:16px;flex-basis:100%;text-align:center}header{justify-content:center}header button{font-size:13px}#tableWrap{height:clamp(215px,38svh,340px);margin-top:6px}#hand{grid-template-columns:repeat(7,minmax(44px,1fr));gap:5px}.tile{height:62px}.tile span:first-child{font-size:22px}.tile span:last-child{font-size:10px}#status{max-width:65%;font-size:15px;padding:6px 9px}.panel{inset:45px auto auto 50%;padding:17px;max-height:calc(100svh - 60px)}}@media(max-height:480px) and (min-width:721px){#tableWrap{height:180px}.tile{height:55px}.panel{inset:15px auto auto 50%;max-height:calc(100svh - 30px)}header{min-height:44px}#advice{margin-top:3px;font-size:12px}}
@media(max-width:360px){#hand{grid-template-columns:repeat(6,minmax(44px,1fr))}}
#melds{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:7px}.meld{font-size:18px;background:#ffb62766;padding:3px 9px;border:1px solid var(--ink);border-radius:7px}#flowers{font-size:13px;text-align:center;margin:0 0 8px}#flowers:empty,#melds:empty{display:none}
@media(max-width:720px){#status{top:53%;max-width:50%}}
@media(max-height:480px) and (min-width:721px){#status{top:65%;max-width:50%}}

select{font:inherit;min-height:44px;max-width:100%;border:2px solid var(--ink);border-radius:10px;padding:7px;background:white;color:var(--ink)}#scoreline{font-size:13px;text-align:center;margin:0 0 12px;line-height:1.5;overflow-wrap:anywhere}#scoreline:empty{display:none}

.neighbors{display:block;width:100%;height:auto;max-height:140px;object-fit:contain;margin:6px auto}

#privacy{z-index:5;box-shadow:0 0 0 160vmax var(--paper);max-width:550px}#privacyMenu{display:block;margin:10px auto}#progress,#awardText{font-weight:800}#notebookRows article{text-align:left;border-bottom:1px solid #1b1b3a33;padding:10px 0}#notebookRows button{width:100%;text-align:left}.result-hand{overflow-wrap:anywhere;font-size:20px}#standingsText{overflow-wrap:anywhere}.panel label{flex-wrap:wrap}.panel input[type=number]{max-width:100%}

header strong{display:flex;align-items:center;gap:6px}#ownBadge{width:36px;height:36px;flex:none}@media(max-width:720px){header strong{justify-content:center}}

.menu-hero{display:flex;align-items:center;gap:16px;text-align:left}.menu-cover{display:block;width:160px;height:90px;object-fit:cover;border-radius:12px;flex:none}.menu-hero h1{font-size:29px}.menu-primary{display:flex;justify-content:center;gap:8px;position:sticky;top:-24px;z-index:6;background:var(--paper);padding:9px 0}.menu-primary button{flex:1}.menu-primary #continue[hidden]{display:none}@media(max-width:720px){.menu-cover{width:112px;height:63px}.menu-hero{gap:10px}.menu-hero h1{font-size:23px}.menu-primary{top:-17px}}
@media(max-width:360px){#app{padding-left:6px;padding-right:6px}#hand{grid-template-columns:repeat(7,minmax(44px,1fr));column-gap:clamp(0px,calc((100vw - 320px)/8),4px);row-gap:8px}.tile span:last-child{font-size:9px}}

#lessonHand{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:5px;margin:16px 0}#lessonActions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}#lessonFeedback{font-weight:800}#lessonHand .tile{height:60px;padding:2px;font-size:20px}@media(max-width:400px){#lessons{padding:10px;width:calc(100% - 4px)}#lessonHand{column-gap:0}}

/* Relative tile sizing permits enlarged browser text to reflow instead of clip. */
#hand,#lessonHand{grid-template-columns:repeat(auto-fit,minmax(max(44px,2.75rem),1fr))}.tile,#lessonHand .tile{min-height:4rem;height:auto}.tile span:first-child{font-size:1.375rem}.tile span:last-child{font-size:.625rem;white-space:normal;overflow-wrap:anywhere}.panel h1{font-size:2rem}.menu-hero h1{font-size:1.8125rem}@media(max-width:720px){.menu-hero h1{font-size:1.4375rem}}@media(max-width:360px){.tile span:last-child{font-size:.5625rem}}
.panel{overflow-wrap:anywhere}.menu-hero h1{min-width:0;overflow-wrap:anywhere}

#resultReactions{width:100%;max-width:384px;height:auto;margin:0 auto}
.pattern-detail{text-align:left;border-bottom:1px solid #1b1b3a33;padding:7px 0}.pattern-detail summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;min-height:44px;cursor:pointer}.pattern-detail summary span{grid-column:1;grid-row:1;min-width:0}.pattern-detail summary b{grid-column:1;grid-row:2;min-width:0}.pattern-detail summary b{font-size:.875rem}.pattern-detail summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.pattern-detail p{font-size:.9375rem;margin:8px 0}#referenceIntro,#resultExplanation{text-align:left;font-size:.9375rem}#referenceRows{margin:14px 0}
.pattern-detail summary::after{content:'＋';font-weight:900;grid-column:2;grid-row:1 / 3}.pattern-detail[open] summary::after{content:'−'}
#referenceNotes{text-align:left;font-size:.9375rem}
.reference-toolbar{position:sticky;top:-24px;z-index:2;background:var(--paper);padding:6px 0;box-shadow:0 2px 0 #1b1b3a33}#referenceClose{background:var(--paper)}

@media(max-width:720px){.reference-toolbar{top:-17px}}