/* Original cards and a single full-viewport table. No external images/fonts. */
.ultima-page{--bg:#181724;--surface:#242231;--ink:#f7f1e7;--muted:#b9b3c9;--line:#ffffff1c;--accent:#f0cb7b;--red:#d45e51;--blue:#557fca;--green:#45866c;--yellow:#e7c36e;margin:0;min-height:100svh;min-height:100dvh;background:var(--bg);color:var(--ink);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;flex-direction:column;color-scheme:dark}
.ultima-page *,.ultima-page *::before,.ultima-page *::after{box-sizing:border-box}
.ultima-page [hidden],.ultima-page dialog:not([open]){display:none!important}
.ultima-page :is(h1,h2,h3,p,ul,ol){margin:0;padding:0}
.ultima-page :is(button,input,select,a,summary){font:inherit}
.ultima-page :is(button,input,select,a,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.ultima-page button{cursor:pointer}.ultima-page button:disabled{cursor:default;opacity:.45}
.ultima-page a{color:inherit;text-underline-offset:4px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;padding:max(12px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 10px max(24px,env(safe-area-inset-left));z-index:2}
.brand{display:flex;gap:13px;align-items:center;text-decoration:none;font-size:23px!important;letter-spacing:-.055em;font-weight:700!important}
.brand>span{color:var(--ink)}.top nav{display:flex;align-items:center;gap:4px}
.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;height:44px;padding:8px;border:0;border-radius:50%;background:#ffffff08;color:var(--ink);font-size:23px!important;text-decoration:none}
.icon-button:hover{background:#ffffff15}.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-150%);background:var(--ink);color:var(--bg)!important;padding:12px;z-index:20}.skip-link:focus{transform:none}
#ultima-main{flex:1;display:flex;flex-direction:column;position:relative;min-width:0;isolation:isolate}
#ultima-main::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 40%,#65517c35,transparent 65%);pointer-events:none}
.setup,.lobby{width:min(100%,560px);margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 28px 44px;gap:16px}
.setup{min-height:650px}.setup h1{font-size:clamp(64px,10vw,104px);letter-spacing:-.08em;line-height:1;font-weight:750}.setup h1 span{color:var(--accent)}
.intro-note{color:var(--muted);font-size:15px;letter-spacing:-.02em}.intro-cards{position:relative;height:138px;width:200px;margin-bottom:14px}
.intro-card{position:absolute;left:50%;top:0;width:88px;height:126px;border:3px solid #f5eddf;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:44px;font-weight:750;box-shadow:0 10px 28px #0003;animation:intro-arrive .65s both}
.intro-card:nth-child(1){--intro-rotation:-23deg;--intro-x:-81px;transform:translateX(-81px) rotate(-23deg);top:12px}.intro-card:nth-child(2){--intro-rotation:0deg;--intro-x:-30px;transform:translateX(-30px);z-index:1;animation-delay:.07s}.intro-card:nth-child(3){--intro-rotation:21deg;--intro-x:21px;transform:translateX(21px) rotate(21deg);top:15px;animation-delay:.14s}
.red{--card-color:var(--red);background:var(--red)}.blue{--card-color:var(--blue);background:var(--blue)}.green{--card-color:var(--green);background:var(--green)}.yellow{--card-color:var(--yellow);background:var(--yellow);color:#302c23}
.room-form{display:grid;gap:14px;width:100%;max-width:350px;margin-top:8px;text-align:left}
.ultima-page label{display:grid;gap:7px;font-size:12px;color:var(--muted);text-align:left;min-width:0}
.ultima-page input,.ultima-page select{width:100%;min-width:0;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;color:var(--ink);font-size:15px}
.ultima-page select option{background:var(--surface);color:var(--ink)}.offline-entry{display:grid;gap:12px}.offline-entry .small{text-align:center;line-height:1.65}
.ultima-page input::placeholder{color:#9d95ac}.ultima-page input[readonly]{font-size:12px;text-overflow:ellipsis}
.primary,.secondary,.danger{min-height:48px;border:1px solid transparent;border-radius:12px;padding:12px 20px;font-weight:650!important;display:inline-flex;gap:28px;align-items:center;justify-content:center;text-decoration:none}
.primary{background:var(--accent);color:#292332}.primary:hover:not(:disabled){background:#f8d795}.secondary{background:#ffffff09;color:var(--ink);border-color:var(--line)}.secondary:hover:not(:disabled){background:#ffffff15}.danger{background:#a63d3d;color:#fff;border-color:#d57070}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 10px;color:var(--muted);background:transparent;border:0;border-radius:9px;font-size:13px!important}.text-button:hover:not(:disabled){background:#ffffff09;color:var(--ink)}
.join-divider{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted);margin-top:3px}.join-divider::before,.join-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.setup-footnote{font-size:11px;color:var(--muted);margin-top:5px!important}.muted{color:var(--muted)}.small{font-size:11px;line-height:1.6}
.lobby{min-height:580px;gap:20px}.lobby h2{font-size:clamp(32px,5vw,48px);font-weight:650;letter-spacing:-.06em;line-height:1.1}.connection-mark{font-size:44px;color:var(--accent);line-height:1}
.invite-tools{width:100%;max-width:420px;display:grid;gap:10px}.invite-actions{display:flex;align-items:center;gap:12px}.invite-actions .secondary{flex:1}.lobby-players{list-style:none;display:grid;gap:5px;width:100%;max-width:420px;text-align:left}
.lobby-player{display:flex;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--line);padding:8px 0}.lobby-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#a78dc326;color:var(--accent);font-weight:600}.lobby-player-name{flex:1;min-width:0;overflow-wrap:anywhere}.player-detail{color:var(--muted);font-size:11px}
.game-table{flex:1;display:grid;grid-template-rows:auto auto minmax(270px,1fr) auto auto;min-height:calc(100dvh - 114px);padding:0 max(24px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left));min-width:0;position:relative}
.table-topline{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:12px}.table-topline #open-score{margin-left:auto}.table-topline #direction{font-size:23px;color:var(--accent)}
.players{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:8px auto!important;max-width:1100px;width:100%}
.player{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;max-width:190px;min-width:95px;min-height:52px;position:relative;padding:6px 9px;border:1px solid transparent;border-radius:12px}
.player[data-active="true"]{border-color:#f0cb7b78;background:#f0cb7b0d}.player[data-connected="false"]{opacity:.5}.player-name{font-size:12px;font-weight:600;overflow-wrap:anywhere;max-width:130px}.player-count{grid-column:2;grid-row:1/3;font-size:26px;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}.player-meta{font-size:10px;color:var(--muted)}
.center-table{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-height:285px;padding:18px 0 24px;gap:14px;min-width:0}
.table-orbit{position:absolute;width:min(650px,85vw);height:86%;max-height:390px;border:1px solid #ffffff0b;border-radius:50%;z-index:-1;pointer-events:none;box-shadow:0 0 0 20px #ffffff02,0 0 0 70px #ffffff01}
.turn-label{font-size:18px;font-weight:600;letter-spacing:-.035em;text-align:center;min-height:28px;max-width:100%;overflow-wrap:anywhere}
.piles{display:flex;align-items:flex-start;gap:clamp(26px,5vw,70px)}.draw-pile,.discard-pile{display:grid;justify-items:center;gap:10px;max-width:150px;min-width:0}
.card{--card-color:#79728c;position:relative;width:106px;height:150px;flex:none;background:var(--card-color);color:#fff9ee;border:3px solid #f7efdf;border-radius:13px;box-shadow:0 7px 18px #0003;text-align:left;padding:7px;overflow:hidden;isolation:isolate;font-weight:700;line-height:1}
.card::before{content:"";position:absolute;inset:31% 18%;transform:rotate(-20deg);border:1px solid #ffffff40;border-radius:4px;z-index:-1}.card.yellow{color:#302c23}.card.wild,.card.wild4{--card-color:#2c2b35;background:conic-gradient(from 45deg,#6e4551,#53658e,#4d7864,#b59b64,#6e4551)}
.card.red{--card-color:var(--red)}.card.blue{--card-color:var(--blue)}.card.green{--card-color:var(--green)}.card.yellow{--card-color:var(--yellow)}
.card-corner{display:flex;flex-direction:column;gap:4px;font-size:18px;position:absolute;top:8px;left:8px}.card-shape{font-size:10px;opacity:.9}.card-center{position:absolute;inset:0;display:grid;place-items:center;font-size:54px;letter-spacing:-.06em}.card-center.action-symbol{font-size:43px}.card-bottom{position:absolute;bottom:8px;right:8px;transform:rotate(180deg);font-size:18px}
.card-back{background:#383048;--card-color:#383048;color:var(--accent);display:grid;place-items:center;border-color:#9a83b4;box-shadow:5px 3px 0 #7c6a8c,9px 6px 0 #4e435f,0 7px 18px #0003}
.card-back::before{inset:10px;transform:none;border:1px solid #f0cb7b40}.back-stars{font-size:48px;margin-top:2px}.back-name{font-size:15px;letter-spacing:-.04em;margin-bottom:10px}
#draw-card:disabled{opacity:.8}#draw-card:not(:disabled):hover{transform:translateY(-4px)}.pile-count{font-size:11px;line-height:1.5;color:var(--muted);text-align:center;min-height:17px}.last-event{font-size:12px;color:var(--muted);min-height:18px;text-align:center;max-width:650px}
.color-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.color-choice{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:2px solid #f7efdf77;border-radius:10px;color:#fff;font-size:18px!important}.color-choice.yellow{color:#302c23}.color-choice span{font-size:12px}
.draw-four-actions{text-align:center;display:grid;gap:8px}.draw-four-actions>div{display:flex;align-items:center;justify-content:center;gap:10px}.draw-four-actions>p{font-size:13px}
.hand-area{min-width:0;width:min(100%,1200px);margin:auto;align-self:end;padding-top:8px}.hand-topline{display:flex;align-items:center;justify-content:space-between;gap:10px}.hand-topline h2{font-size:12px;color:var(--muted);font-weight:400}.hand-actions{display:flex;align-items:center;gap:5px}.uno-button{min-height:44px;min-width:68px;padding:9px 15px;background:#dc6658;color:#fff;border:1px solid #f6b8a1;border-radius:10px;font-weight:750!important;letter-spacing:.04em}.uno-button[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.hand{display:flex;align-items:flex-end;list-style:none;min-height:190px;gap:0;overflow-x:auto;overscroll-behavior-x:contain;padding:14px 7px 18px!important;scrollbar-width:thin;scrollbar-color:#9c83b555 transparent;max-width:100%}
.hand>li{flex:none;position:relative;margin-right:-20px}.hand>li:last-child{margin-right:0}.hand .card{width:100px;height:140px;transition:transform .15s,filter .15s;transform-origin:bottom center;animation:card-arrive .25s ease-out both}
.hand .card:disabled{opacity:.64;filter:saturate(.6);animation:none}.hand .card:not(:disabled){cursor:pointer;box-shadow:0 0 0 2px #f0cb7b70,0 8px 20px #0003}.hand .card:not(:disabled):hover,.hand .card:focus-visible{transform:translateY(-9px);z-index:2;filter:brightness(1.06)}.hand>li:focus-within{z-index:3}
.catch-uno-list{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;min-height:5px}.catch-button{min-height:44px;background:#efcc7a11;color:var(--accent);border:1px solid #efcc7a42;border-radius:10px;padding:8px 12px;font-size:12px!important}
.status-area{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;padding:5px max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));min-height:38px}.status{color:var(--muted);font-size:12px;text-align:center;overflow-wrap:anywhere;max-width:900px}.status[data-error="true"]{color:#ffb2a3}
.round-result{text-align:center;padding:25px 12px;display:grid;gap:13px;justify-items:center}.round-result h2{font-size:36px;line-height:1.2;letter-spacing:-.06em}.round-result p{font-size:13px;color:var(--muted);max-width:540px}.round-result .primary{margin-top:5px}
.challenge-evidence{max-width:900px;width:100%;margin:0 auto 15px!important;border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--muted);font-size:12px}.challenge-evidence summary{cursor:pointer;min-height:28px}.challenge-evidence p{margin:10px 0!important}.evidence-cards{display:flex;list-style:none;gap:8px;overflow:auto;padding:4px!important}.evidence-cards .card{width:58px;height:84px;border-width:2px;border-radius:7px}.evidence-cards .card-center{font-size:29px}.evidence-cards .card-corner,.evidence-cards .card-bottom{font-size:10px}.evidence-cards .card-shape{font-size:7px}
.sheet{width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);overflow-y:auto;overscroll-behavior:contain}.sheet::backdrop{background:#090713ba;backdrop-filter:blur(5px)}.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.sheet-heading h2{font-size:23px;letter-spacing:-.04em;line-height:1.2}.sheet h3{font-size:14px;font-weight:650;margin-bottom:8px}.sheet section+section{margin-top:24px}.sheet p{font-size:13px;line-height:1.75;color:var(--muted)}.sheet p+p{margin-top:12px}.sheet>p.small{font-size:11px;margin-top:24px}.leave-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:25px}.score-list{list-style:none;display:grid;gap:12px}.score-list li{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.score-list .score-name{min-width:0;overflow-wrap:anywhere}.score-list strong{font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums}
@keyframes card-arrive{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}@keyframes intro-arrive{from{opacity:0;transform:translateX(var(--intro-x)) translateY(25px) rotate(var(--intro-rotation))}to{opacity:1;transform:translateX(var(--intro-x)) rotate(var(--intro-rotation))}}
@media(min-width:900px){.hand{justify-content:safe center}.game-table{max-width:1600px;width:100%;margin:auto}.center-table{padding-block:25px}.piles .card{width:118px;height:168px}.piles .card-center{font-size:62px}}
@media(max-width:600px){.top{padding-inline:16px;min-height:64px}.setup{min-height:590px;padding:24px 24px 35px;gap:15px}.intro-cards{height:122px;margin-bottom:8px;transform:scale(.9)}.setup h1{font-size:72px}.intro-note{font-size:13px}.game-table{padding-inline:12px;min-height:calc(100dvh - 106px);grid-template-rows:auto auto minmax(265px,1fr) auto auto}.players{gap:5px 8px;margin:0 auto!important}.player{min-width:78px;max-width:150px;column-gap:6px;padding:4px 6px}.player-name{font-size:11px;max-width:100px}.player-count{font-size:22px}.player-meta{font-size:9px}.center-table{min-height:260px;padding:12px 0;gap:12px}.turn-label{font-size:16px}.card{width:92px;height:130px}.card-center{font-size:45px}.card-center.action-symbol{font-size:38px}.piles{gap:38px}.hand{min-height:158px;padding:10px 6px 15px!important}.hand>li{margin-right:-12px}.hand .card{width:78px;height:112px;border-radius:10px}.hand .card-corner,.hand .card-bottom{font-size:14px}.hand .card-center{font-size:40px}.hand .card-shape{font-size:8px}.hand-actions .text-button{font-size:11px!important;padding-inline:6px}.hand-topline{gap:4px}.hand-area{padding-top:3px}.sheet{padding:20px}.lobby{padding-inline:22px}.color-choice{padding:7px 10px}.color-choice span{font-size:11px}.draw-four-actions .small{max-width:280px}.round-result h2{font-size:29px}}
@media(max-height:700px) and (max-width:600px){
 .top{min-height:56px;padding-block:6px}.game-table{min-height:calc(100dvh - 80px);grid-template-rows:32px auto minmax(196px,1fr) auto auto}.players{gap:3px 6px}.player{min-height:46px}.center-table{min-height:196px;padding:6px 0;gap:6px}.turn-label{min-height:24px;font-size:15px}.piles .card{width:76px;height:108px}.piles .card-center{font-size:42px}.piles .card-center.action-symbol{font-size:34px}.piles .card-corner,.piles .card-bottom{font-size:14px}.draw-pile,.discard-pile{gap:5px}.hand{min-height:125px;padding-block:8px 12px!important}.hand .card{width:70px;height:100px}.hand .card-center{font-size:35px}.status-area{min-height:24px;padding-block:2px}.round-result{padding-block:12px}
}
@media(max-height:550px) and (min-width:600px){
 .top{min-height:58px;padding-block:6px}.setup{min-height:620px}.game-table{min-height:calc(100dvh - 82px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:36px auto minmax(150px,1fr);column-gap:22px}.table-topline{grid-column:1/-1;grid-row:1}.players{grid-column:2;grid-row:2;margin:0!important;gap:3px}.player{min-height:42px}.center-table{grid-column:1;grid-row:2/4;min-height:0;padding:8px 0;gap:7px}.turn-label{font-size:15px;min-height:23px}.piles{gap:30px}.piles .card{width:80px;height:113px}.piles .card-center{font-size:43px}.piles .card-corner,.piles .card-bottom{font-size:14px}.draw-pile,.discard-pile{gap:5px}.table-orbit{width:95%}.hand-area{grid-column:2;grid-row:3}.hand{min-height:137px;padding-block:10px 12px!important}.hand .card{width:78px;height:110px}.hand .card-center{font-size:40px}.hand-topline h2{font-size:11px}.round-result,.challenge-evidence{grid-column:1/-1}.status-area{min-height:24px;padding-block:2px}
}
@media(prefers-reduced-motion:reduce){.ultima-page *,.ultima-page *::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.card,.player[data-active="true"],.primary,.uno-button{border:2px solid CanvasText}.card::before{border:0}}