:root{color:#2b2420;--ink:#2b2420;--cream:#fffaf0;--paper:#fff7e8;--gold:#f3c653;background:#ece0cb;font-family:Fredoka,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:280px;margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #3f6fd6}::selection{color:#fffaf0;background:#3f6fd6}[hidden]{display:none!important}#c{touch-action:manipulation;width:100%;height:100%;display:block;position:fixed;inset:0}header{z-index:4;pointer-events:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex;position:relative}header>*{pointer-events:auto}.brand{color:var(--ink);font-size:30px;font-weight:700;text-decoration:none}nav{flex-wrap:wrap;gap:8px;display:flex}.tool,.quiet,.primary{border:2px solid var(--ink);background:var(--cream);border-radius:12px;min-height:44px;padding:10px 14px;font-weight:600;box-shadow:0 3px 6px #2b242025}.tool:hover,.quiet:hover{background:#e6efdf}.primary{background:var(--gold)}.tool:disabled,.primary:disabled{opacity:.55}main{z-index:3;text-align:center;pointer-events:none;position:relative}#hint{border:2px solid var(--ink);background:var(--cream);border-radius:99px;max-width:calc(100vw - 24px);margin:0 auto 8px;padding:9px 16px;font-weight:500;display:table}#notice{min-height:1.4em;margin:6px 12px}#viewNote{margin:6px;font-size:12px}.debug-table{z-index:1;background:#21534a;border:8px solid #6e4a33;border-radius:28px;max-width:900px;margin:12px auto 24px;padding:24px;position:relative;box-shadow:0 8px 18px #2b242030}.debug-others{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.opponent{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:8px 12px;font-weight:500}.opponent.active{box-shadow:0 0 0 3px var(--gold)}.debug-centre{justify-content:center;align-items:center;gap:24px;margin:28px 0 16px;display:flex}.debug-card{background:var(--paper);width:84px;min-height:120px;color:var(--ink);border:2px solid #c99a3f;border-radius:12px;flex:none;place-content:center;font-size:26px;font-weight:600;display:grid;box-shadow:0 4px 6px #17120f30}.debug-card:disabled{color:#5d4b36;box-shadow:none;background:#d9cbb4}.debug-card:not(:disabled):hover{transform:translateY(-4px)}.market{color:var(--cream);background:#502435;border:2px solid #c99a3f;border-radius:12px;width:120px;min-height:120px;padding:12px;font-weight:600}.market:disabled{opacity:.65}.asked-shape{text-align:center;color:var(--cream);font-weight:500}.debug-hand{flex-wrap:wrap;justify-content:center;gap:10px;min-height:124px;display:flex}.debug-card.pile{color:var(--ink)}dialog{z-index:10;border:3px solid var(--ink);background:var(--paper);color:var(--ink);width:min(420px,100vw - 32px);max-height:calc(100dvh - 36px);box-shadow:0 0 0 4px #bd8551,0 0 0 6px var(--ink),0 12px 30px #2b242045;border-radius:20px;padding:24px;position:fixed}dialog::backdrop{background:#2b242080}h1{margin:12px 0;font-size:40px;line-height:1.05}h2{margin:0 0 14px;font-size:28px;line-height:1.15}p{line-height:1.45}.back{color:var(--ink);text-underline-offset:3px;font-size:14px}label{gap:6px;margin:14px 0;font-weight:500;display:grid}input:not([type=radio]),select{background:var(--cream);border:2px solid #a99a81;border-radius:10px;width:100%;min-height:44px;padding:10px}input{accent-color:#236449}dialog .primary,dialog .quiet{width:100%;margin-top:10px}#shapeChoices{border:0;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:0;display:grid}#shapeChoices label{align-items:center;gap:8px;min-height:44px;margin:0;display:flex}#ranking{padding-left:24px}#ranking li{padding:8px 0}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=600px){header{padding:12px}.tool{padding:8px 10px;font-size:13px}.debug-table{border-width:5px;margin:12px;padding:16px}.debug-card{width:68px;min-height:98px;font-size:23px}.debug-centre{gap:16px}.market{min-height:98px}.debug-hand{gap:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.debug-card .shape{color:var(--gem);font-size:28px;line-height:1}.debug-card b{font-size:23px}.debug-card small{color:var(--ink);font-size:12px;font-weight:500}#chatPlayers{pointer-events:auto;flex-wrap:wrap;justify-content:center;gap:8px;margin:8px 12px;display:flex}.player-tag{border:2px solid var(--ink);background:var(--cream);border-radius:10px;gap:2px;padding:5px 10px;font-size:13px;display:grid;position:relative}.player-tag small{font-size:11px}.player-tag.active{border-color:#236449}.online .debug-others{display:none}#roomCode{letter-spacing:.12em;font-size:30px;font-weight:700}#openTables{gap:8px;margin-top:12px;display:grid}#turnTimer,#reconnect,#watching{margin:6px 12px;font-size:13px;font-weight:500}@media (prefers-reduced-motion:reduce){.debug-card:not(:disabled):hover{transform:none}}.asked-shape{margin:8px 0}@media (width<=600px){.debug-centre{margin:16px 0 8px}}.seat-tag{border:2px solid var(--ink);color:var(--ink);white-space:nowrap;box-shadow:0 3px 0 var(--ink);background:#fff7e8e6;border-radius:12px;justify-items:center;gap:1px;padding:4px 12px 5px;font-size:13px;transition:background .2s;display:grid;position:fixed;top:0;left:0}.seat-tag span{opacity:.75;font-size:11px}.seat-tag.turn{background:#f3c653}.seat-tag.last span{color:#c4553f;opacity:1;font-weight:700}body.midnight{background:#181b30}body.midnight .seat-tag{color:#eef0ff;background:#181b30d9;border-color:#5b6390;box-shadow:0 3px #0b0d18}body.midnight .seat-tag.turn{color:#2b2420;background:#e2bd62}body.midnight #hint,body.midnight #notice{color:#eef0ff;background:#181b30d9;border-color:#5b6390}#notice{border:2px solid #0000;border-radius:99px;max-width:calc(100vw - 24px);margin:0 auto 6px;padding:6px 14px;display:table}#notice:empty{display:none}#reconnect:not([hidden]){background:var(--cream);border:2px solid var(--ink);border-radius:99px;margin:0 auto 6px;padding:6px 14px;display:table}body.midnight #reconnect{color:#eef0ff;background:#181b30d9;border-color:#5b6390}:root{--ivory:#f3e9d4;--oxblood:#7a2e29;--navy:#2c3966;--honey:#c9963a;--rim:#c9a874;--soft:0 1px 0 #0005,0 2px 4px #0003}body.midnight .brand{color:var(--ivory);text-shadow:var(--soft)}nav{align-items:center;gap:6px}.tool:not(#takeBack){color:#0000;width:46px;height:46px;min-height:0;box-shadow:none;background:radial-gradient(circle at 50% 35%,#3e4c82,var(--navy) 70%);filter:drop-shadow(0 4px 5px #0007);border:0;border-radius:50%;padding:0;font-size:0;transition:transform 80ms}.tool:not(#takeBack):hover{background:radial-gradient(circle at 50% 35%,#3e4c82,var(--navy) 70%)}.tool:not(#takeBack):active{transform:translateY(2px)scale(.94)}.baked .tool:not(#takeBack){background:var(--art) center/contain no-repeat}#pause{--art:var(--cap-pause)}#pause.on{--art:var(--cap-play)}#help{--art:var(--cap-help)}#newGame{--art:var(--cap-deal)}#sound{--art:var(--cap-sound)}#sound[aria-pressed=false]{--art:var(--cap-mute)}#music{--art:var(--cap-music)}#music[aria-pressed=false]{opacity:.6}#look{--art:var(--cap-sun)}body.midnight #look{--art:var(--cap-moon)}#roomButton{--art:var(--cap-room)}.qc-btn{--art:var(--cap-chat)}.primary,.quiet,#takeBack{border:0;border-radius:99px;min-height:48px;font-weight:700;transition:transform 80ms;box-shadow:0 4px 8px #0004}.primary{color:#3e2a0c;background:linear-gradient(#f1cf86,var(--honey))}.quiet,#takeBack{color:var(--ivory);background:linear-gradient(#3e4c82,var(--navy));text-shadow:var(--soft)}.primary:hover{background:linear-gradient(#f1cf86,var(--honey))}.quiet:hover{background:linear-gradient(#3e4c82,var(--navy))}.primary:active,.quiet:active,#takeBack:active{transform:translateY(2px)scale(.98)}.baked :is(.primary,.quiet,#takeBack){box-shadow:none;filter:drop-shadow(0 4px 5px #0005);border-style:solid;border-image:var(--pill) 45% 16% fill/24px 26px stretch;background:0 0;border-radius:0}.primary{--pill:var(--pill-honey);text-shadow:0 1px #fff6}.quiet,#takeBack{--pill:var(--pill-navy)}#hint,#notice,#reconnect:not([hidden]),.seat-tag,.player-tag{color:var(--ivory);text-shadow:var(--soft);background:linear-gradient(#3e4c82,var(--navy));border:0;box-shadow:0 4px 8px #0005}body.midnight :is(#hint,#notice,#reconnect,.seat-tag){color:var(--ivory);background:linear-gradient(#3e4c82,var(--navy));border:0;box-shadow:0 4px 8px #0005}#hint{padding:10px 20px}#notice{background:linear-gradient(#9a4339,var(--oxblood));padding:8px 18px}.seat-tag,.player-tag{border-radius:99px;padding:6px 16px 7px}.seat-tag span,.player-tag small{opacity:.8}.seat-tag.turn,body.midnight .seat-tag.turn,.player-tag.active{color:#3e2a0c;text-shadow:0 1px #fff6;background:linear-gradient(#f1cf86,var(--honey))}.seat-tag.last span{color:#f0a08a}.seat-tag.turn.last span{color:var(--oxblood)}.baked :is(#hint,#notice,#reconnect:not([hidden]),.seat-tag,.player-tag){box-shadow:none;filter:drop-shadow(0 4px 5px #0006);border-style:solid;border-image:var(--tag,var(--pill-navy)) 45% 16% fill/19px 22px stretch;background:0 0;border-radius:0}#notice{--tag:var(--pill-oxblood)}.seat-tag.turn,.player-tag.active{--tag:var(--pill-honey)}dialog{color:var(--ink);box-shadow:inset 0 0 0 4px #e8dcc3,inset 0 0 0 6px var(--rim),0 6px 0 #8a7350,0 18px 36px #0009;background:radial-gradient(at 50% 40%,#efe2c8,#dccaa6 75%,#c9b48d);border:0;border-radius:22px}dialog[open]{animation:.32s cubic-bezier(.2,1.4,.4,1) deal}@keyframes deal{0%{opacity:0;transform:translateY(14px)scale(.95)}}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0c0e20a0}dialog h1,dialog h2{color:var(--oxblood);text-align:center}#resultTitle{color:var(--ivory);text-shadow:0 2px #4a1a16;background:linear-gradient(#a24a3f,var(--oxblood) 60%,#5c201c);clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);margin:0 auto 12px;padding:6px 34px 9px;display:table}input:not([type=radio]),select{box-shadow:inset 0 0 0 1.5px var(--rim),inset 0 2px 4px #8a735033;background:#fbf4e4;border:0;border-radius:12px}select{appearance:none;background:#fbf4e4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%237a2e29' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center/18px no-repeat;padding-right:36px}.back{color:var(--oxblood)}#shapeChoices{grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:12px}#shapeChoices label{cursor:pointer;border-radius:12px;justify-items:center;gap:3px;padding:4px 2px 6px;font-size:12px;font-weight:600;transition:transform .1s;display:grid}#shapeChoices label:before{content:"";background:#f3e6c8;border-radius:9px;width:54px;height:65px;box-shadow:0 3px 4px #5a462a55}.baked #shapeChoices label:before{box-shadow:none;background:var(--t) center/contain no-repeat;filter:drop-shadow(0 3px 3px #5a462a66);border-radius:0}#shapeChoices input{opacity:0;pointer-events:none;position:absolute}#shapeChoices label:has(:checked){box-shadow:inset 0 0 0 2.5px var(--honey);background:#c9963a2e;transform:translateY(-3px)}#shapeChoices label:has(:focus-visible){outline:3px solid var(--navy);outline-offset:2px}#shapeChoices label:has([value=circle]){--t:var(--tile-circle)}#shapeChoices label:has([value=triangle]){--t:var(--tile-triangle)}#shapeChoices label:has([value=cross]){--t:var(--tile-cross)}#shapeChoices label:has([value=square]){--t:var(--tile-square)}#shapeChoices label:has([value=star]){--t:var(--tile-star)}#ranking{counter-reset:rank;background:#fbf4e4aa;border-radius:12px;margin:0 0 6px;padding:4px;list-style:none;box-shadow:inset 0 0 0 1.5px #c9a87499}#ranking li{counter-increment:rank;border-radius:9px;gap:10px;padding:8px 10px;font-weight:500;display:flex}#ranking li:before{content:counter(rank);color:var(--oxblood);min-width:14px;font-weight:700}#ranking li:first-child{color:var(--ivory);background:linear-gradient(#a24a3f,var(--oxblood));font-weight:700}#ranking li:first-child:before{content:"★";color:#f1cf86}@media (width<=600px){.tool:not(#takeBack){width:40px;height:40px}.brand{font-size:24px}nav{gap:4px}}
