:root{color-scheme:dark;--ink:#f6efdf;--muted:#c4c8b9;--gold:#eac680;--line:#bea47655;--card-w:124px;--card-h:186px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:"Golos Text", system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;background:radial-gradient(ellipse at 50% 10%,#263d33,#111c18 70%);min-height:100dvh}button,input,select{font:inherit}button{cursor:pointer;border:0;min-height:48px;color:inherit}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ffe0a1;outline-offset:4px}a{color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}h1,h2,h3{font-family:"Literata", Georgia,serif;font-weight:400;margin:0 0 20px}h1{font-size:64px;line-height:1.06}h2{font-size:32px}h3{font-size:24px}p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 18px}header{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1500px;padding:0 30px;margin:auto}.brand{display:flex;align-items:center;gap:12px;font:32px "Literata", Georgia,serif;text-decoration:none}.brand-mark{color:var(--gold);font-size:38px}.brand small{display:block;font:11px "Golos Text", system-ui;letter-spacing:2px;margin-top:6px;color:#bfbea9}.header-right{display:flex;gap:16px;align-items:center}.connection{font-size:14px;color:var(--muted)}.connection.off{color:#ffb090}.icon-btn{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;font-size:25px;background:#111c1880}.subtle{background:none;font-size:16px}.subtle span{color:var(--gold);margin-left:10px}.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}footer{display:flex;align-items:center;justify-content:space-between;padding:10px 30px;max-width:1440px;margin:auto;font-size:14px;color:#b9c1ad}footer button{background:none;font-size:14px}footer i{font-style:normal;margin:0 8px}main{padding:0 18px}.in-game footer{display:none}.in-game .connection{display:none}
.primary{background:linear-gradient(#edcf93,#c79b50);color:#292719;border:1px solid #f3d99f;border-radius:9px;padding:13px 24px;box-shadow:inset 0 1px 0 #fff8,0 3px 0 #796032,0 5px 15px #0004;font-size:17px;font-weight:700;transition:filter .2s,transform .2s}.primary:hover{filter:brightness(1.1)}.primary:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff8,0 1px 0 #796032}.secondary{background:linear-gradient(#35473b,#22372d);border:1px solid #a6ad8270;border-radius:8px;padding:11px 19px;font-size:16px;color:#f0ead8}.secondary:hover{background:#405840}.wide{width:100%;margin-top:24px}.panel{border:1px solid #c3a57270;border-radius:16px;background:linear-gradient(145deg,#263d31,#172820);padding:32px;box-shadow:inset 0 1px 0 #d8c8a31c,0 20px 60px #0004}.eyebrow{font-size:14px;text-transform:uppercase;letter-spacing:2.5px;color:var(--gold);margin-bottom:22px}.home{max-width:1060px;margin:auto;min-height:calc(100dvh - 145px);display:grid;grid-template-columns:1fr 400px;gap:100px;align-items:center;padding:40px 0}.welcome{position:relative}.welcome p{font-size:18px;line-height:1.65}.hero-cards{position:relative;height:250px;margin:40px 0 15px 95px}.hero-cards .card{position:absolute;width:144px;height:216px;left:0;top:15px;pointer-events:none}.hero-cards .card:nth-child(1){transform:translateX(-88px) rotate(-17deg)}.hero-cards .card:nth-child(2){transform:translateY(-8px) rotate(-2deg)}.hero-cards .card:nth-child(3){transform:translateX(88px) rotate(14deg)}.deck-caption{color:#b6bda5;font-size:12px;letter-spacing:1.2px}.segmented{display:flex;gap:5px;background:#122219;padding:5px;border-radius:9px;margin:24px 0}.segmented button{flex:1;border-radius:6px;background:none;font-size:16px;color:#b9c5b0}.segmented .active{background:#456044;color:#fff2d6;box-shadow:inset 0 1px 0 #c3d29940}.field-label{display:block;font-size:16px;margin:18px 0 10px}input,select{width:100%;height:52px;padding:0 14px;border-radius:7px;border:1px solid #afbd9970;background:#14271e;color:var(--ink);font-size:17px}.helper{font-size:15px;text-align:center;margin:20px 0 0}.nickname{margin-top:26px;border-top:1px solid var(--line);padding-top:14px}.nickname summary{cursor:pointer;font-size:15px;min-height:44px;line-height:1.5;align-content:center;color:#d3d7c4}.nickname input{margin-bottom:5px}.divider{display:flex;align-items:center;gap:15px;color:var(--muted);margin:25px 0;font-size:15px}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}.join-row{display:flex;gap:10px}.join-row input{width:0;flex:1;text-transform:uppercase;letter-spacing:2px}.loading{text-align:center;padding:25vh 0;font-size:20px}.waiting{max-width:540px;margin:auto;padding:35px 0}.waiting .panel{text-align:center}.code{font:40px "Literata", Georgia,serif;letter-spacing:7px;color:var(--gold);margin:20px 0 12px}.copy{background:none;color:var(--gold);font-size:16px;text-decoration:underline;text-underline-offset:5px}.seats{text-align:left;margin:18px 0}.seat{padding:14px 0;display:flex;gap:15px;align-items:center;border-bottom:1px solid var(--line)}.avatar{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);background:#37563d;font:25px "Literata", Georgia,serif;color:var(--gold)}.seat small{display:block;font-size:14px;color:var(--muted);margin-top:5px}.seat-empty{opacity:.55}.row{display:flex;gap:10px;justify-content:center}.leave{display:block;background:none;color:#d4d8c7;font-size:16px;margin:15px auto 0;padding:8px 14px}
.game{position:relative;isolation:isolate;max-width:1440px;margin:0 auto 16px;min-height:790px;height:calc(100dvh - 92px);max-height:1050px;display:flex;flex-direction:column;padding:12px 30px 10px;border:1px solid #9d8657;border-radius:28px;background:radial-gradient(ellipse at 50% 40%,#3f614b 0,#294735 52%,#1b3428 100%);box-shadow:inset 0 0 0 7px #362d21,inset 0 0 0 9px #aa8b4860,inset 0 0 90px #091911aa,0 16px 60px #0005}
.game-top{height:38px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;color:#dddbc2;gap:10px;font-size:15px}.table-label{letter-spacing:1px}.table-label span{letter-spacing:0;margin-left:14px;color:#bcc8b2}.game-top button{background:none;font-size:16px;padding:4px 10px;min-height:38px}.game-menu{display:none}.opponents{display:flex;justify-content:center;gap:65px;flex-shrink:0;min-height:146px;padding:5px 0 0}.opponent{text-align:center;position:relative;min-width:120px;max-width:200px}.portrait-frame{position:relative;width:91px;height:91px;margin:0 auto 9px;border:3px solid #ae9361;border-radius:50%;padding:3px;background:#302619;box-shadow:0 7px 14px #0e201c88,inset 0 0 0 1px #f9e1a775}.portrait{display:block;width:100%;height:100%;border-radius:50%;background-size:200% 200%;background-repeat:no-repeat}.hand-count{position:absolute;bottom:-2px;right:-8px;background:linear-gradient(#edf0d9,#bfc6a0);border:2px solid #725d35;color:#263324;min-width:31px;height:31px;display:grid;place-items:center;font-size:17px;font-weight:800;border-radius:50%;box-shadow:0 3px 6px #0007}.opponent .name{font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.opponent .status{font-size:14px;line-height:1.4;margin-top:3px;color:#bac5af}.opponent.active .portrait-frame{border-color:#fce3a1;box-shadow:0 0 0 3px #b88c38,0 0 24px #f1c55caa,inset 0 0 0 1px #fff9}.opponent.active .status{display:inline-block;background:#eac985;color:#302a1a;padding:2px 14px;border-radius:4px;letter-spacing:1.5px;font-weight:800;margin-top:5px}.opponent.active .name{color:#ffe6ad}.player-out{opacity:.55}.table-stats{display:flex;gap:30px;justify-content:center;align-items:center;flex-shrink:0;height:37px;color:#d4dcc8;font-size:16px}.table-stats b{color:#fff1cc;font-size:18px;margin-left:5px}.table-stats .trump-badge b{font:28px "Literata", Georgia,serif;vertical-align:-2px}.trump-badge.red b{color:#ffc0ac}.play-area{flex:1;min-height:220px;position:relative;display:flex;align-items:center;justify-content:center;padding:18px 100px 24px}.table-outline{position:absolute;inset:9px 0 10px;border:1px solid #c8ce9c28;border-radius:44%;box-shadow:inset 0 0 70px #182e201f;pointer-events:none}.table-watermark{position:absolute;inset:0;display:grid;place-items:center;color:#ccdcb31a;font:100px "Literata", Georgia,serif;pointer-events:none}.table-empty{position:relative;text-align:center;font-size:20px;line-height:1.6;color:#e1e6cd}.table-empty .ornament{display:block;font-size:35px;color:#cad6ad66;margin-bottom:10px}.deck-pile{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:120px;height:170px}.deck-pile .card{position:absolute;width:88px;height:132px}.deck-pile .trump{transform:rotate(90deg);left:20px;top:14px}.deck-pile .back{transform:rotate(-6deg);top:0;left:0;box-shadow:2px 2px 0 #b6af90,4px 4px 0 #68674d,6px 6px 14px #0009}.pile-label{display:none}.discard{position:absolute;right:15px;color:#d4dcc7;font-size:16px;text-align:center;top:50%;transform:translateY(-50%)}.discard-icon{width:58px;height:82px;border-radius:7px;border:1px solid #b8c39a77;transform:rotate(8deg);margin:0 auto 12px;box-shadow:4px 3px 0 -1px #233f31,5px 4px 0 #a3b08a44}.battles{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:25px 22px;max-width:1040px;z-index:2}.battle{position:relative;width:142px;height:204px}.battle .card{position:absolute;left:0;top:0;width:124px;height:186px;transform:rotate(-5deg)}.battle .defense{left:18px;top:20px;transform:rotate(7deg)}.battle.target{outline:3px dashed #ffe2a0;outline-offset:8px;border-radius:10px}.play-area.drop-ready{outline:2px dashed #ffe2a0;outline-offset:-5px;border-radius:24px}
.action-bar{display:flex;align-items:center;gap:15px;position:relative;flex-shrink:0;min-height:83px;max-width:880px;width:100%;margin:0 auto 8px;padding:10px 16px;background:linear-gradient(90deg,#172d23ef,#243c2df2);border:1px solid #9eb28566;border-radius:13px;box-shadow:0 5px 18px #0e221e44}.turn-avatar{width:54px;height:54px;flex-shrink:0;border-radius:50%;border:2px solid #a7b08a;box-shadow:0 2px 8px #0007}.turn-text{flex:1;min-width:0;font-size:24px;font-family:"Literata", Georgia,serif;line-height:1.15;color:#f8edce}.turn-text small{display:block;font-family:"Golos Text", system-ui,sans-serif;font-size:16px;color:#c3d1b6;line-height:1.4;margin-top:6px}.your-turn{border:2px solid #e9c078;background:linear-gradient(90deg,#655632e8,#38492ffa);box-shadow:0 0 22px #e3bd4628,inset 0 1px 0 #ffe4a645}.your-turn .turn-avatar{border-color:#ffe2a0;box-shadow:0 0 15px #edc15a66}.your-turn .turn-text{color:#ffe6ac;font-weight:700}.actions{display:flex;gap:9px;align-items:center;flex-shrink:0}.actions button{min-height:52px;font-size:18px;padding:12px 22px}.hand-area{position:relative;flex-shrink:0;max-width:1130px;width:100%;margin:0 auto;height:auto;min-height:0}.hand-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;min-height:46px}.hand-meta{display:flex;gap:12px;align-items:center;font-size:16px;color:#d5ddc7}.hand-meta strong{font-weight:600;font-size:18px;display:flex;align-items:center;gap:9px}.hand-meta .portrait{width:34px;height:34px;border:1px solid #c7b17b;flex-shrink:0}.your-turn-label{display:none}.hand-tools{display:flex;gap:8px}.hand-tools button{min-height:42px;padding:7px 14px;font-size:16px;box-shadow:inset 0 1px 0 #d8dfbb22}.hand-tools .is-active{color:#2d321e;background:#ebcb8c;border-color:#ffe4a8}.hand-viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#d6bd7d55 transparent;padding:0 0 2px;width:100%}.hand{height:222px;position:relative;width:100%;margin:0;max-width:none}.hand .card{position:absolute;left:calc(50% - var(--card-w)/2);bottom:9px;transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--r));transform-origin:50% 115%;z-index:var(--z);transition:transform .3s var(--ease),box-shadow .2s;cursor:grab;touch-action:none;user-select:none}.hand:not(.ready) .card{transition:none}.card{display:block;position:relative;width:var(--card-w);height:var(--card-h);flex-shrink:0;padding:0;min-height:0;border:1px solid #dbcaa9;border-radius:8px;overflow:hidden;background:#fffdf4;box-shadow:0 8px 14px #0a1f16b0;color:#222}.card-art{position:absolute;inset:0;background-image:url('/cards/atlas.svg');background-size:1416.666667% 427.777778%;background-position:var(--bx) var(--by);pointer-events:none}.card.back{background:#625233 url('/cards/back.jpg') center/cover}.hand .card.playable{box-shadow:0 0 0 2px #d1bb71,0 6px 16px #111e13cc}.hand .card.selected{transform:translateX(var(--x)) translateY(calc(var(--y) - 23px)) rotate(0deg);box-shadow:0 0 0 3px #ffe09a,0 0 20px #e6c66888,0 16px 20px #00150f99;z-index:90}.hand .card:focus-visible{outline:3px solid #ffe2a0;outline-offset:3px}.hand .card.drag-origin{opacity:.17;outline:2px dashed var(--gold)}.flight{position:fixed!important;z-index:500!important;pointer-events:none;transition:none!important}.drag-ghost{box-shadow:0 28px 36px #08191199;outline:2px solid #eac780}.is-dragging{cursor:grabbing;user-select:none}.hand-bottom{min-height:24px;padding:0 10px}.hand-instruction{font-size:14px;color:#c9d4bd;line-height:1.5;display:flex;justify-content:space-between;gap:12px}.keyboard-hint{color:#afc0a6;font-size:14px}.arrange-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;font-size:16px}.arrange-controls>div{display:flex;gap:8px}.move-card{min-width:48px;min-height:48px;padding:5px;font-size:25px}.hand-scroll{display:flex;justify-content:center;align-items:center;gap:24px;font-size:16px;padding:7px}.hand-scroll[hidden]{display:none}.hand-scroll button{width:62px;padding:5px;font-size:24px}.result{position:absolute;inset:0;z-index:20;background:#071b14df;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;text-align:center;border-radius:inherit}.result .panel{width:min(440px,calc(100% - 30px));padding:35px}.result .seal{font-size:55px;color:var(--gold);margin-bottom:20px}.result h2{font-size:38px}.result .primary{display:block;margin:22px auto 0}.sort-options,.table-menu{display:grid;gap:12px}.sort-options button,.table-menu button{text-align:left;font-size:17px;padding:15px}dialog{background:linear-gradient(140deg,#2c4131,#162a20);color:var(--ink);width:min(600px,calc(100% - 26px));max-height:calc(100dvh - 36px);padding:38px 30px;border:1px solid #bfa477;border-radius:15px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#08130ed9;backdrop-filter:blur(6px)}dialog .close{position:absolute;right:9px;top:9px;width:44px;height:44px;min-height:44px}dialog h2{padding-right:24px}dialog p,dialog li{font-size:17px;line-height:1.65;color:#d0dac4}dialog ol{padding-left:23px}dialog li{padding-left:5px;margin-bottom:14px}dialog a{color:#ffe1a0}.source-note{font-size:15px!important}.close{background:#17291f99}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;z-index:600;background:#f1d59d;color:#22331f;padding:14px 22px;font-size:16px;border-radius:9px;max-width:calc(100vw - 30px);box-shadow:0 10px 40px #0006;transition:.2s;pointer-events:none;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.entry{animation:entry .35s var(--ease)}@keyframes entry{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){.hand .card:hover{transform:translateX(var(--x)) translateY(calc(var(--y) - 22px)) rotate(0deg);z-index:99}}
@media(min-width:651px) and (max-height:900px){header{height:60px}.game{height:calc(100dvh - 72px);min-height:736px;padding-top:6px}.opponents{min-height:127px}.portrait-frame{width:78px;height:78px;margin-bottom:6px}.opponent .name{font-size:17px}.play-area{min-height:204px;padding-block:10px}.hand{height:211px}.action-bar{min-height:75px;padding-block:8px}.turn-text{font-size:22px}.hand-toolbar{min-height:43px}.hand-bottom{min-height:22px}}
@media(max-width:1000px) and (min-width:651px){.game{padding-inline:20px}.home{gap:40px;grid-template-columns:1fr 370px}.play-area{padding-left:45px;padding-right:45px}.deck-pile,.discard{display:none}.battles{gap:20px 15px}.opponents{gap:35px}.hand-meta .portrait{display:none}.keyboard-hint{display:none}.turn-text small{font-size:15px}}
@media(max-width:650px){
  :root{--card-w:112px;--card-h:168px}
  body{background:#182d21}header{height:66px;padding:0 16px}.brand{font-size:28px}.brand-mark{font-size:32px}.brand small{display:none}.header-right{gap:7px}.connection{display:none}.header-right .subtle{font-size:16px;padding:5px}.header-right .subtle span{display:none}.icon-btn{width:44px;height:44px;min-height:44px}.in-game header{display:none}main{padding:0}.in-game main{padding:0}footer{padding:4px 16px;font-size:14px}footer>span:last-child{display:none}.home{display:flex;flex-direction:column;gap:25px;min-height:calc(100dvh - 122px);padding:28px 20px;max-width:440px}.welcome{width:100%}.welcome .eyebrow{font-size:12px;letter-spacing:1.6px;margin-bottom:15px}.welcome h1{font-size:44px;line-height:1.06;max-width:220px;margin-bottom:17px}.welcome p{font-size:17px;max-width:260px;margin:0}.hero-cards{position:absolute;width:160px;height:210px;right:-4px;top:47px;margin:0;transform:scale(.38);transform-origin:right center;opacity:.8}.deck-caption{display:none}.home .panel{width:100%;padding:24px;border-radius:14px}.panel h2{font-size:29px}.segmented{margin-block:20px}.segmented button{font-size:17px}.wide{font-size:18px;min-height:54px}.field-label{font-size:16px}.helper{font-size:15px;line-height:1.5}.nickname{margin-top:20px;padding-top:10px}.nickname summary{font-size:16px;min-height:44px}.waiting{padding:20px 15px}.waiting .panel{padding:26px 20px}
  .game{height:100dvh;min-height:714px;max-height:none;margin:0;max-width:100%;border-radius:0;border:0;padding:7px 12px max(9px,env(safe-area-inset-bottom));box-shadow:inset 0 0 50px #0c211688;background:radial-gradient(ellipse at 50% 35%,#43644b,#294732 65%,#192e22)}
  .game-top{height:36px;font-size:15px;flex-shrink:0}.game-top .table-label{letter-spacing:.4px}.table-label span{display:none}.game-top #invite,.game-top #history,.game-top #leave-game{display:none}.game-menu{display:block!important;min-height:40px!important;font-size:17px!important;padding:4px 9px!important;color:#f3e2bc}.opponents{gap:13px;min-height:124px;padding:5px 0 1px}.opponent{min-width:0;max-width:150px;flex:1}.portrait-frame{width:76px;height:76px;border-width:2px;padding:3px;margin:0 auto 6px}.hand-count{height:28px;min-width:28px;right:-7px;bottom:-1px;font-size:16px}.opponent .name{font-size:16px;line-height:1.2;max-width:100%}.opponent .status{font-size:14px;line-height:1.25;margin-top:4px}.opponent.active .status{font-size:13px;padding:2px 10px;margin-top:4px;letter-spacing:1.2px}.table-stats{height:36px;justify-content:space-between;padding:0 7px;gap:8px;font-size:16px;border-bottom:1px solid #bfc79933}.table-stats b{font-size:17px;margin-left:3px}.table-stats .trump-badge b{font-size:27px}.deck-pile,.discard{display:none}
  .play-area{min-height:198px;padding:17px 1px 18px;align-items:center}.table-outline{inset:9px 0;border-color:#d5d8ac30;border-radius:40%}.table-watermark{font-size:75px}.table-empty{font-size:18px;line-height:1.55}.table-empty .ornament{font-size:32px;margin-bottom:8px}.battles{display:grid;grid-template-columns:repeat(2,124px);gap:22px 23px;width:100%;max-width:100%;justify-content:center}.battles[data-pairs="0"]{display:flex}.battles[data-pairs="1"]{grid-template-columns:132px}.battle{width:124px;height:184px}.battle .card{width:108px;height:162px;transform:rotate(-4deg)}.battle .defense{left:16px;top:20px;transform:rotate(6deg)}.battles[data-pairs="1"] .battle{width:132px;height:196px}.battles[data-pairs="1"] .card{width:116px;height:174px}
  .action-bar{min-height:82px;margin:0 0 5px;padding:9px 11px;gap:10px;border-radius:12px;flex-shrink:0}.turn-avatar{width:48px;height:48px}.turn-text{font-size:22px;line-height:1.08}.turn-text small{font-size:15px;line-height:1.3;margin-top:5px}.actions{gap:7px}.actions button{font-size:17px;padding:11px 15px;min-height:52px}.action-bar:has(#play-selected):has(#take),.action-bar:has(#play-selected):has(#pass){flex-wrap:wrap}.action-bar:has(#play-selected):has(#take) .turn-text,.action-bar:has(#play-selected):has(#pass) .turn-text{flex:1}.action-bar:has(#play-selected):has(#take) .actions,.action-bar:has(#play-selected):has(#pass) .actions{width:100%;display:flex;justify-content:stretch}.action-bar:has(#play-selected):has(#take) .actions button,.action-bar:has(#play-selected):has(#pass) .actions button{flex:1}.your-turn .turn-title{font-size:24px}
  .hand-area{width:calc(100% + 24px);margin-left:-12px;max-width:none}.hand-toolbar{padding:0 12px;min-height:46px;gap:6px}.hand-meta{gap:7px;font-size:15px}.hand-meta strong{font-size:16px;gap:0}.hand-meta .portrait{display:none}.hand-tools{gap:6px}.hand-tools button{min-height:42px;font-size:15px;padding:7px 10px}.hand-meta>span{display:none}.hand{height:203px}.hand-viewport{scrollbar-width:none;padding:0}.hand-viewport::-webkit-scrollbar{display:none}.hand .card{bottom:9px}.hand .card.selected{transform:translateX(var(--x)) translateY(-21px) rotate(0deg)}.hand-bottom{padding:0 12px;min-height:0}.hand-instruction{font-size:14px;text-align:center;justify-content:center;line-height:1.4;min-height:24px;padding-top:2px}.keyboard-hint{display:none}.arrange-controls{font-size:16px;gap:8px}.arrange-controls>span{max-width:135px;line-height:1.3}.arrange-controls>div{gap:6px}.arrange-controls .primary{font-size:16px;padding:10px 13px}.move-card{width:46px;min-width:46px;min-height:46px}.hand-scroll{justify-content:space-between;padding:4px 14px;font-size:15px;gap:10px}.hand-scroll button{min-height:42px;width:60px}.game:has(.hand-scroll:not([hidden])){height:auto;min-height:100dvh}.game:has(.battles[data-pairs="3"]),.game:has(.battles[data-pairs="4"]){height:auto;min-height:925px}.game:has(.battles[data-pairs="5"]),.game:has(.battles[data-pairs="6"]){height:auto;min-height:1125px}.game:has(.battles[data-pairs="3"]) .play-area,.game:has(.battles[data-pairs="4"]) .play-area{min-height:410px}.game:has(.battles[data-pairs="5"]) .play-area,.game:has(.battles[data-pairs="6"]) .play-area{min-height:615px}
  .result{position:fixed;inset:0;border-radius:0}.result .panel{padding:28px}.result h2{font-size:34px}dialog{padding:36px 23px 26px}dialog h2{font-size:29px}dialog p,dialog li{font-size:16px}.source-note{font-size:15px!important}#toast{bottom:max(22px,env(safe-area-inset-bottom));font-size:16px;width:max-content}
}
@media(max-width:360px){.game{padding-inline:9px}.hand-area{width:calc(100% + 18px);margin-left:-9px}.hand-toolbar{padding-inline:9px}.hand-tools button{padding-inline:8px;font-size:14px}.hand-meta strong{font-size:15px}.portrait-frame{width:70px;height:70px}.opponents{gap:8px}.opponent .name{font-size:15px}.turn-text{font-size:21px}.actions button{padding-inline:11px;font-size:16px}.turn-avatar{width:42px;height:42px}.table-label{font-size:14px}.table-stats{font-size:15px}.battles{gap:20px 15px}.home{padding-inline:17px}.home .panel{padding:22px}.hero-cards{right:-10px;transform:scale(.3)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.portrait{background-size:260% 260%}
.hand-instruction{font-size:16px}.hand-bottom:empty{min-height:0}.keyboard-hint{display:none}
@media(max-width:650px){
  .portrait-frame{width:84px;height:84px}.opponents{min-height:132px}.hand-instruction{font-size:16px;min-height:0}.hand-bottom:empty{display:none}
  .game:has(.battles[data-pairs="3"]),.game:has(.battles[data-pairs="4"]),.game:has(.battles[data-pairs="5"]),.game:has(.battles[data-pairs="6"]){height:100dvh;min-height:714px}
  .game:has(.battles[data-pairs="3"]) .play-area,.game:has(.battles[data-pairs="4"]) .play-area,.game:has(.battles[data-pairs="5"]) .play-area,.game:has(.battles[data-pairs="6"]) .play-area{min-height:210px;overflow-y:auto;align-items:flex-start;scrollbar-width:thin;scrollbar-color:#d8bd78 #203e2c}
}
.play-area:has(.battle:nth-child(4)){overflow-y:auto;align-items:flex-start;scrollbar-width:thin}.battles{flex-shrink:0}
@media(max-width:650px){
 .action-bar:has(#play-selected):has(#take),.action-bar:has(#play-selected):has(#pass){flex-wrap:nowrap}
 .action-bar:has(#play-selected):has(#take) .turn-avatar,.action-bar:has(#play-selected):has(#pass) .turn-avatar{display:none}
 .action-bar:has(#play-selected):has(#take) .turn-text small,.action-bar:has(#play-selected):has(#pass) .turn-text small{display:none}
 .action-bar:has(#play-selected):has(#take) .actions,.action-bar:has(#play-selected):has(#pass) .actions{width:auto}
}
@media(max-width:650px) and (max-height:740px){
 .game,.game:has(.battles[data-pairs="3"]),.game:has(.battles[data-pairs="4"]),.game:has(.battles[data-pairs="5"]),.game:has(.battles[data-pairs="6"]){min-height:650px}
 .opponents{min-height:105px;padding-block:2px}.portrait-frame{width:66px;height:66px;margin-bottom:5px}.opponent .status{margin-top:2px}
 .opponents:has(.opponent:only-child){min-height:85px;align-items:center}.opponent:only-child{display:grid;grid-template-columns:76px auto;grid-template-rows:28px 28px;column-gap:13px;align-items:center;text-align:left;max-width:270px;flex:0 1 auto}.opponent:only-child .portrait-frame{grid-row:1/3;width:74px;height:74px;margin:0}.opponent:only-child .name{font-size:18px}.opponent:only-child .status{justify-self:start}
 .table-stats{height:32px}.play-area{min-height:182px;padding-block:7px}.battles[data-pairs="1"] .card{width:110px;height:165px}.battles[data-pairs="1"] .battle{height:182px;width:126px}
 .action-bar{min-height:74px;padding:8px 10px;gap:8px}.turn-avatar{width:42px;height:42px}.turn-text,.your-turn .turn-title{font-size:21px}.turn-text small{font-size:15px;margin-top:3px;line-height:1.25}.actions button{min-height:48px;padding:9px 12px;font-size:16px}
 .hand{height:194px}.hand-toolbar{min-height:42px}.hand .card.selected{transform:translateX(var(--x)) translateY(-14px) rotate(0deg)}
}
@media(max-width:650px) and (max-height:740px){
 .game{padding-top:4px}.opponents{padding-block:0}.opponent .portrait-frame{margin-bottom:2px}.opponent .status{line-height:1}.opponent.active .status{line-height:14px;padding-block:1px;margin-top:2px}
 .hand{height:186px}.hand .card.selected{transform:translateX(var(--x)) translateY(-8px) rotate(0deg)}
}
/* Compact table and direct-play affordance. */
.hand .card.playable{border-color:#baffd9;box-shadow:0 0 0 3px #73efad,0 0 17px 4px #55e89b80,0 8px 15px #092219cc;transform:translateX(var(--x)) translateY(calc(var(--y) - 5px)) rotate(var(--r));cursor:pointer}
.hand .card:not(.playable){box-shadow:0 5px 12px #09221999}
.hand-tools button{min-height:44px}
.hand-toolbar{padding-inline:4px}
.hand-meta .portrait{display:none}
.hand-area,.action-bar{max-width:940px}
.table-watermark{display:none}
@media(min-width:651px){
 .game{max-width:1280px;height:auto;min-height:0;max-height:none;padding:8px 26px 14px}
 .opponents{min-height:110px;padding-block:4px;align-items:center;gap:46px}
 .opponent{display:grid;grid-template-columns:82px auto;grid-template-rows:30px 30px;column-gap:14px;align-items:center;text-align:left;max-width:280px;min-width:0}
 .opponent .portrait-frame{grid-row:1/3;width:78px;height:78px;margin:0}
 .opponent .status{justify-self:start;margin:0}
 .opponent.active .status{margin-top:0}
 .opponent .name{font-size:18px}
 .table-stats{height:38px;gap:32px}
 .play-area{flex:none;min-height:240px;height:clamp(240px,29vh,300px);padding:18px 110px; margin-bottom:10px}
 .table-outline{inset:2px 30px;border-radius:30px}
 .deck-pile{left:44px;height:140px}
 .battles{gap:24px 20px}
 .action-bar{min-height:78px;margin-bottom:8px}
 .hand{height:218px}
 .hand-toolbar{min-height:46px}
}
@media(hover:hover) and (pointer:fine){.hand .card.playable:hover{transform:translateX(var(--x)) translateY(calc(var(--y) - 22px)) rotate(0deg)}}
@media(max-width:1000px) and (min-width:651px){.play-area{padding-inline:20px}.opponents{gap:24px}.opponent{grid-template-columns:64px auto;column-gap:10px}.opponent .portrait-frame{width:62px;height:62px}.opponent .name{font-size:16px}}
@media(max-width:650px){
 .opponents:has(.opponent:only-child){min-height:90px;align-items:center}
 .opponent:only-child{display:grid;grid-template-columns:78px auto;grid-template-rows:30px 30px;column-gap:16px;align-items:center;text-align:left;max-width:280px;flex:0 1 auto}
 .opponent:only-child .portrait-frame{grid-row:1/3;width:76px;height:76px;margin:0}
 .opponent:only-child .name{font-size:18px}
 .opponent:only-child .status{justify-self:start}
 .hand-toolbar{padding-inline:14px;min-height:48px}
 .hand-tools button{font-size:15px;padding:8px 10px;min-height:44px}
 .hand-meta strong{font-size:16px}
 .table-outline{border-radius:22px}
 .turn-text small{font-size:15px}
 .hand{height:200px}
}
@media(max-width:650px) and (max-height:740px){.opponents:has(.opponent:only-child){min-height:82px}.hand{height:190px}.hand-toolbar{min-height:46px}}
@media(max-width:360px){.hand-toolbar{padding-inline:10px;gap:4px}.hand-tools button{font-size:14px;padding-inline:8px}.hand-meta strong{font-size:15px}}
@media(min-width:651px) and (max-height:850px){
 .in-game header{display:none}
 .game{margin-top:8px;padding-top:8px}
 .game-top{width:55%;height:38px}
 .game-top .table-label span{display:none}
 .game-top #invite{display:none}
 .opponents{position:absolute;top:13px;right:30px;min-height:74px;padding:0;gap:20px}
 .opponent{grid-template-columns:64px auto;column-gap:10px;grid-template-rows:27px 27px}
 .opponent .portrait-frame{width:62px;height:62px}
 .opponent .name{font-size:16px}
 .table-stats{width:55%;justify-content:flex-start;height:46px;gap:20px}
 .play-area{height:210px;min-height:210px;padding-block:4px;margin-bottom:8px}
 .hand{height:210px}
 .action-bar{min-height:74px}
 .game:has(.opponent:nth-child(3)) .opponents{gap:12px}
 .game:has(.opponent:nth-child(3)) .opponent{display:block;max-width:105px}
 .game:has(.opponent:nth-child(3)) .opponent .portrait-frame{display:none}
}
@media(min-width:651px) and (max-height:850px){
 .game:has(.opponent:nth-child(3)) .opponent{display:grid;grid-template-columns:48px auto;max-width:150px;column-gap:8px}
 .game:has(.opponent:nth-child(3)) .opponent .portrait-frame{display:block;width:46px;height:46px}
 .game:has(.opponent:nth-child(3)) .opponents{gap:16px}
}
@media(min-width:651px) and (max-height:850px){.game-menu{display:inline-block}.game-top #history,.game-top #leave-game{display:none}}