:root{color-scheme:dark;--bg:#071b25;--panel:#0d2b36e8;--line:#ffffff20;--ink:#f7fafc;--muted:#b9cbd2;--accent:#f4c95d;--accent2:#55d6be;--danger:#ff6b7a;--card-w:clamp(42px,10vw,78px);--card-h:calc(var(--card-w)*1.42);font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{min-height:100vh;background:radial-gradient(circle at 15% 10%,#174b57 0,transparent 32%),linear-gradient(145deg,#061820,#0a2830);color:var(--ink);font-size:15px}
button,select,input{font:inherit}button{min-height:44px;border:1px solid var(--line);border-radius:12px;background:#153d49;color:var(--ink);padding:.62rem .86rem;cursor:pointer;font-weight:800;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover{background:#1c5260}button:active{transform:scale(.97)}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.primary{background:linear-gradient(135deg,var(--accent),#f59e0b);color:#13222a;border:0}.danger{background:#7f1d2d}.icon{width:44px;padding:0;font-size:1.15rem}.shell{width:min(1240px,100%);margin:auto;padding:.55rem}.topbar{display:flex;justify-content:space-between;gap:.5rem;align-items:center;background:#071b25f2;border:1px solid var(--line);border-radius:18px;padding:.55rem .7rem;position:sticky;top:.25rem;z-index:30;backdrop-filter:blur(12px)}.brand{display:flex;gap:.55rem;align-items:center;min-width:0}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#09232b;font-size:1.25rem;flex:none}.brand h1{font-size:clamp(.95rem,3.5vw,1.35rem);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand p{margin:.1rem 0 0;color:var(--muted);font-size:.72rem}.top-actions{display:flex;gap:.3rem}.layout{display:grid;gap:.65rem;margin-top:.65rem}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:.65rem;box-shadow:0 12px 32px #0004}.main-panel{min-width:0}.hud{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.55rem}.stat{background:#061b23;border:1px solid var(--line);border-radius:11px;padding:.42rem .6rem;font-size:.82rem}.stat b{color:var(--accent)}.objective{margin:.25rem 0 .55rem;color:var(--muted);font-size:.88rem;line-height:1.4}.table-wrap{min-height:280px;display:grid;align-items:center;overflow-x:hidden;overflow-y:visible;border-radius:14px;background:radial-gradient(circle at 50% 30%,#26705d,#0e4b43 62%,#0b3438);padding:.55rem;touch-action:pan-y}.table{width:100%;min-height:260px}.side{display:grid;gap:.65rem;align-content:start}.side h2,.side h3{font-size:.95rem;margin:.1rem 0 .45rem}.actions{display:flex;flex-wrap:wrap;gap:.4rem}.log{margin:0;padding-left:1.3rem;max-height:120px;overflow:auto;color:var(--muted);font-size:.78rem}.log li{margin:.25rem 0}.card{position:relative;width:var(--card-w);height:var(--card-h);min-height:44px;border-radius:9px;border:2px solid #fff9;background:#f8fafc;color:#17212a;box-shadow:0 3px 8px #0006;display:grid;place-items:center;user-select:none;touch-action:none;transition:transform .14s,box-shadow .14s,opacity .14s;padding:0}.card.red{color:#b91c3b}.card.back{background:repeating-linear-gradient(45deg,#183c78 0 7px,#2d62ac 7px 14px);border:4px solid #eaf2ff;color:transparent}.card.selected{transform:translateY(-8px);box-shadow:0 0 0 4px var(--accent),0 8px 16px #0008}.card.valid{box-shadow:0 0 0 3px var(--accent2)}.card.matched{opacity:.25;pointer-events:none}.card .corner{position:absolute;top:4px;left:5px;display:grid;line-height:.9;text-align:center;font-weight:900;font-size:clamp(.68rem,2.4vw,.95rem)}.card .pip{font-size:clamp(1rem,4.5vw,2rem)}.card .badge{position:absolute;right:3px;bottom:3px;font-size:.55rem;color:#243;max-width:80%;overflow:hidden;text-overflow:ellipsis}.slot{min-width:var(--card-w);min-height:var(--card-h);border:2px dashed #ffffff48;border-radius:10px;display:grid;place-items:center;color:#ffffff99}.row{display:flex;gap:clamp(3px,1vw,9px);align-items:flex-start}.pile{position:relative;min-width:var(--card-w);min-height:var(--card-h)}.pile>.card{position:absolute;left:0;top:calc(var(--i,0)*clamp(18px,4.5vw,30px))}.modal{position:fixed;inset:0;background:#020b10e8;z-index:100;display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}.modal[hidden]{display:none}.dialog{width:min(520px,100%);max-height:92dvh;overflow:auto;background:#0d2b36;border:1px solid #ffffff2b;border-radius:22px;padding:1.1rem;box-shadow:0 24px 80px #000a}.dialog h2{margin:.35rem 0}.dialog p{color:var(--muted);line-height:1.55}.mark{width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#09232b;font-size:1.55rem;font-weight:900}.dialog-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.field{display:grid;gap:.25rem;margin:.65rem 0}.field select,.field input{width:100%;min-height:44px;border:1px solid var(--line);background:#071b25;color:var(--ink);border-radius:10px;padding:.65rem}.toast{position:fixed;bottom:max(1rem,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,120%);opacity:0;z-index:120;background:#f8fafc;color:#14242b;border-radius:99px;padding:.65rem 1rem;font-weight:900;transition:.18s;box-shadow:0 10px 30px #0008;max-width:90%;text-align:center}.toast.show{transform:translate(-50%,0);opacity:1}.sr-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.cb .card[data-color="corallo"]{background:#a63a50;color:#fff}.cb .card[data-color="turchese"]{background:#147d83;color:#fff}.cb .card[data-color="lime"]{background:#5a7d1e;color:#fff}.cb .card[data-color="viola"]{background:#6f4aa5;color:#fff}.cb .card[data-color="ambra"]{background:#9a6411;color:#fff}
@media(min-width:800px){.shell{padding:1rem}.layout{grid-template-columns:minmax(0,1fr) 290px}.side{position:sticky;top:75px}.table-wrap{min-height:520px}.table{min-height:490px}}
@media(max-width:799px){body{overscroll-behavior-y:contain}.shell{padding:.35rem}.topbar{border-radius:14px;padding:.45rem}.brand p{display:none}.brand h1{max-width:clamp(105px,33vw,190px)}.top-actions{gap:3px}.icon{width:40px;min-height:44px;padding:0}.layout{display:flex;flex-direction:column;gap:.45rem;margin-top:.45rem}.side{display:contents}.side>.panel:first-child{order:-1;padding:.4rem .45rem}.side>.panel:first-child h2{display:none}.side>.panel:last-child{display:none}.actions{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:.05rem 0 .15rem}.actions::-webkit-scrollbar{display:none}.actions>button,.actions>.stat{flex:0 0 auto;scroll-snap-align:start}.panel{padding:.48rem;border-radius:14px}.hud{gap:.28rem;margin-bottom:.4rem}.stat{padding:.36rem .5rem;font-size:.78rem}.objective{margin:.15rem 0 .45rem;font-size:.82rem}.table-wrap{padding:.4rem;min-height:300px}.table{min-height:280px}}
@media(max-width:430px){.brand-mark{display:none}.brand h1{max-width:92px}.top-actions{gap:2px}.icon{width:40px;min-height:44px}.main-panel>.hud{position:sticky;z-index:25;top:58px;display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));overflow:visible;padding:.3rem;border:1px solid var(--line);border-radius:11px;background:#071b25f5;box-shadow:0 6px 18px #0007}.main-panel>.hud .stat{min-width:0;overflow:hidden;padding:.34rem .4rem;font-size:.72rem;white-space:nowrap}.main-panel>.hud .stat b{font-variant-numeric:tabular-nums;white-space:nowrap}.dialog{padding:.9rem;border-radius:18px}:root{--card-w:clamp(38px,12vw,52px)}}
@media(max-width:350px){.topbar{gap:2px;padding:.4rem}.brand h1{max-width:60px;font-size:.88rem}.top-actions{gap:1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}