:root{color:#f4f0de;background:#11130e;font-family:Inter,Segoe UI,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{width:100vw;height:100vh;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(219,178,58,.14),transparent 34%),radial-gradient(circle at 80% 72%,rgba(95,165,106,.11),transparent 28%),linear-gradient(180deg,#1b1d15,#0e100c)}button{font:inherit}#root,.viewport{width:100vw;height:100vh;overflow:hidden}.viewport{position:relative}.cardGame{width:1440px;height:960px;margin-left:max(0px,calc((100vw - var(--game-width)) / 2));margin-top:0;padding:18px 34px;display:grid;grid-template-rows:66px 86px 410px 362px;gap:12px;zoom:var(--game-scale)}.gameTopbar,.opponentZone,.tableZone,.playerZone{border:1px solid rgba(255,255,255,.13);border-radius:10px;background:linear-gradient(180deg,#ffffff0b,#ffffff05),#161912c2;box-shadow:0 16px 36px #0000002e}.gameTopbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px}.brand{display:flex;align-items:center;gap:14px}.mark{width:40px;height:40px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#d9b450,#5fa56a);color:#14170f;font-size:21px;font-weight:950}h1,h2,p{margin:0}h1{font-size:23px;line-height:1}.mobileTitle{display:none}.brand p{margin-top:5px;color:#aaa78d;font-size:13px}.statusPills{display:flex;gap:10px}.statusPills span{border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:9px 12px;background:#ffffff0b;font-size:13px;white-space:nowrap}.opponentZone,.playerZone{padding:14px 22px}.opponentZone{position:relative}.zoneHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#b7b395;font-size:13px;text-transform:uppercase}.zoneHeader strong{color:#f4f0de;font-size:15px}.opponentHand{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.cardBack{width:52px;height:72px;margin-left:-10px;border:2px solid rgba(219,180,80,.72);border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,255,255,.11),transparent 18%),radial-gradient(circle at 50% 40%,rgba(217,180,80,.24),transparent 32%),linear-gradient(160deg,#263021,#11150f 60%,#2e2210);box-shadow:0 8px 18px #00000057;color:#d9b450;font-weight:950;transform:translate(calc(var(--offset) * .08)) rotate(var(--tilt))}.cardBack strong{display:grid;place-items:center;width:34px;height:22px;border-radius:999px;background:#00000038;font-size:14px;line-height:1}.opponentExtraCards{width:46px;height:34px;margin-left:8px;border:2px solid rgba(219,180,80,.68);border-radius:999px;display:grid;place-items:center;background:#0d100bbd;box-shadow:0 8px 18px #00000047;color:#f4cf66;font-size:16px;font-weight:950;line-height:1}.cardBack.compact{width:58px;height:80px;margin:0;transform:none;align-items:start;padding-top:18px}.cardBack.compact strong{width:30px;height:20px;font-size:12px}.tableZone{min-height:0;padding:18px;display:grid;grid-template-columns:190px minmax(0,1fr) 260px;gap:18px;overflow:hidden}.deckPanel,.actionPanel{border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#ffffff09;padding:18px}.deckPanel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px 18px;min-height:0;overflow:hidden}.deckStack{position:relative;display:grid;justify-items:center}.deckStack>strong{position:absolute;top:73%;left:50%;transform:translate(-50%,-50%);min-width:34px;min-height:23px;border-radius:999px;border:1px solid rgba(255,255,255,.16);padding:4px 10px;background:#0000003d;text-align:center;line-height:1;color:#f4f0de;z-index:2}.trumpCard{display:grid;justify-items:center;gap:7px;color:#b7b395;font-size:12px;text-transform:uppercase}.dealtTrump{width:94px;height:92px;border:1px solid rgba(217,180,80,.35);border-radius:10px;display:grid;place-items:center;background:#0000002e;color:#d9b450;font-size:13px;font-weight:900}.tableBoard{min-width:0;min-height:0;border:1px dashed rgba(255,255,255,.14);border-radius:12px;padding:18px;display:grid;grid-template-rows:auto 1fr;gap:18px;background:radial-gradient(circle at 50% 45%,rgba(217,180,80,.09),transparent 42%),#0d100b75}.tableHint{min-height:44px;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:11px 13px;background:#0003;color:#d8d2ae;line-height:1.35}.pairGrid{display:grid;place-items:center}.tablePair{display:grid;grid-template-columns:150px 44px 150px;align-items:center;justify-content:center;gap:10px}.pairArrow{color:#d9b450;font-size:26px;font-weight:950;text-align:center}.emptyTable,.emptySlot{border:1px dashed rgba(217,180,80,.36);border-radius:10px;display:grid;place-items:center;color:#b7b395;background:#ffffff09}.emptyTable{width:380px;height:190px}.emptySlot{width:150px;height:243px}.actionPanel{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}.actionPanel h2{font-size:18px}.actionPanel p{min-height:70px;color:#cfc9aa;font-size:14px;line-height:1.38}.actionPanel button{height:42px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#ffffff0f;color:#f4f0de;cursor:pointer;font-weight:850}.actionPanel button:disabled{opacity:.38;cursor:default}.playerZone{position:relative;display:grid;grid-template-rows:minmax(0,1fr);padding-top:10px;padding-bottom:10px;overflow:visible}.playerHand{min-height:0;display:flex;justify-content:center;align-items:center;gap:10px}.handCard{padding:0;border:0;background:transparent;cursor:pointer;position:relative;z-index:calc(var(--hand-card-index) + 1);transform:translateY(0);transition:transform .14s ease,filter .14s ease,margin-left .14s ease}.handCard.fanned{margin-left:-112px}.handCard:hover,.handCard.selected{z-index:80;transform:translateY(-10px)}.handCard.playable .playCard{outline:3px solid rgba(217,180,80,.8);outline-offset:3px}.handStackToggle{width:92px;height:130px;border:2px solid rgba(217,180,80,.7);border-radius:12px;display:grid;place-items:center;align-content:center;gap:4px;background:radial-gradient(circle at 50% 40%,rgba(217,180,80,.22),transparent 36%),linear-gradient(160deg,#263021,#11150f 60%,#2e2210);color:#f4f0de;cursor:pointer;box-shadow:0 12px 24px #00000052}.handStackToggle span{color:#d9b450;font-size:28px;font-weight:950;line-height:1}.handStackToggle small{color:#cfc9aa;font-size:11px;font-weight:850;text-transform:uppercase}.handStackToggle.open{outline:3px solid rgba(217,180,80,.78);outline-offset:3px}.handOverflowPanel{position:absolute;left:22px;right:22px;bottom:calc(100% - 8px);z-index:120;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 12px 12px;background:linear-gradient(180deg,#1f2319fa,#12150ffa),#161912;box-shadow:0 22px 48px #00000075}.handOverflowHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;color:#f4f0de}.handOverflowHeader strong{font-size:13px;text-transform:uppercase}.handOverflowHeader button{border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:6px 10px;background:#ffffff0f;color:#f4f0de;cursor:pointer;font-size:12px;font-weight:850}.handOverflowCards{max-width:100%;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:3px 4px 8px}.overflowHandCard{flex:0 0 auto;padding:0;border:0;background:transparent;cursor:pointer}.overflowHandCard.playable .playCard{outline:3px solid rgba(217,180,80,.8);outline-offset:3px}.overflowHandCard .playCard{width:132px;height:218px;padding:6px;grid-template-rows:19px 112px 16px 21px 18px;gap:4px}.overflowHandCard .playCardName,.overflowHandCard .playCardInfo span,.overflowHandCard .playCardEmotion{font-size:7px;line-height:1.05}.playCard{--card-edge: #d7a629;--card-top: #f2cf5b;--card-art-1: #ffe985;--card-art-2: #c48a24;--card-glow: rgba(229, 189, 57, .42);width:158px;height:264px;border:3px solid color-mix(in srgb,var(--card-edge) 76%,#2b1a0a);border-radius:11px;padding:7px;color:#221609;background:linear-gradient(135deg,rgba(255,255,255,.86),transparent 16%),linear-gradient(180deg,#fff0bc,color-mix(in srgb,var(--card-edge) 70%,#fff0bc) 58%,color-mix(in srgb,var(--card-edge) 55%,#35200b));box-shadow:0 12px 24px #00000047,0 0 0 1px #fff5be80 inset,0 0 18px var(--card-glow);display:grid;grid-template-rows:23px 138px 19px 24px 20px;gap:5px;overflow:hidden}.tablePair .playCard{width:148px;height:243px;padding:6px;grid-template-rows:21px 130px 18px 22px 18px;gap:4px}.playerHand .playCard{width:188px;height:309px;padding:8px;grid-template-rows:25px 164px 20px 27px 22px;gap:5px}.playerHand .playCardName,.playerHand .playCardInfo span,.playerHand .playCardEmotion{font-size:10px;line-height:1.1}.playCard.compact{width:94px;height:144px;padding:6px;border-width:2px;grid-template-rows:18px 78px 24px;gap:4px}.playCardTop{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid rgba(72,43,14,.72);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#fff4c2,var(--card-top));padding:2px 6px;font-size:8px;font-weight:950;text-transform:uppercase}.playCardTop b{width:19px;height:19px;display:grid;place-items:center;border:1px solid #5d3713;border-radius:999px;background:radial-gradient(circle,#fff6b7,color-mix(in srgb,var(--card-top) 72%,#9b5d1b) 78%);font-size:10px}.playCard.compact .playCardTop b{width:15px;height:15px;font-size:8px}.playCardArt{border:2px solid rgba(62,38,15,.86);border-radius:7px;display:grid;place-items:center;padding:8px;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.36),transparent 28%),linear-gradient(180deg,var(--card-art-1),var(--card-art-2));box-sizing:border-box}.playCardArt img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;filter:drop-shadow(0 9px 5px rgba(0,0,0,.34))}.playCardName{display:grid;place-items:center;border-bottom:1px solid rgba(75,48,20,.58);padding:1px 4px;font-size:11px;line-height:1.05;font-weight:950;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.playCard.compact .playCardName{font-size:7px;line-height:1.05;white-space:normal;text-overflow:clip}.playCardInfo{display:grid;grid-template-columns:1fr 1fr;gap:4px}.playCardInfo span,.playCardEmotion{border:1px solid rgba(76,46,15,.55);border-radius:5px;background:#fff2be8a;display:grid;place-items:center;padding:2px 5px;font-size:9px;line-height:1.05;font-weight:900;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playCardEmotion{color:#3d2a12}@media (max-width: 760px){body{height:100dvh;overflow:hidden}#root,.viewport{height:100dvh}.cardGame{--mobile-pad: 8px;--mobile-gap: 7px;--mobile-topbar-h: 52px;--mobile-opponent-h: 54px;--mobile-hand-h: 176px;--table-card-w: 122px;--table-card-h: 200px;--table-card-rows: 17px 102px 15px 20px 16px;--table-card-font: 7px;--table-slot-font: 11px;--hand-card-w: 88px;--hand-card-h: 144px;--hand-card-rows: 13px 70px 11px 14px 12px;--hand-card-font: 5.4px;--hand-zone-bottom-pad: 2px;--hand-scroll-top-pad: 14px;--hand-scroll-bottom-pad: 6px;--action-bottom: 8px;--action-h: 30px;--action-font: 10px;--hint-min-h: 36px;--hint-font: 11px;width:100vw;height:100dvh;margin:0;padding:var(--mobile-pad);display:grid;grid-template-rows:var(--mobile-topbar-h) var(--mobile-opponent-h) minmax(0,1fr) var(--mobile-hand-h);gap:var(--mobile-gap);zoom:1}.gameTopbar{min-width:0;padding:7px 9px;gap:8px;display:grid;grid-template-columns:minmax(0,1fr) auto}.brand{min-width:0;gap:8px}.mark{width:34px;height:34px;border-radius:8px;font-size:18px;flex:0 0 auto}h1{font-size:15px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktopTitle{display:none}.mobileTitle{display:inline}.brand p{display:none}.statusPills{flex:0 0 auto;gap:5px;overflow:hidden}.statusPills span{padding:6px 7px;font-size:10px}.statusPills span:first-child,.statusPills span:nth-child(4){display:none}.opponentZone{padding:8px 10px;min-height:0}.zoneHeader{margin-bottom:0;font-size:10px}.zoneHeader strong{font-size:12px}.opponentHand{justify-content:center;padding-top:0}.cardBack{width:34px;height:48px;margin-left:-7px;border-radius:7px}.cardBack strong{width:24px;height:17px;font-size:10px}.opponentExtraCards{width:34px;height:24px;margin-left:5px;border-width:1px;font-size:11px}.tableZone{position:relative;padding:6px;min-height:0;display:block;overflow:hidden}.deckPanel{display:none}.deckStack>strong{position:static;transform:none;min-width:28px;min-height:20px;padding:3px 8px;font-size:11px;background:#00000094}.cardBack.compact{display:none}.cardBack.compact strong{width:24px;height:17px;font-size:10px}.trumpCard{gap:4px;font-size:8px;line-height:1.1;text-align:center;padding:3px 6px;border:1px solid rgba(217,180,80,.26);border-radius:999px;background:#00000085;color:#d8d2ae}.trumpCard .playCard.compact{display:none}.dealtTrump{width:58px;height:54px;font-size:10px}.tableBoard{width:100%;height:100%;padding:8px;gap:8px;border-radius:10px;grid-template-rows:auto minmax(0,1fr)}.tableHint{min-height:var(--hint-min-h);margin-left:0;padding:8px 9px;font-size:var(--hint-font);text-align:center}.pairGrid{min-height:0;overflow:hidden;align-items:start;padding-top:0}.tablePair{grid-template-columns:var(--table-card-w) 24px var(--table-card-w);gap:6px}.pairArrow{font-size:18px}.tablePair .playCard{width:var(--table-card-w);height:var(--table-card-h);padding:5px;border-width:2px;border-radius:8px;grid-template-rows:var(--table-card-rows);gap:3px}.tablePair .playCardName,.tablePair .playCardInfo span,.tablePair .playCardEmotion{font-size:var(--table-card-font);line-height:1}.emptyTable{width:100%;max-width:270px;height:178px;font-size:12px}.emptySlot{width:var(--table-card-w);height:var(--table-card-h);font-size:var(--table-slot-font)}.actionPanel{position:absolute;left:12px;right:12px;bottom:var(--action-bottom);z-index:25;padding:5px;border-radius:9px;background:#0d100bb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;grid-template-columns:minmax(0,1fr) 52px 52px 78px;grid-template-rows:var(--action-h);gap:5px}.actionPanel h2{display:none}.actionPanel p{grid-column:1;grid-row:1;min-height:0;align-self:center;font-size:9px;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.actionPanel button{height:var(--action-h);border-radius:7px;font-size:var(--action-font);padding:0 5px}.actionPanel button:nth-of-type(1){grid-column:2;grid-row:1}.actionPanel button:nth-of-type(2){grid-column:3;grid-row:1}.actionPanel button:nth-of-type(3){grid-column:4;grid-row:1}.playerZone{padding:8px 0 var(--hand-zone-bottom-pad);overflow:hidden;border-radius:10px}.playerHand{justify-content:flex-start;align-items:flex-end;gap:10px;overflow-x:auto;overflow-y:hidden;padding:var(--hand-scroll-top-pad) 14px var(--hand-scroll-bottom-pad);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}.playerHand::-webkit-scrollbar,.handOverflowCards::-webkit-scrollbar{display:none}.handCard,.handCard.fanned{flex:0 0 auto;margin-left:0;scroll-snap-align:center}.handCard:hover,.handCard.selected{transform:translateY(-5px)}.playerHand .playCard{width:var(--hand-card-w);height:var(--hand-card-h);padding:5px;border-width:2px;border-radius:9px;grid-template-rows:var(--hand-card-rows);gap:3px}.playerHand .playCardName,.playerHand .playCardInfo span,.playerHand .playCardEmotion{font-size:var(--hand-card-font);line-height:1}.playCardTop{padding:2px 5px;font-size:7px}.playCardTop b{width:16px;height:16px;font-size:8px}.playCardArt{padding:6px;border-width:2px}.handStackToggle{flex:0 0 auto;width:64px;height:92px;scroll-snap-align:center}.handStackToggle span{font-size:21px}.handOverflowPanel{left:8px;right:8px;bottom:calc(100% + 8px);max-height:218px;padding:8px}.handOverflowCards{gap:8px}.overflowHandCard .playCard{width:116px;height:190px;grid-template-rows:17px 96px 14px 19px 16px}}@media (max-width: 760px) and (max-height: 720px){.cardGame{--mobile-pad: 6px;--mobile-gap: 5px;--mobile-topbar-h: 46px;--mobile-opponent-h: 48px;--mobile-hand-h: 156px;--table-card-w: 108px;--table-card-h: 178px;--table-card-rows: 16px 88px 14px 18px 15px;--table-card-font: 6.4px;--table-slot-font: 10px;--hand-card-w: 80px;--hand-card-h: 132px;--hand-card-rows: 12px 63px 10px 13px 11px;--hand-card-font: 5px;--hand-zone-bottom-pad: 1px;--hand-scroll-top-pad: 10px;--hand-scroll-bottom-pad: 4px;--action-bottom: 6px;--action-h: 28px;--action-font: 9px;--hint-min-h: 32px;--hint-font: 10px}.gameTopbar{padding:6px 8px}.mark{width:30px;height:30px;font-size:16px}h1{font-size:14px}.statusPills span{padding:5px 6px;font-size:9px}.cardBack{width:31px;height:44px;margin-left:-8px}.cardBack strong{width:22px;height:16px;font-size:9px}.opponentExtraCards{width:31px;height:22px;font-size:10px}.tableBoard{padding:6px;gap:6px}.actionPanel{left:8px;right:8px;padding:4px;grid-template-columns:minmax(0,1fr) 48px 48px 72px;gap:4px}.actionPanel p{font-size:8px}.playerHand{gap:8px;padding-left:12px;padding-right:12px}}@media (max-width: 760px) and (min-height: 880px){.cardGame{--mobile-topbar-h: 56px;--mobile-opponent-h: 58px;--mobile-hand-h: 188px;--table-card-w: 128px;--table-card-h: 210px;--table-card-rows: 18px 108px 16px 21px 17px;--table-card-font: 7px;--hand-card-w: 92px;--hand-card-h: 150px;--hand-card-rows: 14px 73px 11px 15px 13px;--hand-card-font: 5.6px;--hand-zone-bottom-pad: 4px;--hand-scroll-top-pad: 16px;--hand-scroll-bottom-pad: 6px}}