:root{--bg:#1b120d;--ink:#fbf2de;--muted:#d6c5a2;--brass:#d9b25a;--walnut:#5a3a22;--leather:#3a2216;--good:#8fe3a9;--bad:#ff7a6a;--gold:#ffd36a;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100%;font-family:var(--font);color:var(--ink);background:radial-gradient(ellipse at 50% 38%, #ffbe6e33, #140c08eb 72%), var(--img-background,none) center / cover no-repeat, var(--bg);margin:0;overflow:hidden}#game{touch-action:none;position:fixed;inset:0}.shake{pointer-events:none;will-change:transform;position:absolute;inset:0}.boardwrap{filter:drop-shadow(0 14px 22px #0000008c);transition:transform .7s cubic-bezier(.5,0,.2,1);position:absolute}.boardwrap.turned{transform:rotate(180deg)}.boardwrap canvas{display:block;position:absolute;top:0;left:0}#over{pointer-events:none;position:absolute;top:0;left:0}[hidden]{display:none!important}.bar{left:max(8px, env(safe-area-inset-left));top:max(8px, env(safe-area-inset-top));pointer-events:none;align-items:center;gap:10px;display:flex;position:absolute;right:120px}.quit{pointer-events:auto;min-width:44px;min-height:44px;color:var(--ink);font:700 14px/1 var(--font);cursor:pointer;touch-action:manipulation;background:#28180ed9;border:0;border-radius:14px;align-items:center;gap:2px;padding:0 12px 0 6px;display:inline-flex}.quit svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.quit.sure{background:#8d2b20}.title{color:#ffe9b8;text-shadow:0 2px #00000080;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:800;overflow:hidden}.chips,.trickbar{left:8px;right:8px;top:calc(var(--board-top,104px) - 46px);pointer-events:none;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute}.chips .chip{flex:1 1 0;max-width:190px}.chip{box-sizing:border-box;background:#28180ed1;border:2px solid #0000;border-radius:14px;align-items:center;gap:8px;min-height:38px;padding:4px 10px;font-size:13px;font-weight:700;transition:border-color .2s,background .2s,transform .2s;display:flex}.chip.active{border-color:var(--gold);background:#462a16f2;transform:scale(1.04)}.chip .who{white-space:nowrap;text-overflow:ellipsis;max-width:78px;overflow:hidden}.chip .pips{gap:3px;margin-left:auto;display:flex}.chip .pip{box-sizing:border-box;border:1.5px solid #ffffff73;border-radius:50%;width:9px;height:9px}.chip .pip.on{background:var(--good);border-color:var(--good)}.queen-mark{background:#28180ed1;border:2px solid #fff6;border-radius:50%;flex:none;place-items:center;width:30px;height:30px;display:grid}.queen-mark span{opacity:.45;background:#d3302a;border-radius:50%;width:16px;height:16px}.queen-mark.pending{border-color:var(--gold);animation:.9s ease-in-out infinite pulse}.queen-mark.pending span,.queen-mark.owned span{opacity:1}.queen-mark.owned.p0{border-color:#f3ead3}.queen-mark.owned.p1{border-color:#6a6a78}@keyframes pulse{50%{transform:scale(1.18)}}.trickbar{pointer-events:none}.trickbar .btn{pointer-events:auto}.trickbar .chip{flex-direction:column;flex:auto;align-items:flex-start;gap:0;min-width:0;max-width:220px;padding-top:3px;padding-bottom:3px;line-height:1.15;display:flex}.trickbar .chip b{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.trickbar .chip small{color:var(--muted);font-size:11px;font-weight:600}.banner{left:50%;top:calc(var(--board-bottom,460px) + 14px);max-width:min(86vw,520px);font:800 17px/1.2 var(--font);text-align:center;opacity:0;pointer-events:none;background:#1e120aeb;border:2px solid #ffffff59;border-radius:999px;padding:9px 18px;transition:opacity .18s,transform .18s;position:absolute;transform:translate(-50%)scale(.9)}.banner.show{opacity:1;transform:translate(-50%)scale(1)}.banner.good{border-color:var(--good);color:var(--good)}.banner.bad{border-color:var(--bad);color:var(--bad)}.banner.gold{border-color:var(--gold);color:var(--gold)}.hint{text-align:center;color:#ffe9b8;text-shadow:0 2px 4px #000000b3;pointer-events:none;width:max-content;max-width:min(88vw,520px);font-size:14px;font-weight:700;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.hint:empty{display:none}.screen{box-sizing:border-box;touch-action:pan-y;background:#0a06038c;justify-content:center;align-items:center;padding:12px;display:flex;position:absolute;inset:0;overflow-y:auto}.panel{box-sizing:border-box;border:30px solid #0000;border-image:var(--img-panel,none) 56 / 30px / 0 stretch;text-align:center;filter:drop-shadow(0 18px 30px #0000008c);background-color:#0000;background-image:radial-gradient(at 50% 0,#ffdca01a,#0000 60%),linear-gradient(#4a2c18,#2c1a0e);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:auto,auto;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:padding-box;border-radius:18px;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:min(420px,100vw - 24px);max-height:calc(100vh - 24px);padding:14px 8px 12px;display:flex;overflow-y:auto;box-shadow:inset 0 0 0 3px #7a4f2c}.panel h1,.panel h2{text-shadow:0 2px #00000073;color:#ffe9b8;margin:0}.panel h1{font-size:34px}.panel h2{font-size:24px}.sub{color:var(--muted);margin:0;font-size:14px;line-height:1.35}.foot{color:var(--muted);margin:2px 0 0;font-size:13px}.key-art{width:220px;height:70px;margin:0 auto;position:relative}.key-art .c{border-radius:50%;width:44px;height:44px;position:absolute;top:12px;box-shadow:0 3px 6px #00000080,inset 0 0 0 5px #0000001f}.key-art .w{background:radial-gradient(circle at 35% 30%,#fffaf0,#d9ceb2)}.key-art .b{background:radial-gradient(circle at 35% 30%,#4a4a55,#18181d)}.key-art .q{background:radial-gradient(circle at 35% 30%,#ff6a58,#a2191a);width:50px;height:50px;top:9px}.key-art .s{background:radial-gradient(circle at 35% 30%,#fff1cf,#f0a24a);width:52px;height:52px;top:8px}.key-art .c:first-child{left:2px}.key-art .c:nth-child(2){top:22px;left:38px}.key-art .c:nth-child(3){left:84px}.key-art .c:nth-child(4){top:20px;left:130px}.key-art .c:nth-child(5){top:4px;left:150px}.key-art .c:nth-child(6){top:12px;left:168px}.btn{font:700 17px/1.1 var(--font);cursor:pointer;touch-action:manipulation;min-height:50px;color:var(--ink);border:0;border-radius:16px;padding:0 18px;transition:transform 80ms}.btn:active{transform:scale(.97)}.btn:focus-visible,.quit:focus-visible,.cell:focus-visible,.level:focus-visible{outline-offset:2px;outline:3px solid #fff}.btn.primary{color:#2a170a;text-shadow:0 1px #fff0c899;background:linear-gradient(#f6d98a,#c4932f);box-shadow:0 3px #7d5a14}.btn.secondary{background:linear-gradient(#7a5233,#54341e);box-shadow:0 3px #2c180b}.btn.ghost{color:var(--muted);background:0 0;min-height:44px;font-size:15px}.btn.big{min-height:58px;font-size:20px}.btn.small{min-height:44px;padding:0 14px;font-size:14px}.levels{flex-direction:column;gap:8px;display:flex}.level{min-height:62px;color:var(--ink);font:700 17px/1.2 var(--font);text-align:left;cursor:pointer;touch-action:manipulation;background:linear-gradient(#7a5233,#54341e);border:0;border-radius:16px;align-items:center;gap:12px;padding:8px 14px;display:flex;box-shadow:0 3px #2c180b}.level small{color:var(--muted);font-size:12px;font-weight:500;display:block}.level .st{color:var(--gold);letter-spacing:2px;white-space:nowrap;margin-left:auto}.trick-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.cell{min-width:0;min-height:56px;color:var(--ink);font:800 16px/1 var(--font);cursor:pointer;touch-action:manipulation;background:linear-gradient(#7a5233,#54341e);border:0;border-radius:12px;padding-bottom:12px;position:relative;box-shadow:0 3px #2c180b}.cell small{letter-spacing:1px;color:var(--gold);font-size:10px;position:absolute;bottom:5px;left:0;right:0}.cell.done{background:linear-gradient(#5a7a3a,#3a5424)}.toggle{text-align:left;cursor:pointer;align-items:center;gap:12px;min-height:48px;font-size:15px;display:flex}.toggle input{accent-color:#d9b25a;flex:none;width:26px;height:26px}.stars{letter-spacing:6px;color:#6a5a45;min-height:52px;font-size:44px}.stars .on{color:var(--gold);animation:.45s cubic-bezier(.3,1.6,.5,1) both starpop;display:inline-block}@keyframes starpop{0%{opacity:0;transform:scale(.2)rotate(-40deg)}}.big-score{color:#fff1cf;font-size:40px;font-weight:900}.big-score:empty{display:none}.unlock{color:var(--gold);background:#ffd36a29;border-radius:12px;padding:8px 12px;font-size:14px;font-weight:800}.toast{border:2px solid var(--gold);opacity:0;pointer-events:none;z-index:5;background:#1e120aeb;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:800;transition:opacity .2s,transform .2s;position:absolute;bottom:24px;left:50%;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}@media (height<=640px){.key-art{display:none}.panel{gap:7px;padding-top:14px}}@media (prefers-reduced-motion:reduce){.boardwrap{transition:none}}.st .off,.cell small .off{opacity:.22}.no-board .shake,.no-board #over{visibility:hidden}html.skin-button-primary .btn.primary{border:16px solid #0000;border-image:var(--img-button-primary) 46 fill / 16px / 0 stretch;box-shadow:none;background:0 0;min-height:50px;padding:0 6px}html.skin-button-secondary .btn.secondary,html.skin-button-secondary .level,html.skin-button-secondary .cell{border:16px solid #0000;border-image:var(--img-button-secondary) 46 fill / 16px / 0 stretch;box-shadow:none;background:0 0}html.skin-button-secondary .btn.small{padding:0 4px}html.skin-button-secondary .cell{border-width:10px;border-image-width:10px}html.skin-key-art .key-art{background:var(--img-key-art) center / cover no-repeat;border-radius:16px;width:128px;height:128px;box-shadow:0 6px 14px #00000080}html.skin-key-art .key-art .c{display:none}
