/* The tavern skin sits on top of the shared responsive layout. */
:root { --bg:#211a16; --panel:#30251d; --gold:#e0b665; --gold-dark:#af8141; --text:#f6ead5; --muted:#b4a18a; --line:#d8b77c25; --green:#b3c28b; }
body { background:#211a16; background-image:radial-gradient(ellipse at 20% 5%,#8c573b35,transparent 55%),radial-gradient(ellipse at 88% 65%,#70452823,transparent 60%),repeating-linear-gradient(93deg,#ffffff01 0 1px,transparent 1px 6px); }
.app-shell { max-width:1360px; }.app-header { height:82px; border-bottom-color:#e5b45a1c; }.brand-symbol i:nth-child(2) { background:#73553a; }.brand-symbol i:nth-child(3) { color:#3d3425; }.brand small { color:#a48d70; letter-spacing:1.7px; font-size:8px; }
.connection { color:#b7a387; }.connection.online i { background:#b6c28a; }.icon-button { border-color:#be965132; background:#d1a25207; }.icon-button:hover { background:#c8a56d12; }
.lobby-screen { grid-template-columns:minmax(0,1fr) 450px; column-gap:70px; padding-top:32px; min-height:calc(100dvh - 82px); }.lobby-intro { position:relative; }.eyebrow { color:#c7a471; }h1 { font-family:"STKaiti","KaiTi","Microsoft YaHei",sans-serif; font-size:68px; font-weight:700; line-height:1.25; letter-spacing:4px; text-shadow:0 5px 20px #0e0904aa; margin-top:25px; }.intro-copy { color:#bba98e; font-size:14px; line-height:2; }
.hero-cards { display:none; }.tavern-cast { position:relative; height:250px; width:410px; max-width:100%; margin:18px 0 14px; perspective:900px; }.tavern-cast:before { content:""; position:absolute; left:-6%; right:-6%; bottom:26px; height:66px; border-radius:50%; background:#09060488; filter:blur(15px); }.cast-portrait { position:absolute; width:148px; height:187px; border-radius:70px 70px 10px 10px; border:4px solid #4d3926; box-shadow:0 0 0 1px #c89f5b77,0 14px 26px #08050388; top:24px; left:126px; background-size:300% 200%; background-repeat:no-repeat; }
.cast-portrait:first-child { left:15px; transform:rotate(-12deg); top:42px; }.cast-portrait:nth-child(2) { z-index:2; }.cast-portrait:nth-child(3) { left:236px; top:42px; transform:rotate(12deg); }.tavern-cast i { position:absolute; bottom:3px; left:0; right:0; text-align:center; font-style:normal; color:#8d7250; font-size:8px; letter-spacing:3px; }
:is(.avatar,.my-portrait,.character-image,.cast-portrait)[class*="animal-"] { background-image:url('/assets/tavern-animals.webp'); background-size:300% 200%; background-repeat:no-repeat; }
.animal-fox { background-position:0% 0%; }.animal-panda { background-position:50% 0%; }.animal-wolf { background-position:100% 0%; }.animal-cat { background-position:0% 100%; }.animal-raccoon { background-position:50% 100%; }.animal-stag { background-position:100% 100%; }
.lobby-features { color:#baa78c; font-size:11px; }.lobby-features i { background:#c3a165; }.lobby-features span+span:before { background:#806b4f; }
.entry-panel { background:linear-gradient(140deg,#3e3028f0,#271e19fa); border:1px solid #c69b5d42; box-shadow:0 30px 70px #0d080661,inset 0 1px #e9b76e14; border-radius:18px; padding:28px; }.entry-topline .eyebrow { color:#a88c63; }.entry-panel h2 { font-family:"STKaiti","KaiTi","Microsoft YaHei",sans-serif; font-size:29px; color:#f5e6c6; margin:18px 0 9px; }.entry-caption { color:#a79074; margin-bottom:20px; }.seat-count { color:#b79c75; border-color:#c6a26233; }.mode-tabs { background:#1d1714; margin-bottom:17px; }.mode-tabs button { color:#a9947b; }.mode-tabs button[aria-selected="true"] { background:#5b4531; color:#f4dfba; }
label { color:#cfbaa0; margin-top:16px; }label span { color:#92785a; }input,select { background:#211a16; border-color:#aa875535; color:#eddfca; }input::placeholder { color:#8f7a61; }input:focus,select:focus { border-color:#c99c55; }
.avatar-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }.character-choice { border:1px solid transparent; border-radius:9px; padding:5px 3px 4px; background:transparent; min-height:69px; display:flex; align-items:center; flex-direction:column; gap:5px; color:#a58d6d; font-size:9px; }.character-choice.chosen { border-color:#d1a55d; background:#bf93521c; color:#f1d494; box-shadow:inset 0 0 15px #c7964520; }.character-image { display:block; width:43px; height:43px; border-radius:50%; border:1px solid #b5925c99; box-shadow:0 3px 7px #0a070599; }.game-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.game-picker button { padding:11px 4px; min-height:65px; border:1px solid #84674650; border-radius:8px; background:#251c17; color:#ad9372; text-align:center; }.game-picker button[aria-pressed="true"] { border-color:#caa262; color:#efd69e; background:linear-gradient(#60483277,#382b2077); box-shadow:inset 0 0 18px #dba34a0b; }.game-picker b { display:block; font-size:14px; font-weight:550; }.game-picker small { display:block; font-size:8px; margin-top:5px; color:#a68d6c; white-space:nowrap; }.three-settings { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.three-settings select { font-size:12px; padding:0 8px; }.three-settings label { font-size:10px; }.entry-note { color:#9e8868; border-top-color:#a8855733; }.entry-submit { background:linear-gradient(#e8c888,#cfa45a) !important; box-shadow:0 4px 0 #755329,0 8px 18px #0b070633; border:1px solid #ffe2a1 !important; color:#37271a !important; }.lobby-footer { color:#8b7455; }.text-button { color:#b09a79; }
.in-room .app-header { height:67px; }.room-screen { padding-top:15px; }.room-number { font-family:Georgia,serif; color:#e3c085; font-size:24px; }.room-label { color:#b9a382; }.small-button { border-color:#be97573b; background:#30231990; color:#d4ba8e; }.game-layout { grid-template-columns:minmax(0,1fr) 335px; gap:18px; }.arena { min-height:565px; background:radial-gradient(ellipse at 50% 50%,#63462d20,transparent 80%),repeating-linear-gradient(1deg,#251b14 0 3px,#2b2018 3px 5px,#271d16 5px 21px); border:1px solid #99714570; border-radius:25px; box-shadow:inset 0 0 55px #0a0706aa,0 22px 50px #08050344; }
.arena:before { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; border-radius:inherit; box-shadow:inset 0 0 0 5px #c2934b10; background:radial-gradient(ellipse at 50% 35%,#eecb7021,transparent 65%); }
.arena-meta { color:#a68e67; font-size:10px; z-index:5; }.arena-meta b { color:#edc47a; }
.table-oval { inset:65px 30px 50px; border-radius:46%; border:13px solid #503824; background:radial-gradient(ellipse at 50% 34%,#48745a,#2a573f 56%,#1d3c2b); box-shadow:0 0 0 2px #ba955763,0 0 0 5px #231a11,inset 0 0 0 2px #c2a76f37,inset 0 0 30px 8px #0c1d1499,0 14px 27px #0c080688; }
.table-oval:before { content:""; position:absolute; inset:3px; border-radius:inherit; background:repeating-linear-gradient(0deg,transparent 0 2px,#e8ffcd04 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,#05190e0a 2px 3px); }
.table-oval:after { inset:13px; border-color:#c4ba7d44; border-style:dashed; }.table-center { top:49%; width:190px; z-index:2; }.table-wordmark { color:#d8ca9d5e; font-family:"KaiTi","Microsoft YaHei",sans-serif; font-size:23px; letter-spacing:7px; margin-bottom:16px; }.table-wordmark small { display:block; font:6px/2 "Segoe UI",sans-serif; letter-spacing:2px; margin-top:9px; }.pot-label { color:#b8c3a0; font-size:10px; }.pot-value { font-family:Georgia,serif; color:#f7d795; font-size:45px; text-shadow:0 3px 4px #10241799; }.pot-value small { color:#b7bd94; }.bet-tag { color:#bbc5a0; font-size:10px; margin-top:3px; }.waiting-copy { color:#e3d5af; font-size:15px; }.waiting-copy small { color:#b3b88d; font-size:9px; margin-top:8px; }.niu-stage-title { font-family:"KaiTi","Microsoft YaHei",sans-serif; font-size:27px; color:#e6ce96; margin:12px 0; }
.table-chips { height:34px; display:flex; justify-content:center; margin-top:6px; }.table-chips i { display:grid; place-items:center; width:31px; height:31px; border:3px dashed #e9d89b; border-radius:50%; background:#876638; color:#eedcab; font:11px Georgia,serif; box-shadow:0 3px #47341d,0 6px 7px #0c1d1566; transform:rotate(-15deg); }.table-chips i:nth-child(2) { background:#782f2d; border-color:#cea39b; transform:translateY(4px) rotate(18deg); margin-left:-5px; }.table-chips i:nth-child(3) { background:#294955; border-color:#9bb7b9; transform:rotate(30deg); margin-left:-5px; }
.seat { width:108px; }.seat-0 { top:18%; }.seat-1,.seat-4 { top:37%; }.seat-2,.seat-3 { top:73%; }.avatar { width:58px; height:58px; border-radius:50%; border:3px solid #b18a50; outline:2px solid #342417; box-shadow:0 5px 10px #0d090688,inset 0 0 0 1px #f7d99788; }.seat.current .avatar { outline:2px solid #f3ce84; outline-offset:4px; box-shadow:0 0 0 7px #f1c47614,0 5px 12px #080503bb; }.seat.inactive { opacity:.65; }.seat.inactive .avatar { filter:saturate(.55); }.seat-name { background:linear-gradient(#4e3b29,#302317); border:1px solid #8e6f435c; border-radius:4px; font-size:11px; color:#f0d9ae; padding:3px 4px; margin:5px auto 3px; max-width:104px; box-shadow:0 3px 4px #0a090444; }.host-crown { font-size:8px; color:#e5bf76; }.seat-balance { color:#dcc596; }.seat-status { color:#baa787; font-size:9px; }.seat.current .seat-status { color:#f4d288; }.mini-card { border-color:#bba16888; background:repeating-linear-gradient(45deg,#173039 0 2px,#38515a 2px 3px); box-shadow:0 2px 2px #0d140f77; }.empty-seat .avatar { border:1px dashed #b59b6777; background:#32251c88; outline:none; box-shadow:inset 0 0 18px #100c0788; color:#b19360; }.empty-seat .seat-name { background:none; border:0; box-shadow:none; color:#9d835d; font-size:10px; }.bot-mark { display:inline-block; font:7px/1.3 "Segoe UI",sans-serif; color:#1c2521; background:#b9b57d; padding:1px 3px; border-radius:2px; margin-left:4px; }.banker-badge { position:absolute; right:-8px; bottom:-3px; background:#8d3625; border:1px solid #dfb86d; font:11px/21px "Microsoft YaHei",sans-serif; width:22px; height:22px; border-radius:50%; color:#efd89e; }
.arena-status { color:#c6c3a1; font-size:11px; bottom:17px; }.your-panel { background:linear-gradient(160deg,#382a1f,#292019); border:1px solid #b08a5252; border-radius:18px; box-shadow:inset 0 1px #f0d8a011,0 12px 30px #0e080555; padding:20px; }.my-id { display:flex; align-items:center; gap:10px; min-width:0; }.my-portrait { display:block; width:44px; height:44px; min-width:44px; border-radius:50%; border:2px solid #b18b50; box-shadow:0 3px 6px #07050388; }.my-id strong { font-size:14px; color:#e8d7b5; }.my-id .room-label { display:block; font-size:9px; font-weight:400; margin-top:5px; }.your-balance { font-family:Georgia,serif; font-size:21px; color:#e3be7e; }.your-balance small { display:block; font:8px/1.8 "Segoe UI",sans-serif; text-align:right; color:#9a8362; }.hand-caption { color:#af9879; padding-top:19px; font-size:10px; }.hand-caption b { color:#ddbe80; }
.your-hand { position:relative; perspective:950px; min-height:185px; padding:24px 0 14px; gap:0; align-items:center; overflow:visible; }.physical-card { flex-shrink:0; width:80px; height:117px; padding:0; background:transparent; border:0; border-radius:8px; box-shadow:none; animation:none; transform:translateY(calc(0px - var(--lift,0px))) rotate(var(--fan,0deg)); transform-style:preserve-3d; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; color:#243c31; outline-offset:5px; opacity:1; transition:filter .16s; }.physical-card:first-child { --fan:-8deg; margin-right:-8px; top:6px; }.physical-card:nth-child(2) { z-index:2; top:-3px; }.physical-card:nth-child(3) { --fan:8deg; margin-left:-8px; top:6px; z-index:3; }.physical-card:active { cursor:grabbing; transform:translateY(calc(-3px - var(--lift,0px))) rotate(var(--fan,0deg)) !important; }.physical-card.red { color:#ab3932; }.physical-card:hover { filter:brightness(1.04); }
.physical-card > span.card-front,.physical-card > span.card-back-sheet { display:block; position:absolute; inset:0; border-radius:7px; overflow:hidden; }.physical-card .card-front { background:linear-gradient(115deg,#fff8e8,#e7decd); border:1px solid #f9f0d7; box-shadow:inset -3px 0 7px #97896b22,0 4px 1px #9a8c6c,0 9px 13px #0c08068f; padding:8px 9px; text-align:left; }.physical-card .card-front > b { font:28px/1 Georgia,serif; }.physical-card .card-front > span { font-size:21px; line-height:1.1; }.physical-card .card-front > em { font-size:39px; bottom:20px; right:14px; }.physical-card .card-bottom { position:absolute; right:7px; bottom:6px; transform:rotate(180deg); display:block; text-align:left; }.physical-card .card-bottom b { font:16px/1 Georgia,serif; }.physical-card .card-bottom span { font-size:12px; }
.physical-card .card-back-sheet { border:3px solid #e4d7b9; background:linear-gradient(135deg,#263c46,#142832); transform-origin:left center; transform:perspective(700px) rotateY(var(--flip,0deg)); backface-visibility:hidden; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--peel,0%)),calc(100% - var(--peel,0%)) 100%,0 100%); box-shadow:inset 0 0 10px #050d1388,3px 2px 8px #07090944; }
.card-back-pattern { position:absolute; inset:4px; border:1px solid #d0b56c8c; border-radius:3px; background:repeating-linear-gradient(45deg,transparent 0 5px,#cfb16d24 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,#cfb16d14 5px 6px); }.physical-card .card-seal { position:absolute; display:grid; place-items:center; width:39px; height:48px; border:1px solid #c0a2639c; border-radius:50%; top:26px; left:16px; font-size:27px; color:#d3b97a; background:#1b303b; box-shadow:0 0 0 3px #172c3488,0 0 0 4px #c0a26340; }.physical-card .back-caption { position:absolute; bottom:15px; left:0; right:0; text-align:center; font-size:6px; color:#c8b47c; letter-spacing:2px; }.card-curl { display:block; position:absolute; right:0; bottom:0; width:var(--peel,0%); height:var(--peel,0%); opacity:var(--curl-opacity,0); border-radius:0 0 3px 0; clip-path:polygon(0 0,100% 0,0 100%); background:linear-gradient(135deg,#fff8e6 3%,#efe4cd 42%,#ae9d7b 68%,#594c35 73%,#faf0d8 78%); box-shadow:-4px -5px 12px #09080699; z-index:4; transform:translate(-1px,-1px); pointer-events:none; }.peel-grip { position:absolute; right:6px; bottom:7px; width:12px; height:12px; border-right:1px solid #dfc68bb3; border-bottom:1px solid #dfc68bb3; opacity:.7; z-index:5; pointer-events:none; }.fully-open .peel-grip { display:none; }
.five-cards .physical-card { width:60px; height:90px; margin:0 0 0 -11px; top:0; --fan:0deg; }.five-cards .physical-card:first-child { margin-left:0; --fan:-9deg; top:5px; }.five-cards .physical-card:nth-child(2) { --fan:-4deg; top:0; }.five-cards .physical-card:nth-child(3) { --fan:0deg; top:-3px; }.five-cards .physical-card:nth-child(4) { --fan:4deg; top:0; z-index:4; }.five-cards .physical-card:nth-child(5) { --fan:9deg; top:5px; z-index:5; }.five-cards .card-front { padding:6px; }.five-cards .card-front > b { font-size:22px; }.five-cards .card-front > span { font-size:15px; }.five-cards .card-front > em { font-size:30px; right:10px; bottom:18px; }.five-cards .card-bottom { right:4px; bottom:4px; }.five-cards .card-bottom b { font-size:12px; }.five-cards .card-bottom span { font-size:9px; }.five-cards .card-seal { width:28px; height:35px; top:19px; left:10px; font-size:20px; }.five-cards .back-caption { font-size:4px; letter-spacing:1px; bottom:10px; }
.peel-hint { color:#b39b73; font-size:9px; text-align:center; line-height:1.8; min-height:17px; margin:-5px 0 14px; }.hand-empty { font-family:"KaiTi","Microsoft YaHei",sans-serif; font-size:17px; color:#c8af81; padding:13px 0; }.hand-empty .empty-spade { display:block; font-size:45px; color:#9a794a66; margin-bottom:14px; }.hand-empty small { display:block; font-family:"Microsoft YaHei",sans-serif; font-size:9px; color:#927c5b; margin-top:9px; }.action-status { color:#bca483; font-size:11px; }.action-status.active { color:#f3d59a; }.button { background:linear-gradient(#65503b,#443222); border-color:#a27e4761; color:#e8d5b0; box-shadow:inset 0 1px #e6c89814,0 3px 0 #1a120d; }.button:hover { background:linear-gradient(#745b40,#533d29); }.button.gold { background:linear-gradient(#efd194,#c9a15b); border-color:#f7d99b; color:#37291c; box-shadow:0 3px 0 #76552b,inset 0 1px #fff2c9; }.button.gold:hover { background:linear-gradient(#f7dba5,#d6b16b); }.actions-grid .fold { background:#1f181247; border-color:#785b383f; color:#b09a7a; }.actions-grid { gap:9px; }.actions-grid button:disabled { opacity:.43; }.bot-invite-button { min-height:44px; width:100%; display:flex; gap:6px; justify-content:center; align-items:center; margin-top:13px; font-size:10px; color:#c1ac82; background:#dfb76c0a; border:1px dashed #c3a0644f; border-radius:7px; }.bot-invite-button span { font-size:8px; color:#d1c18b; padding:2px 4px; border:1px solid #ae985d55; border-radius:3px; }.panel-footnote { color:#937c58; font-size:9px; }.activity { border-color:#b3986329; color:#b39e7b; }.activity-label { color:#846c4a; }.room-footnote { color:#8d7450; font-size:9px; }
.sheet { background:linear-gradient(135deg,#3b2d22,#261d17); border-color:#bd955f55; max-width:calc(100vw - 24px); width:620px; color:#ebd9b6; }.sheet::backdrop { background:#0c0806c7; backdrop-filter:blur(5px); }.sheet-header { border-color:#c4a36929; }.sheet-header h2 { font-family:"KaiTi","Microsoft YaHei",sans-serif; font-size:23px; }.sheet-body p { color:#bca78a; }.sheet-options .button { box-shadow:none; }.rules-list li { color:#c2ae8f; border-color:#b190582e; }.rules-list li b { color:#ead5ac; }.stat-table th { color:#a18660; }.stat-table td,.history-item { border-color:#b1905833; }.positive { color:#e9c681; }.negative { color:#c9917c; }.history-item { color:#ad9574; }.history-title { color:#d0b88d; }.result-callout { border-color:#c8a26444; background:#dfb56d0c; }.toast { background:#f0dfbb; color:#41301c; border:1px solid #d7b87f; }
.invite-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:23px; align-items:center; }.qr-paper { padding:15px 13px 13px; background:#fff; border-radius:11px; text-align:center; color:#34261b; box-shadow:0 8px 20px #0e080577; }.qr-paper img { display:block; width:100%; height:auto; image-rendering:pixelated; }.qr-label { font-size:10px; color:#776448; }.qr-room { font-size:10px; color:#746247; }.qr-room b { font-family:Georgia,serif; font-size:22px; letter-spacing:3px; color:#443220; display:block; margin-top:3px; }.invite-copy h3 { font-family:"KaiTi","Microsoft YaHei",sans-serif; font-size:24px; line-height:1.5; color:#f0d7a7; margin:0 0 12px; }.invite-copy p { font-size:10px; }.invite-copy .network-note { font-size:9px; color:#9f8863; }.invite-copy label { font-size:9px; }.invite-copy input { font-size:10px; padding:0 8px; height:42px; }.invite-copy .dialog-actions { gap:6px; }.invite-copy .button { padding:8px; font-size:10px; }.qr-loading { padding:65px 0; text-align:center; color:#c6aa79; font-size:13px; }.qr-loading span { display:block; margin:0 auto 18px; border:2px solid #b99a5e33; border-top-color:#dbbb7b; border-radius:50%; width:27px; height:27px; animation:spin .8s linear infinite; }
.deal-scene { position:absolute; inset:0; pointer-events:none; z-index:8; display:grid; place-items:center; }.deal-scene > span { position:absolute; top:calc(50% + 42px); font-size:10px; letter-spacing:2px; color:#e9d5a2; animation:shuffle-label 2.2s both; animation-delay:var(--deal-elapsed,0ms); }.shuffle-deck { position:absolute; top:calc(50% - 38px); left:calc(50% - 24px); width:48px; height:67px; animation:shuffle-hide 2.2s both; animation-delay:var(--deal-elapsed,0ms); }.shuffle-deck i { position:absolute; inset:0; border:2px solid #e0c995; background:repeating-linear-gradient(45deg,#17333b 0 4px,#54635a 4px 5px); border-radius:5px; box-shadow:0 4px 6px #09140b88; animation:shuffle 1s both; animation-delay:calc(var(--deal-elapsed,0ms) + var(--offset,0ms)); }.shuffle-deck i:nth-child(2) { --offset:90ms; transform:rotate(5deg); }.shuffle-deck i:nth-child(3) { --offset:180ms; }.shuffle-deck i:nth-child(4) { --offset:270ms; }.dealt-card { position:absolute; top:50%; left:50%; width:25px; height:36px; margin:-18px 0 0 -12px; border:1px solid #e4d2a2; background:repeating-linear-gradient(45deg,#17333b 0 3px,#54635a 3px 4px); border-radius:3px; animation:deal-across 1s both; animation-delay:calc(850ms + var(--deal-elapsed,0ms) + var(--deal-offset,0ms)); opacity:0; }.dealt-0 { --dx:0px;--dy:-150px;--deal-offset:0ms; }.dealt-1 { --dx:180px;--dy:-60px;--deal-offset:90ms; }.dealt-2 { --dx:160px;--dy:110px;--deal-offset:180ms; }.dealt-3 { --dx:-160px;--dy:110px;--deal-offset:270ms; }.dealt-4 { --dx:-180px;--dy:-60px;--deal-offset:360ms; }.dealt-5 { --dx:0px;--dy:170px;--deal-offset:450ms; }.dealing .your-hand .physical-card { animation:deal-into-hand 2s both; animation-delay:calc(var(--deal-elapsed,0ms) + var(--card-i,0)*60ms); }
@keyframes spin { to { transform:rotate(360deg); } }@keyframes shuffle { 0%{transform:translateX(0) rotate(-5deg)}20%{transform:translateX(-32px) rotate(-15deg)}40%{transform:translateX(26px) rotate(12deg)}60%{transform:translateX(-24px) rotate(-11deg)}80%{transform:translateX(18px) rotate(8deg)}100%{transform:translateX(0) rotate(0)} }@keyframes shuffle-hide { 0%,45%{opacity:1}65%,100%{opacity:0} }@keyframes shuffle-label { 0%,45%{opacity:1}60%,100%{opacity:0} }@keyframes deal-across { 0%{opacity:0;transform:translate(0,0) rotate(0) scale(.7)}10%,60%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(22deg) scale(.65)} }@keyframes deal-into-hand { 0%,54%{opacity:0;transform:translateY(-100px) rotate(-22deg) scale(.55)}82%,100%{opacity:1;transform:translateY(calc(0px - var(--lift,0px))) rotate(var(--fan,0deg)) scale(1)} }
@media(min-width:1100px) { .lobby-screen { padding-left:25px; padding-right:25px; } }
@media(max-width:1000px) { .lobby-screen { grid-template-columns:minmax(0,1fr) 390px; gap:25px; }.tavern-cast { transform:scale(.8); transform-origin:left center; width:390px; }.game-layout { grid-template-columns:minmax(0,1fr) 290px; gap:12px; }.your-panel { padding:16px; }.physical-card { width:72px; height:106px; }.physical-card .card-seal { left:13px; top:24px; width:34px; height:43px; }.five-cards .physical-card { width:55px; height:83px; }.five-cards .card-seal { left:8px; top:16px; width:27px; height:34px; }.arena { min-height:525px; } }
@media(max-width:650px) and (orientation:portrait),(max-width:550px) {
  .app-header { height:73px; }.brand { font-size:19px; }.brand small { font-size:6px; letter-spacing:1px; }.lobby-screen { display:flex; gap:0; padding-top:24px; }.lobby-intro { padding-bottom:27px; }h1 { font-size:43px; line-height:1.2; margin:19px 0 12px; letter-spacing:2px; }.intro-copy { font-size:11px; }.tavern-cast { position:absolute; right:0; top:52px; width:160px; height:155px; transform:none; margin:0; }.cast-portrait { width:68px; height:92px; border-width:2px; left:44px; top:14px; }.cast-portrait:first-child { left:1px; top:27px; }.cast-portrait:nth-child(3) { left:88px; top:27px; }.tavern-cast i { font-size:4px; letter-spacing:1px; bottom:10px; }.lobby-features { padding-top:26px; font-size:10px; }.entry-panel { padding:23px; border-radius:15px; }.entry-panel h2 { font-size:26px; }.entry-caption { font-size:11px; }.entry-topline { font-size:9px; }.game-picker b { font-size:12px; }.game-picker small { font-size:7px; }.character-image { width:40px; height:40px; }.character-choice { min-height:65px; font-size:8px; }.lobby-footer { font-size:8px; padding-bottom:max(20px,env(safe-area-inset-bottom)); }.lobby-footer .text-button { font-size:9px; }
  .in-room .app-header { height:60px; }.room-screen { padding-top:10px; }.room-bar { margin-bottom:9px; }.room-number { font-size:22px; }.room-actions { gap:6px; }.room-actions .small-button { font-size:10px; padding:7px 10px; }.game-layout { display:flex; gap:11px; }.arena,.in-room .arena { min-height:clamp(310px,43dvh,405px); border-radius:20px; }.table-oval { inset:47px 16px 37px; border-width:9px; }.table-oval:after { inset:9px; }.arena-meta { top:14px; left:14px; right:14px; font-size:8px; }.table-center { top:49%; width:143px; }.table-wordmark { font-size:19px; letter-spacing:4px; }.table-wordmark small { font-size:4px; letter-spacing:1px; }.waiting-copy { font-size:13px; }.waiting-copy small { font-size:8px; max-width:130px; margin:auto; }.table-chips { height:24px; margin-top:6px; }.table-chips i { width:24px; height:24px; border-width:2px; font-size:8px; }.pot-value { font-size:32px; }.pot-label { font-size:8px; }.bet-tag { font-size:8px; }.niu-stage-title { font-size:21px; margin:9px 0; }.seat { width:83px; }.avatar { width:43px; height:43px; border-width:2px; }.seat-name { max-width:82px; font-size:9px; padding:2px 3px; margin-top:4px; }.seat-balance { font-size:10px; }.seat-status { font-size:8px; }.seat-0 { top:18%; }.seat-1,.seat-4 { top:39%; }.seat-1 { left:85%; }.seat-4 { left:15%; }.seat-2,.seat-3 { top:75%; }.seat-2 { left:82%; }.seat-3 { left:18%; }.arena-status { font-size:9px; bottom:13px; }.bot-mark { font-size:6px; margin-left:2px; padding:1px 2px; }.host-crown { font-size:7px; }.your-panel { padding:16px; border-radius:15px; }.my-portrait { width:39px; height:39px; min-width:39px; }.my-id { gap:8px; }.my-id strong { font-size:13px; }.my-id .room-label { font-size:8px; }.your-balance { font-size:21px; }.hand-caption { padding-top:13px; font-size:9px; }.your-hand,.in-room .your-hand { min-height:160px; padding:23px 0 15px; }.physical-card { width:77px; height:111px; }.physical-card .card-front > em { font-size:37px; }.physical-card .card-seal { top:24px; left:15px; }.peel-hint { margin:-4px 0 12px; font-size:8px; }.actions-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.actions-grid button { min-height:50px; font-size:12px; }.niu-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }.niu-actions .wide { grid-column:1/-1; }.action-status { font-size:10px; }.bot-invite-button { font-size:10px; margin-top:11px; }.activity { padding:10px 1px; font-size:10px; margin-top:5px; }.room-footnote { font-size:8px; }.five-cards .physical-card { width:59px; height:89px; }.five-cards .card-seal { left:10px;top:19px; }.sheet { width:100%; max-width:100vw; border-radius:18px 18px 0 0; }.sheet-header h2 { font-size:22px; }.invite-layout { grid-template-columns:1fr; gap:18px; }.qr-paper { width:235px; margin:auto; padding:11px 15px 15px; }.qr-paper img { width:205px; }.invite-copy { text-align:center; }.invite-copy h3 { display:none; }.invite-copy p { margin-bottom:9px; }.invite-copy p br { display:none; }.invite-copy label { text-align:left; }.invite-copy .dialog-actions { margin-top:12px; }.invite-copy .button { font-size:12px; }.invite-input { margin-bottom:4px; }.dealt-card { --dx:0px; }.dealt-1 { --dx:100px; }.dealt-2 { --dx:90px; --dy:95px; }.dealt-3 { --dx:-90px; --dy:95px; }.dealt-4 { --dx:-100px; }.dealt-5 { --dy:140px; }
}
@media(max-width:360px) and (orientation:portrait) { .tavern-cast { transform:scale(.78); transform-origin:right center; right:-5px; top:55px; }h1{font-size:36px;}.entry-panel{padding:18px;}.avatar-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}.character-choice{flex-direction:row;justify-content:center;min-height:48px;padding:5px;gap:5px;}.character-image{width:32px;height:32px;}.game-picker small{font-size:6px;}.three-settings{gap:5px;}.three-settings select{padding:0 5px;font-size:11px;}.game-picker b{font-size:11px;}.arena,.in-room .arena{min-height:310px;}.room-number{font-size:19px;}.room-actions .small-button{padding:6px 8px;font-size:9px;}.room-heading{gap:7px;}.room-label{font-size:8px;}.five-cards .physical-card{width:53px;height:81px;}.your-hand,.in-room .your-hand{min-height:151px;} }
@media(orientation:landscape) and (max-height:600px) {
  .app-header,.in-room .app-header { height:52px; }.brand { font-size:17px; }.brand small { display:none; }.lobby-screen { display:grid; grid-template-columns:minmax(0,1fr) 365px; gap:30px; padding-top:24px; }.lobby-intro { align-self:start; padding-top:35px; }h1 { font-size:44px; }.intro-copy { font-size:11px; }.tavern-cast { transform:scale(.65); transform-origin:left top; margin:15px 0 -65px; }.entry-panel { padding:20px; }.entry-panel h2 { font-size:25px; }.lobby-features { font-size:9px; }.room-screen { padding:6px 0 8px; }.room-bar { height:40px; margin-bottom:5px; }.room-number { font-size:20px; }.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; height:calc(100dvh - 111px); min-height:250px; gap:10px; }.arena,.in-room .arena { min-height:0; height:100%; border-radius:15px; }.table-oval { inset:34px 18px 27px; border-width:8px; }.table-oval:after { inset:7px; }.arena-meta { font-size:8px; top:10px; left:12px; right:12px; }.table-center { top:49%; width:136px; }.table-wordmark { font-size:15px; letter-spacing:4px; }.table-wordmark small { font-size:4px; letter-spacing:.8px; }.table-chips { height:20px; margin-top:4px; }.table-chips i { width:20px; height:20px; border-width:2px; font-size:7px; }.pot-value { font-size:27px; }.pot-label,.bet-tag { font-size:7px; }.niu-stage-title { font-size:20px; margin:8px 0; }.waiting-copy { font-size:12px; }.waiting-copy small { font-size:8px; }.seat { width:78px; }.avatar { width:34px; height:34px; border-width:2px; }.seat-name { font-size:8px; max-width:75px; padding:2px; margin:3px auto 2px; }.seat-balance { font-size:9px; }.seat-status { font-size:7px; margin-top:3px; }.seat-0 { top:20%; }.seat-1,.seat-4 { top:40%; }.seat-2,.seat-3 { top:77%; }.mini-hand { margin-top:3px; }.mini-card { width:9px; height:12px; }.mini-card.face { width:10px; font-size:6px; }.arena-status { bottom:8px; font-size:8px; }.bot-mark { font-size:5px; }.host-crown { font-size:6px; }.your-panel { padding:11px; overflow-y:auto; border-radius:12px; }.my-portrait { width:29px; height:29px; min-width:29px; }.my-id { gap:7px; }.my-id strong { font-size:11px; }.my-id .room-label { font-size:7px; margin-top:3px; }.your-balance { font-size:17px; }.your-balance small { font-size:7px; }.hand-caption { padding-top:8px; font-size:8px; }.your-hand,.in-room .your-hand { min-height:91px; padding:10px 0 8px; }.physical-card { width:48px; height:70px; }.physical-card .card-front { padding:5px; }.physical-card .card-front > b { font-size:19px; }.physical-card .card-front > span { font-size:13px; }.physical-card .card-front > em { font-size:25px; right:9px; bottom:16px; }.physical-card .card-bottom { bottom:3px;right:4px; }.physical-card .card-bottom b { font-size:10px; }.physical-card .card-bottom span { font-size:8px; }.physical-card .card-seal { width:24px;height:31px;top:15px;left:9px;font-size:17px; }.physical-card .back-caption { font-size:4px;bottom:8px;letter-spacing:1px; }.card-back-pattern { inset:2px; }.physical-card .card-back-sheet { border-width:2px; }.physical-card:first-child,.physical-card:nth-child(3) { top:4px; }.five-cards .physical-card { width:44px;height:64px;margin-left:-7px; }.five-cards .card-front { padding:4px; }.five-cards .card-front > b { font-size:17px; }.five-cards .card-front > span { font-size:11px; }.five-cards .card-front > em { font-size:22px;right:7px;bottom:14px; }.five-cards .card-seal { width:22px;height:29px;top:13px;left:8px; }.peel-hint { font-size:7px; margin:0 0 6px; min-height:12px; }.actions-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:5px; }.actions-grid button { min-height:44px;font-size:10px;padding:5px 2px; }.niu-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }.action-status { font-size:9px;min-height:14px;margin:0 0 6px; }.panel-footnote { font-size:7px;margin-top:8px; }.bot-invite-button { min-height:36px;font-size:8px;margin-top:8px; }.hand-empty { font-size:12px;padding:6px 0; }.hand-empty .empty-spade { font-size:25px;margin-bottom:7px; }.hand-empty small { font-size:7px;margin-top:5px; }.activity,.room-footnote{display:none;}.sheet{max-height:92dvh;width:620px;}.sheet-header{padding:9px 17px;}.sheet-header h2{font-size:21px;}.sheet-body{padding:15px 18px;}.invite-layout{grid-template-columns:210px minmax(0,1fr);gap:20px;}.qr-paper{padding:9px;}.qr-room b{font-size:18px;}.invite-copy h3{font-size:20px;line-height:1.4;margin-bottom:7px;}.invite-copy p{font-size:9px;margin-bottom:6px;}.invite-copy .network-note{font-size:8px;}.invite-copy label{margin-top:8px;}.invite-copy input{height:38px;}.invite-copy .dialog-actions{margin-top:10px;}.result-callout{font-size:9px;padding:6px;margin:6px 0;}.result-callout small{font-size:8px;}.dealt-0{--dy:-80px;}.dealt-1{--dx:125px;--dy:-30px;}.dealt-2{--dx:120px;--dy:70px;}.dealt-3{--dx:-120px;--dy:70px;}.dealt-4{--dx:-125px;--dy:-30px;}.dealt-5{--dy:95px;}
}
@media(orientation:landscape) and (max-height:430px) {
  .my-portrait { width:25px;height:25px;min-width:25px; }
  .hand-caption { padding-top:6px; }
  .your-hand,.in-room .your-hand { min-height:76px;padding:6px 0 4px; }
  .physical-card { width:44px;height:63px; }
  .physical-card .card-front > b { font-size:17px; }
  .physical-card .card-front > span { font-size:11px; }
  .physical-card .card-front > em { font-size:23px;bottom:14px; }
  .physical-card .card-seal { width:22px;height:28px;top:13px;left:8px; }
  .physical-card .card-bottom b { font-size:9px; }
  .physical-card .card-bottom span { font-size:7px; }
  .physical-card .back-caption { bottom:7px;font-size:3px; }
  .peel-hint { min-height:10px;margin:0 0 4px; }
  .five-cards .physical-card { width:42px;height:61px; }
  .panel-footnote { margin-top:6px; }
}
@media(prefers-reduced-motion:reduce) { .deal-scene {display:none;}.dealing .your-hand .physical-card {animation:none!important;}.card-back-sheet,.physical-card{transition:none!important;} }