:root{--bg:#06140c;--felt:#0d2b1a;--felt-2:#0a2013;--panel:#0e2a1b;--line:#1c5236;--line-hi:#2f8a5b;--gold:#d8b15a;--ink:#e9efe6;--ink-dim:#9fb6a6;--card-w:72px;--card-h:102px;--gap:10px;--radius:8px;--red:#c0392b;--black:#161616;--green:#1e8449;--dragon:#12b3a4;--flower:#d63384}*{box-sizing:border-box;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-drag:none}html{-webkit-touch-callout:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}html,body{background:radial-gradient(140% 120% at 50% -10%, var(--felt) 0%, var(--felt-2) 55%, var(--bg) 100%);height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none;touch-action:pan-x pan-y;-webkit-touch-callout:none;margin:0;padding:0;font-family:DejaVu Sans Mono,SFMono-Regular,Consolas,Menlo,monospace}.toolbar-panel,.toolbar-panel.side-panel{border-bottom:1px solid var(--line);background:linear-gradient(rgba(0,0,0,.35),transparent);order:0;justify-content:space-between;align-items:center;width:100%;padding:12px 18px;display:flex}.brand{align-items:center;display:flex}.brand>*+*{margin-left:10px}.brand-glyph{color:var(--dragon);text-shadow:0 0 12px rgba(18,179,164,.6);font-size:22px}.brand h1{letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin:0;font-size:16px}.controls{align-items:center;display:flex}.controls>*+*{margin-left:8px}.controls button,.wins-pill{font:inherit;color:var(--ink);border:1px solid var(--line);cursor:pointer;background:rgba(12,40,26,.85);border-radius:6px;padding:7px 11px;font-size:13px;transition:border-color .15s,background .15s,transform 50ms}.controls button:hover{border-color:var(--line-hi);background:rgba(20,60,38,.9)}.controls button:active{transform:translateY(1px)}.controls button:disabled{opacity:.4;cursor:not-allowed}.wins-pill{color:var(--gold);justify-content:center;align-items:center;display:flex}.wins-pill span{margin-left:4px}#btn-mute{min-width:42px}#btn-fullscreen{display:none}.board{touch-action:none;max-width:760px;margin:18px auto 40px;padding:0 14px}.game-layout{flex-wrap:wrap;place-content:stretch space-between;align-items:center;margin-bottom:22px;display:flex}.toolbar-panel{margin-bottom:22px}.tableau{margin-top:22px}.side-panel{display:contents}.panel-content{display:flex}.panel-content>*+*{margin-left:var(--gap)}.cell-group{display:flex}.cell-group>*+*{margin-left:var(--gap)}.side-label{display:none}.slot{width:var(--card-w);height:var(--card-h);border:1.5px dashed var(--line);border-radius:var(--radius);background:rgba(0,0,0,.18);position:relative}.slot.empty{background:rgba(0,0,0,.22)}.slot.foundation{border-style:solid}.slot.foundation .count{color:rgba(255,255,255,.55);font-size:11px;position:absolute;bottom:2px;right:4px}.foundation.c-red{box-shadow:inset 0 0 0 2px rgba(192,57,43,.35)}.foundation.c-black{box-shadow:inset 0 0 0 2px rgba(220,220,220,.18)}.foundation.c-green{box-shadow:inset 0 0 0 2px rgba(30,132,73,.45)}.slot.flower-slot{border-color:rgba(214,51,132,.6)}.slot.flower-slot.empty:before{content:"✿";color:rgba(214,51,132,.35);place-items:center;font-size:26px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.slot.col{width:var(--card-w);min-height:var(--card-h);background:0 0;border:none;height:auto}.slot.col.empty:before{content:"";width:var(--card-w);height:var(--card-h);border:1.5px dashed var(--line);border-radius:var(--radius);pointer-events:none;background:rgba(0,0,0,.22);position:absolute;top:0;left:0}.slot.col.empty{background:0 0}.slot.locked{border-style:solid}.slot.locked.c-red{border-color:var(--red);box-shadow:inset 0 0 12px rgba(192,57,43,.35)}.slot.locked.c-black{border-color:#555;box-shadow:inset 0 0 12px rgba(180,180,180,.25)}.slot.locked.c-green{border-color:var(--green);box-shadow:inset 0 0 12px rgba(30,132,73,.45)}.locked-dragons{place-items:center;font-size:30px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.locked-dragons.c-red{color:var(--red)}.locked-dragons.c-black{color:#ccc}.locked-dragons.c-green{color:var(--green)}.locked-dragons .lock{opacity:.7;font-size:11px;position:absolute;bottom:2px;right:3px}.tableau{grid-template-columns:repeat(8, var(--card-w));grid-gap:var(--gap);gap:var(--gap);order:10;justify-content:center;width:100%;display:grid}.col .card:not(:first-child){margin-top:-74px}.col .card{pointer-events:auto}.card{width:var(--card-w);height:var(--card-h);border-radius:var(--radius);cursor:-webkit-grab;cursor:grab;touch-action:none;background:#efe9d8;font-family:DejaVu Sans Mono,SFMono-Regular,Consolas,Menlo,Microsoft JhengHei,PingFang TC,Noto Sans CJK TC,monospace;transition:transform 50ms;position:relative;box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08)}.corner{flex-direction:column;align-items:center;line-height:1;display:flex;position:absolute}.corner.tl{top:3px;left:4px}.corner.br{bottom:3px;right:4px;transform:rotate(180deg)}.rank-num{font-size:16px;font-weight:700}.glyph-small{font-size:14px}.c-red .corner{color:var(--red)}.c-green .corner{color:var(--green)}.c-black .corner{color:#1c1c1c}.card.dragon{background:#efe9d8}.card.dragon .corner{color:var(--dragon)}.card.dragon.c-red .corner{color:var(--red)}.card.dragon.c-black .corner{color:#1c1c1c}.card.dragon.c-green .corner{color:var(--green)}.card.flower{background:#efe9d8}.card.flower .corner{color:var(--flower)}.card.no-drag{cursor:default}.flying-card{z-index:100;pointer-events:none;margin:0;transition:transform .22s cubic-bezier(.2,.8,.2,1);position:fixed}.card.is-dragging{visibility:hidden}.card.ghost{cursor:-webkit-grabbing;cursor:grabbing;transform-origin:top;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));pointer-events:none;margin:0;transition:none;position:fixed}.shake{animation:.32s shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.slot.drop-ok{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold), 0 0 16px rgba(216,177,90,.6)}.dragon-btn{width:var(--card-w);height:var(--card-h);font:inherit;color:var(--ink-dim);border:1.5px dashed var(--line);border-radius:var(--radius);cursor:not-allowed;background:rgba(8,30,24,.7);grid-template-rows:1fr auto;place-items:center;font-size:12px;transition:all .15s;display:grid}.dragon-btn .glyph{opacity:.5;font-size:26px}.dragon-btn.ready{color:#06140c;cursor:pointer;border-style:solid;animation:1.4s infinite pulse}.dragon-btn.ready[data-color=red]{background:linear-gradient(160deg,#e74c3c,#a8231a);border-color:#e74c3c;box-shadow:0 0 18px rgba(231,76,60,.55)}.dragon-btn.ready[data-color=black]{background:linear-gradient(160deg,#7f8c8d,#4a4a4a);border-color:#95a5a6;box-shadow:0 0 18px rgba(149,165,166,.55)}.dragon-btn.ready[data-color=green]{background:linear-gradient(160deg,#27ae60,#186a36);border-color:#27ae60;box-shadow:0 0 18px rgba(39,174,96,.55)}.dragon-btn.ready .glyph{opacity:1;color:#06140c}@keyframes pulse{0%,to{box-shadow:0 0 10px rgba(18,200,184,.45)}50%{box-shadow:0 0 22px rgba(18,200,184,.85)}}.achievements{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px;display:flex}.achv{color:var(--ink-dim);border:1px solid var(--line);opacity:.55;background:rgba(0,0,0,.25);border-radius:20px;align-items:center;gap:7px;padding:5px 12px 5px 8px;font-size:12px;transition:all .2s;display:flex}.achv .ribbon{font-size:15px}.achv i{color:var(--ink-dim);font-style:normal}.achv.done{opacity:1;color:var(--gold);border-color:var(--gold)}.overlay{z-index:50;background:rgba(2,10,6,.78);place-items:center;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.overlay[hidden]{display:none}.overlay-card{border:1px solid var(--line-hi);text-align:center;background:linear-gradient(160deg,#103023,#0a1c13);border-radius:14px;padding:34px 44px;box-shadow:0 0 60px rgba(0,0,0,.6)}.overlay-glyph{color:var(--gold);text-shadow:0 0 24px rgba(216,177,90,.6);font-size:54px}.overlay-card h2{color:var(--gold);letter-spacing:2px;margin:8px 0 4px}.overlay-card p{color:var(--ink-dim);margin:0 0 18px}.overlay-card button{font:inherit;color:var(--ink);background:var(--line-hi);cursor:pointer;border:none;border-radius:8px;padding:10px 18px}.overlay-card button:hover{filter:brightness(1.1)}.toasts{z-index:60;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--gold);color:var(--gold);background:rgba(8,30,24,.96);border-radius:8px;padding:9px 16px;font-size:13px;animation:.25s toast-in,.3s 1.8s forwards toast-out;box-shadow:0 6px 18px rgba(0,0,0,.5)}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}}@keyframes toast-out{to{opacity:0;transform:translateY(-6px)}}@media (orientation:landscape) and (max-width:896px),(max-width:560px){:root{--card-w:52px;--card-h:74px;--gap:6px}html,body{overflow:hidden}.game-layout{flex-flow:row;align-items:stretch;row-gap:0;margin-bottom:14px;display:flex;position:relative}.game-layout>*+*{margin-left:8px}.side-panel{flex-direction:column;flex-shrink:0;justify-content:space-between;align-items:center;width:56px;padding:4px 0;display:flex}.toolbar-panel.side-panel{border-bottom:none;border-right:1px solid var(--line);background:rgba(0,0,0,.25);flex-direction:column;order:0;width:44px;padding:6px 4px}.toolbar-panel.side-panel>*+*{margin-top:8px}.toolbar-panel.side-panel .brand h1{display:none}.toolbar-panel.side-panel .controls{flex-direction:column}.toolbar-panel.side-panel .controls>*+*{margin-top:6px}.toolbar-panel.side-panel .controls button,.toolbar-panel.side-panel .wins-pill{writing-mode:vertical-rl;-webkit-text-orientation:mixed;text-orientation:mixed;width:100%;min-width:0;padding:5px 4px;font-size:11px}.toolbar-panel.side-panel .wins-pill{writing-mode:vertical-rl;-webkit-text-orientation:mixed;text-orientation:mixed}.left-panel{order:1}.tableau{grid-template-columns:repeat(8, var(--card-w));grid-gap:6px;flex:1;order:2;justify-content:center;gap:6px;width:auto;display:grid}.right-panel{order:3}.panel-content{flex-direction:column;align-items:center}.panel-content>*+*{margin-top:6px}.panel-content .cell-group{flex-direction:column;align-items:center}.panel-content .cell-group>*+*{margin-top:6px}.dragon-btn .lbl{display:none}.side-label{color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;font-size:9px;display:block;position:absolute;top:-16px}.lbl-left{left:44px}.lbl-right{right:0}.card.num .rank,.card.dragon .glyph,.card.flower .glyph{font-size:20px}.col .card:not(:first-child){margin-top:-54px}.brand h1{font-size:13px}#btn-fullscreen{writing-mode:horizontal-tb;-webkit-text-orientation:mixed;text-orientation:mixed;justify-content:center;align-items:center;padding:7px 6px;display:inline-flex}#btn-fullscreen.fs-active{border-color:var(--gold);color:var(--gold)}}