/* Midnight Card Club — scoped to the match; dialogs keep their existing design. */
body{background:radial-gradient(ellipse at 50% 20%,#182940,#0b1020 75%)}
main{--lime:#FFD166;--red:#cf4854;--yellow:#e9b845;--green:#268b69;--blue:#397dbb;display:grid;grid-template-columns:180px minmax(0,1fr) 180px;grid-template-rows:110px 330px auto auto;gap:16px 24px;height:auto;min-height:0;max-height:none;padding:20px 32px 24px;isolation:isolate}
main .table{inset:35px 0 210px;border:10px solid #142c3b;border-radius:180px;background:linear-gradient(#143c4533,#061e3544),url('assets/table-petrol.png') center/650px;box-shadow:0 18px 35px #0006,inset 0 0 65px #061923aa,0 0 0 1px #637371;z-index:-1}
main .table:after{content:'';position:absolute;inset:12px;border:1px solid #ffd16640;border-radius:inherit;pointer-events:none}
main .side-note{display:none}
main .opponent,main .self-player{position:relative;inset:auto;transform:none;width:100%;align-self:center;display:grid;grid-template-columns:64px minmax(0,1fr) 16px;align-items:center;gap:8px;text-align:left;padding:10px;border:1px solid #52617466;border-radius:20px;background:#101e30ed;box-shadow:0 8px 20px #0003;outline:none;min-width:0}
main .north{grid-area:1/2;max-width:250px;justify-self:center}main .west{grid-area:2/1}main .east{grid-area:2/3}
main .opponent.active,main .self-player.active{border-color:#ffd166;background:#192b38;box-shadow:0 8px 20px #0003,inset 0 -3px #ffd166;padding-top:10px}
main .avatar{width:64px;height:64px;margin:0;border-radius:50%;background-image:url('assets/characters.png');background-size:200% 200%;box-shadow:inset 0 0 0 1px #ffd16660;background-color:#143b45}
main .character-0{background-position:0 0}main .character-1{background-position:100% 0}main .character-2{background-position:0 100%}main .character-3{background-position:100% 100%}
main .active .avatar{box-shadow:inset 0 0 0 2px #ffd166}
main .player-info{min-width:0}main .player-info strong{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}main .player-info small{display:block;font-size:12px;color:#b7c7d6;margin:5px 0 0}main .active small{color:#ffe3a3;font-weight:500}.turn-status{color:#ffd166;font-size:20px}
main .mini-hand{grid-column:1/-1;display:flex;height:55px;padding:0 0 0 18px;justify-content:center;margin-top:2px}
main .mini-card{width:36px;height:54px;margin-left:-18px;border:0;border-radius:5px;background:url('assets/card-back.png') center/100% 100%;box-shadow:0 3px 5px #0006}
main .center{position:relative;inset:auto;transform:none;grid-area:2/2;width:100%;max-width:430px;justify-self:center;align-self:center;text-align:center}
main .piles{gap:40px;align-items:center}main .piles>div:first-child{flex:0 0 100px}main .piles>div:last-child{flex:0 0 145px}
main .piles p{font-size:11px;color:#d3dedf;letter-spacing:.5px;margin:13px 0 10px}main .piles small{font-size:10px;color:#b8c8ce;letter-spacing:0;margin-top:5px}
main .card,.flying-card{width:106px;height:158px;border:4px solid #f0dfb6;border-radius:13px;background:linear-gradient(150deg,#ffffff12,#00000014),var(--card);box-shadow:0 2px 0 #928b7c,0 9px 16px #0005;overflow:hidden}
main .card:before,.flying-card:before{inset:26px 12px;border:1px solid #f4e2b99c;border-radius:48% 48% 45% 45%;background:#101e30de;transform:rotate(25deg)}
main .card .big,.flying-card .big{font-family:'Segoe UI',sans-serif;font-size:48px;font-weight:850;font-style:normal;color:#fff3d8;text-shadow:0 2px 2px #0005}
main .card .corner{font-size:21px;line-height:1.1;color:#fff7e8;text-shadow:0 1px 2px #0008;left:5px;top:5px}main .card .bottom{left:auto;top:auto;right:5px;bottom:5px}
main .card.wild:before{inset:27px 10px;background:conic-gradient(#cf4854 0 25%,#397dbb 0 50%,#268b69 0 75%,#e9b845 0);border:2px solid #ebd6a8}main .card.wild .big{font-size:38px;color:#fff;text-shadow:0 2px 4px #000}
main .card.back,.flying-card.back{border:0;background:url('assets/card-back.png') center/100% 100%;transform:rotate(4deg);box-shadow:0 3px #c4baa3,0 6px #1c3444,0 9px #afa58f,0 12px #1c3444,0 18px 24px #0006;transition:transform .2s,box-shadow .2s}
main .back:before,.flying-card.back:before,main .back>span,.flying-card.back>span{display:none}main #draw{width:94px;height:140px;margin:auto}main #draw:disabled{opacity:.8}main #draw:not(:disabled){outline:1px solid #ffd166;outline-offset:4px}main #draw:not(:disabled):hover{transform:translateY(-6px) rotate(1deg)}
main #discard{display:grid;place-items:center}main #discard .card{width:118px;height:176px;transform:rotate(-5deg);box-shadow:3px 4px 0 #dbcdb0,6px 8px 0 #142837,0 15px 23px #0006}
main .color-indicator{font-size:11px;border-color:#bcceca40;background:#0b2435cc;padding:7px 12px}main .color-indicator i{width:14px;height:14px;border:1px solid #ffffff90}
main #event{min-height:51px;margin:10px 0 0;padding:10px 14px;font-size:12px;background:#0b1a2be6;border:1px solid #768b8c55;color:#f5eee0;box-shadow:none;border-radius:12px;line-height:1.4}
main .your-area{grid-area:3/1/4/4;position:relative;inset:auto;transform:none;width:100%;min-width:0;text-align:center}
main .self-player{width:195px;grid-template-columns:42px minmax(0,1fr) 16px;margin:0 auto;padding:7px 12px;border-radius:15px}main .self-player.active{padding-top:7px}main .self-player .avatar{width:42px;height:42px}
.hand-navigation{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:6px;max-width:950px;margin:auto}
.hand-navigation>button{border:1px solid #7d8c9e60;border-radius:50%;width:36px;height:44px;background:#182a3d;color:#ffd166;font-size:26px}.hand-navigation>button:disabled{opacity:.2}
main .hand{display:flex;justify-content:flex-start;align-items:center;height:212px;padding:30px 24px 22px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-padding-inline:24px;overscroll-behavior-x:contain;outline-offset:-4px}main .hand::-webkit-scrollbar{display:none}
main .hand .card{width:106px;height:158px;margin-left:-43px;transform:translateY(var(--lift)) rotate(var(--angle));transform-origin:center 130%;transition:transform .22s ease,box-shadow .22s ease,filter .2s}
main .hand .card:first-child{margin-left:auto}main .hand .card:last-child{margin-right:auto}main .hand .card:disabled{filter:brightness(.78) saturate(.85)}
main .hand .card.playable{box-shadow:0 0 0 2px #ffd166,0 3px 0 #978a6b,0 9px 16px #0005}main .hand .card.playable:after{content:'•';position:absolute;top:0;right:4px;bottom:auto;left:auto;background:none;width:auto;height:auto;color:#fff4d1;font-size:16px}
@media(hover:hover){main .hand .card:not(:disabled):hover{transform:translateY(-15px) rotate(0);z-index:150!important;box-shadow:0 0 0 3px #ffd166,0 15px 22px #0006}}
main .hand .card:focus-visible,main .hand .card.selected{transform:translateY(-15px) rotate(0);z-index:150!important;outline:3px solid #fff0bc;outline-offset:2px}
main .hand .card:active:not(:disabled){transform:translateY(-9px) scale(.97)}
main .turn-copy h1{font:650 20px/1.3 'Segoe UI',sans-serif;margin:0 0 5px;color:#ffe0a0}main .turn-copy p{font-size:12px;color:#b9c8d6;min-height:18px}
main .uno-area{grid-area:4/1/5/4;position:relative;inset:auto;width:auto;display:flex;align-items:center;justify-content:center;gap:14px;min-height:50px}
main #uno{width:116px;border-radius:16px;padding:11px;font-size:23px;background:#ffd166;border:1px solid #ffe5a6;color:#152234;box-shadow:0 4px 0 #9d7534;letter-spacing:0}main #uno:disabled{opacity:.42}main #uno:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 0 #9d7534}main .uno-area small{font-size:10px;max-width:110px;margin:0}main #pass{margin:0;padding:12px;font-size:12px}
@media(min-width:1200px) and (min-height:950px){main{grid-template-rows:120px 360px auto auto;gap:24px}main .table{inset:35px 20px 220px}}
@media(max-width:850px){main{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:125px 330px auto auto;padding:16px 8px;gap:12px 10px}main .west{grid-area:1/1}main .north{grid-area:1/2}main .east{grid-area:1/3}main .center{grid-area:2/1/3/4}main .opponent{grid-template-columns:46px minmax(0,1fr);gap:7px;padding:8px;border-radius:15px}main .opponent.active{padding-top:8px}main .opponent .avatar{width:46px;height:46px}main .opponent .turn-status{position:absolute;right:5px;top:3px;font-size:13px}main .player-info strong{font-size:13px}main .player-info small{font-size:11px}main .table{inset:25px 0 230px;border-radius:85px}main .mini-hand{height:45px}main .mini-card{width:30px;height:45px}main .hand .card{transform:none}}
@media(max-width:600px){.mode-bar{margin-bottom:8px}main{padding:8px 0 14px;grid-template-rows:120px 306px auto auto;gap:8px}main .opponent{grid-template-columns:minmax(0,1fr);text-align:center;gap:3px;padding:7px 4px;align-self:stretch}main .opponent.active{padding-top:7px}main .opponent .avatar{width:45px;height:45px;margin:auto}main .opponent .player-info small{margin:2px 0;font-size:10px}main .opponent .mini-hand{height:22px;overflow:hidden;margin:0;grid-column:1}main .opponent .mini-card{width:23px;height:34px;margin-left:-12px}main .opponent .player-info strong{font-size:12px}main .center{max-width:330px}main .table{inset:35px 0 235px;border-width:6px;border-radius:55px}main .table:after{inset:7px}main .piles{gap:24px}main #discard .card{width:102px;height:152px}main #draw{width:84px;height:126px}main .piles>div:last-child{flex-basis:130px}main .piles p{margin:11px 0 8px}main #event{font-size:11px;min-height:48px;margin:8px 12px 0;padding:8px}main .self-player{width:170px;grid-template-columns:34px minmax(0,1fr) 14px;padding:5px 10px}main .self-player.active{padding-top:5px}main .self-player .avatar{width:34px;height:34px}.hand-navigation{grid-template-columns:28px minmax(0,1fr) 28px;gap:0}.hand-navigation>button{width:28px;height:44px}main .hand{height:177px;padding:25px 10px 15px}main .hand .card{width:86px;height:129px;margin-left:-35px;transform:none}main .hand .card .big{font-size:39px}main .hand .card .corner{font-size:18px}main .hand .card:first-child{margin-left:auto}main .turn-copy h1{font-size:18px;margin:0 0 5px}main .turn-copy p{font-size:11px;padding:0 10px}main .uno-area{gap:9px;flex-wrap:wrap}main #uno{width:98px;font-size:21px}main .uno-area small{font-size:9px;max-width:90px}main #pass{font-size:11px;padding:10px}.history-panel{margin-top:12px}}
@media(prefers-reduced-motion:reduce){main *,main *:before,main *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:851px){main .north .mini-hand{display:none}}
@media(min-width:851px) and (max-height:900px){main{grid-template-rows:86px 284px auto auto;gap:12px;padding-top:8px}main .center{align-self:start}main #discard .card{width:102px;height:152px}main #draw{width:84px;height:126px}main .hand{height:190px}main .hand .card{width:98px;height:146px}main .table{bottom:185px}}
main #uno{white-space:nowrap;line-height:1.2}
@media(max-width:600px){main #uno{width:108px;font-size:20px}main .uno-area{min-height:50px}}
/* Content-sized tracks also accommodate wrapped action messages. */
main{grid-template-rows:minmax(110px,max-content) minmax(330px,max-content) auto auto}
@media(min-width:851px) and (max-height:900px){main{grid-template-rows:86px minmax(310px,max-content) auto auto}}
@media(max-width:850px){main{grid-template-rows:125px minmax(330px,max-content) auto auto}}
@media(max-width:600px){main{grid-template-rows:120px minmax(306px,max-content) auto auto}}
.flying-card{--red:#cf4854;--yellow:#e9b845;--green:#268b69;--blue:#397dbb}
main .card[data-color="yellow"] .corner{color:#17243b;text-shadow:none}
/* Match polish: larger interaction targets, compact state information. */
main .sr-only,main #turn-hint,main #uno-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
main{grid-template-rows:minmax(100px,max-content) minmax(285px,max-content) auto auto;gap:12px 24px}
main .opponent{grid-template-columns:80px minmax(0,1fr);gap:8px;padding:8px}main .opponent.active{padding-top:8px}
main .opponent .avatar{width:80px;height:80px}main .opponent .turn-status{position:absolute;right:7px;top:4px;font-size:15px}
main .opponent .player-info strong{font-size:16px}main .opponent .player-info small{font-size:13px;margin-top:5px}
main .mini-hand{height:36px;margin-top:0;overflow:hidden}
main .north{max-width:240px}
main .center{max-width:480px;align-self:center}
main #draw{width:108px;height:160px}main #discard .card{width:136px;height:202px}
main .piles{gap:48px;align-items:flex-start}main .piles>div:first-child{flex-basis:112px;padding-top:12px}main .piles>div:last-child{flex-basis:150px}
main .piles p{margin:12px 0 0}main .piles small{font-size:11px;margin:0;color:#c5d1d8}
main .table-state{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}main .color-indicator{border:0;padding:5px 10px;font-size:12px}main #direction{font-size:23px;color:#d2dddc;line-height:1}
main #event{min-height:36px;margin:7px auto 0;padding:6px 10px;background:transparent;border:0;font-size:12px;max-width:460px}main #event:before{content:'Letzte Aktion · ';color:#9bafb9;font-size:10px}
main .your-area{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:16px;row-gap:0}
main .self-player{width:190px;margin:0;grid-template-columns:58px minmax(0,1fr) 14px;padding:5px 8px}main .self-player.active{padding-top:5px}main .self-player .avatar{width:58px;height:58px}
main .turn-copy{grid-area:1/2;text-align:left;max-width:240px}main .turn-copy h1{font-size:17px;margin:0;color:#c5d1dc}main .your-area:has(.self-player.active) .turn-copy h1{color:#ffd166}
main .hand-navigation{grid-column:1/-1;width:min(1080px,100%);max-width:1080px;min-width:0}main .your-area{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}main .self-player{justify-self:end}main .turn-copy{justify-self:start}
main .hand{height:246px;padding-top:34px;padding-bottom:24px}main .hand .card{width:128px;height:190px;margin-left:-48px}main .hand .card .big{font-size:59px}main .hand .card .corner{font-size:25px}main .hand .card.wild .big{font-size:46px}
main .hand .card:disabled{filter:brightness(.89) saturate(.94)}main .hand .card.playable{box-shadow:0 0 0 2px #ffd166,0 3px 0 #978a6b,0 9px 16px #0005}
main .your-area:has(.self-player.active) .hand-navigation{background:radial-gradient(ellipse at 50% 90%,#ffd16609,transparent 65%);border-radius:24px}
main:has(#pass:not([hidden])) #turn-hint,main:has(#uno:not(:disabled)) #uno-hint{position:static;width:auto;height:auto;margin:4px 0 0;clip-path:none;white-space:normal;overflow:visible}
main #uno{font-size:21px;padding:9px 14px}main .uno-area{min-height:44px}main .table{bottom:150px}
@media(min-width:851px) and (max-height:900px){main{grid-template-rows:98px minmax(265px,max-content) auto auto;gap:10px 24px}main #draw{width:98px;height:146px}main #discard .card{width:118px;height:176px}main .hand{height:230px}main .hand .card{width:118px;height:176px}main .hand .card .big{font-size:54px}main .hand .card.wild .big{font-size:43px}}
@media(max-width:850px){main{grid-template-rows:120px minmax(280px,max-content) auto auto;gap:10px}main .opponent{grid-template-columns:62px minmax(0,1fr)}main .opponent .avatar{width:62px;height:62px}main .opponent .player-info strong{font-size:14px}main .opponent .player-info small{font-size:12px}main .mini-hand{height:28px}main .hand{height:210px}main .hand .card{width:106px;height:158px;margin-left:-40px}main .hand .card .big{font-size:48px}main .hand .card .corner{font-size:21px}main .hand .card.wild .big{font-size:38px}}
@media(max-width:600px){main{grid-template-rows:119px minmax(257px,max-content) auto auto;gap:8px}main .opponent{grid-template-columns:minmax(0,1fr);padding:5px 4px;gap:2px}main .opponent.active{padding-top:5px}main .opponent .avatar{width:62px;height:62px}main .opponent .player-info strong{font-size:13px}main .opponent .player-info small{font-size:11px;margin-top:2px}main .opponent .mini-hand{display:none}main .center{max-width:350px}main #draw{width:92px;height:138px}main #discard .card{width:112px;height:166px}main .piles{gap:30px}main .piles>div:first-child{flex-basis:96px;padding-top:7px}main .piles>div:last-child{flex-basis:128px}main .table-state{margin-top:10px}main #event{font-size:11px;min-height:32px;padding:4px 8px;margin:5px 0 0}main #event:before{font-size:9px}main .self-player{width:160px;grid-template-columns:46px minmax(0,1fr) 12px;padding:4px 6px}main .self-player.active{padding-top:4px}main .self-player .avatar{width:46px;height:46px}main .your-area{column-gap:10px;grid-template-columns:auto minmax(0,1fr)}main .turn-copy h1{font-size:15px}main .turn-copy p{font-size:10px;padding:0}main .hand{height:181px;padding:27px 10px 17px}main .hand .card{width:86px;height:129px;margin-left:-35px}main .hand .card .big{font-size:39px}main .hand .card .corner{font-size:18px}main .hand .card.wild .big{font-size:34px}main .table{bottom:130px}main #uno{font-size:20px;padding:9px 12px}}
/* Fit the match to window height rather than width alone. */
body:not(.in-menu) .app{padding-top:14px}
body:not(.in-menu) header{height:auto;min-height:58px;margin-bottom:10px}
body:not(.in-menu) .mode-bar{margin:6px 0 10px}
@media(min-width:851px){
 main{--hand-height:clamp(140px,19dvh,190px);--pile-height:clamp(142px,20dvh,202px);grid-template-rows:auto auto auto auto;gap:10px 24px;padding-top:8px;padding-bottom:12px}
 main .opponent .avatar{width:clamp(58px,8dvh,80px);height:clamp(58px,8dvh,80px)}
 main .opponent{grid-template-columns:clamp(58px,8dvh,80px) minmax(0,1fr)}
 main #discard .card{height:var(--pile-height);width:calc(var(--pile-height) * .673)}
 main #draw{height:calc(var(--pile-height) * .8);width:calc(var(--pile-height) * .54)}
 main .hand{height:calc(var(--hand-height) + 48px);padding-top:30px;padding-bottom:18px}
 main .hand .card{height:var(--hand-height);width:calc(var(--hand-height) * .674)}
 main .hand .card .big{font-size:clamp(43px,5.8dvh,59px)}
 main .self-player .avatar{width:46px;height:46px}main .self-player{grid-template-columns:46px minmax(0,1fr) 14px}
 main .table-state{margin-top:8px}main #event{min-height:30px;margin-top:4px}
}
main .uno-area{z-index:160;justify-self:center;padding:8px 12px;border-radius:18px;background:#0b182bef;border:1px solid #50657366;box-shadow:0 5px 18px #0004;max-width:100%}
/* Never place the action bar over hand cards. */
main .uno-area{position:relative;bottom:auto}
@media(min-width:601px) and (max-height:800px){
 body:not(.in-menu) nav{max-width:none}
 main{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:10px 16px}
 main .west{grid-area:1/1}main .north{grid-area:1/2;justify-self:center;max-width:240px;align-self:center}main .east{grid-area:1/3}
 main .opponent .mini-hand{display:none}
 main .center{grid-area:2/1/4/2;padding-top:0;min-width:0}
 main .your-area{grid-area:2/2/3/4;column-gap:8px}
 main .uno-area{grid-area:3/2/4/4}
 main .piles{gap:18px}main .piles>div:first-child{flex-basis:74px}main .piles>div:last-child{flex-basis:94px}
 main #draw{width:72px;height:108px}main #discard .card{width:92px;height:138px}
 main .self-player{width:160px}main .turn-copy h1{font-size:15px}
 main .table{inset:25px 0 75px;border-radius:70px}
}

@media(min-width:601px) and (max-width:850px) and (max-height:800px){
 main .piles{gap:8px}main .piles>div:first-child{flex-basis:64px}main .piles>div:last-child{flex-basis:88px}
 main #draw{width:64px;height:96px}main #discard .card{width:86px;height:128px}
 main .hand{height:188px}main .hand .card{width:94px;height:140px}main .hand .card .big{font-size:44px}
}
@media(max-width:600px){main{grid-template-rows:auto auto auto auto;gap:8px}main .opponent{min-height:112px}main .hand{height:173px;padding-top:25px;padding-bottom:15px}}