:root {
    color-scheme:dark;
    --gold:#f2cf62;
    --gold-bright:#ffe88b;
    --green:#4de488;
    --felt:#073d25;
    --ink:#03110a;
    --panel:#04170f;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body {
    width:100%;
    height:100%;
    max-width:100%;
    margin:0;
    overflow:hidden;
    overscroll-behavior:none;
}
body {
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    height:100vh;
    height:100dvh;
    color:#f7fff9;
    background:radial-gradient(circle at 50% 16%,#0a5b35 0,#032719 34%,#010805 78%);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { touch-action:manipulation; }

.cup-header {
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:62px;
    padding:7px max(14px,env(safe-area-inset-right)) 7px max(14px,env(safe-area-inset-left));
    border-bottom:1px solid #d9ba574f;
    background:#021009f5;
    backdrop-filter:blur(14px);
}
.cup-brand { flex:0 1 auto; min-width:0; }
.cup-brand img { display:block; width:clamp(112px,18vw,196px); height:auto; }
.back-link {
    flex:0 0 auto;
    min-height:44px;
    display:grid;
    place-items:center;
    padding:8px 15px;
    border:1px solid var(--gold);
    border-radius:999px;
    color:#fff1a8;
    background:linear-gradient(180deg,#133924,#071b11);
    box-shadow:inset 0 1px #ffffff24,0 4px 0 #2b2105,0 7px 15px #0007;
    font-size:11px;
    font-weight:950;
    text-decoration:none;
    white-space:nowrap;
}
.back-link:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline:3px solid #fff6b5;
    outline-offset:2px;
}

.cup-shell {
    width:min(1180px,calc(100% - 16px));
    height:100%;
    min-height:0;
    margin:auto;
    padding:8px 0;
    overflow:hidden;
}
.cup-shell>section { min-height:0; }
.step-label {
    color:#a8f5c2;
    font-size:10px;
    font-weight:950;
    letter-spacing:.14em;
}

.setup-card,.room-stage {
    position:relative;
    height:100%;
    min-height:0;
    overflow:hidden;
    border:1px solid #d5b94e7a;
    border-radius:23px;
    background:linear-gradient(145deg,#062719f5,#020d08fc);
    box-shadow:0 20px 52px #0008,inset 0 0 34px #ffffff08;
}
.setup-card {
    display:grid;
    grid-template-columns:minmax(180px,1.25fr) minmax(180px,1fr) minmax(130px,.7fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    align-items:end;
    gap:10px 14px;
    max-width:1080px;
    margin:auto;
    padding:clamp(12px,2.2vw,24px);
}
.setup-card h2,.players-section h2 {
    margin:3px 0 0;
    color:#ffe184;
    font-family:Georgia,serif;
    font-size:clamp(21px,3vw,32px);
    line-height:1;
}
.setup-card label { min-width:0; }
label>span,legend {
    display:block;
    margin-bottom:5px;
    color:#cde8d6;
    font-size:11px;
    font-weight:850;
}
input,select {
    width:100%;
    min-height:44px;
    padding:8px 11px;
    border:1px solid #7ab89166;
    border-radius:12px;
    color:#fff;
    background:#020d08;
    outline:none;
}
input:focus,select:focus { border-color:var(--gold); box-shadow:0 0 0 3px #f2cf6228; }
fieldset {
    grid-column:1/-1;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    min-height:0;
    margin:0;
    padding:0;
    border:0;
}
.theme-choices {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(92px,1fr);
    gap:8px;
    min-height:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding:3px 3px 7px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:#cda92c55 transparent;
    touch-action:pan-x;
}
.theme-choices button,.room-toolbar button {
    min-height:44px;
    border:1px solid #4e7d62;
    border-radius:13px;
    color:#d9eee1;
    background:#071a11;
    font-size:10px;
    font-weight:950;
    cursor:pointer;
}
.theme-choices button {
    display:grid;
    grid-template-rows:minmax(52px,1fr) 22px;
    place-items:center;
    gap:2px;
    min-width:92px;
    min-height:88px;
    padding:3px 4px 5px;
    overflow:hidden;
    scroll-snap-align:center;
}
.theme-choices button img {
    width:min(76px,100%);
    height:100%;
    min-height:0;
    object-fit:contain;
    filter:drop-shadow(0 7px 7px #000a);
    pointer-events:none;
    transition:transform .18s ease;
}
.theme-choices button span {
    min-width:0;
    display:grid;
    place-items:center;
    line-height:1.05;
    pointer-events:none;
}
.theme-choices button:hover img,
.theme-choices button:focus-visible img,
.theme-choices button.active img { transform:translateY(-2px) scale(1.06); }
.theme-choices button.active {
    border-color:var(--gold);
    color:#1c1400;
    background:linear-gradient(#ffe37d,#c8951c);
    box-shadow:0 0 18px #ffd54b38;
}

.primary-action,.shake-button,.reveal-dice-button {
    position:relative;
    isolation:isolate;
    min-height:48px;
    overflow:hidden;
    border:1px solid #ffe891;
    border-radius:18px;
    font-weight:1000;
    letter-spacing:.035em;
    cursor:pointer;
    transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.primary-action::after,.shake-button::after,.reveal-dice-button::after {
    content:"";
    position:absolute;
    inset:2px 5px 50% 5px;
    z-index:-1;
    border-radius:999px;
    background:linear-gradient(180deg,#ffffff6b,#ffffff08);
    pointer-events:none;
}
.primary-action,.shake-button {
    color:#171000;
    background:linear-gradient(180deg,#ffec91 0,#efc142 54%,#c58b17 100%);
    box-shadow:0 6px 0 #624307,0 10px 20px #0008,0 0 20px #ffd75232;
}
.reveal-dice-button {
    color:#fff7cd;
    background:linear-gradient(180deg,#9b7a24 0,#6d4d0d 54%,#362403 100%);
    box-shadow:0 6px 0 #211703,0 10px 20px #0008,0 0 20px #ffd95828;
}
.primary-action { grid-column:1/-1; justify-self:center; width:min(310px,100%); padding:8px 20px; }
.primary-action:hover,.shake-button:hover,.reveal-dice-button:hover { filter:brightness(1.08); transform:translateY(-1px); }
.primary-action:active,.shake-button:active,.reveal-dice-button:active { transform:translateY(4px) scale(.98); box-shadow:0 2px 0 #493205,0 5px 10px #0008; }
.primary-action:disabled,.shake-button:disabled,.reveal-dice-button:disabled { opacity:.5; cursor:not-allowed; filter:saturate(.72); transform:none; }
.action-sparkle {
    display:inline-grid;
    place-items:center;
    width:25px;
    height:25px;
    margin-right:4px;
    border:1px solid #fff2aa99;
    border-radius:50%;
    background:#fff3a53b;
    box-shadow:inset 0 1px #fff9cfaa,0 2px 5px #0005;
    font-size:15px;
}

.status {
    position:absolute;
    z-index:18;
    left:50%;
    bottom:8px;
    max-width:min(92%,620px);
    min-height:0;
    margin:0;
    padding:7px 12px;
    border:1px solid #e6cb6755;
    border-radius:999px;
    color:#e8fff0;
    background:#03110be8;
    box-shadow:0 7px 18px #0008;
    font-size:11px;
    line-height:1.25;
    text-align:center;
    pointer-events:none;
    transform:translateX(-50%);
}
.status:empty { display:none; }

.room-stage:not([hidden]) {
    display:grid;
    grid-template-rows:auto minmax(230px,52%) minmax(0,1fr);
    gap:8px;
    padding:9px;
}
.room-toolbar {
    display:grid;
    grid-template-columns:auto minmax(150px,1fr) auto;
    gap:8px;
    align-items:end;
    min-height:48px;
    padding:5px 7px 7px;
    border-bottom:1px solid #d7bc5340;
}
.room-toolbar>div,.share-field { min-width:0; }
.room-toolbar div>span,.share-field>span {
    display:block;
    margin-bottom:2px;
    color:#92cfa9;
    font-size:8px;
    font-weight:950;
    letter-spacing:.12em;
}
#roomCode { display:block; color:#ffe27d; font-size:20px; line-height:1; letter-spacing:.1em; }
.share-field input { min-height:38px; padding:6px 9px; font-size:11px; text-overflow:ellipsis; }
.room-toolbar button { min-width:86px; min-height:38px; padding:6px 12px; border-color:var(--gold); color:#ffe28b; }

.your-cup {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(92px,1fr) auto auto;
    grid-template-areas:"cup" "dice" "actions";
    justify-items:center;
    gap:7px;
    align-items:center;
    min-height:0;
    margin:0;
    padding:8px 12px 12px;
    overflow:hidden;
    border:1px solid #4c9668;
    border-radius:20px;
    background:
        radial-gradient(circle at 12% 50%,#e7c35615 0 2px,transparent 3px),
        radial-gradient(circle at 88% 36%,#a8ffce12 0 2px,transparent 3px),
        radial-gradient(circle at 50% 28%,#11855650,#0c603955 39%,#04180f 76%);
}
.cup-visual {
    grid-area:cup;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    min-height:0;
    filter:drop-shadow(0 15px 16px #000b);
    transform-origin:50% 82%;
}
.cup-visual img {
    display:block;
    width:min(230px,42vw);
    height:100%;
    max-height:210px;
    object-fit:contain;
    user-select:none;
}
.your-cup-copy { grid-area:actions; width:100%; min-width:0; }
.dice-actions { display:flex; justify-content:center; gap:10px; }
.shake-button,.reveal-dice-button {
    display:flex;
    align-items:center;
    justify-content:center;
    width:clamp(138px,18vw,190px);
    padding:7px 12px;
    font-size:12px;
    white-space:nowrap;
}
.your-cup>#yourDice {
    grid-area:dice;
    width:min(650px,100%);
    height:72px;
    min-height:72px;
    padding:7px 12px;
    border:1px solid #e2c45c;
    border-radius:18px;
    background:linear-gradient(180deg,#0a4a31,#052b1d 52%,#031a11);
    box-shadow:inset 0 0 0 3px #0e3625,inset 0 7px 16px #0007,0 7px 13px #0008,0 0 14px #edce6040;
}
.your-cup .dice-position { max-width:min(100%,56px); }
.dice-line {
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);
    justify-content:center;
    align-items:center;
    gap:clamp(4px,.7vw,9px);
    min-width:0;
    min-height:0;
    max-height:100%;
    overflow:visible;
}
.dice-position {
    position:relative;
    display:grid;
    place-items:center;
    width:auto;
    height:100%;
    min-width:0;
    max-width:100%;
    max-height:72px;
    aspect-ratio:1;
    align-self:center;
    justify-self:center;
    border:1px solid #d8bb5968;
    border-radius:24%;
    background:radial-gradient(circle at 45% 34%,#1b6243,#08281a 72%);
    box-shadow:inset 0 0 0 2px #0c3624,0 5px 9px #0008;
    transform-style:preserve-3d;
}
.dice-position .die {
    display:block;
    grid-area:1/1;
    width:90%;
    max-width:66px;
    aspect-ratio:1;
    object-fit:contain;
    filter:drop-shadow(0 8px 8px #000b);
    user-select:none;
}
.dice-position.has-stacked-dice .die,
.dice-position.has-multiple-dice .die {
    width:69%;
    transform:translate(-11%,-11%);
}
.dice-position.has-stacked-dice .die + .die,
.dice-position.has-multiple-dice .legacy-extra-die {
    position:absolute;
    right:-2%;
    bottom:-2%;
    width:69%;
    transform:translate(8%,8%);
}
.dice-cover {
    position:relative;
    grid-area:1/1;
    z-index:3;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
    filter:drop-shadow(0 7px 6px #000b) drop-shadow(0 0 6px #f4cf5942);
    transform-origin:50% 10%;
    will-change:transform,opacity;
}
.dice-cover::after {
    content:'✦';
    position:absolute;
    right:7%;
    top:8%;
    display:grid;
    place-items:center;
    width:12px;
    height:12px;
    color:#fff2a5;
    font-size:9px;
    text-shadow:0 0 7px #fff4a5,0 0 12px #eab831;
}
.dice-cover img {
    width:100%;
    height:100%;
    object-fit:contain;
    transform:translateY(5%) scale(.98,.84);
    transform-origin:50% 82%;
    user-select:none;
}
.dice-rack.is-inactive .dice-cover { opacity:.62; filter:grayscale(.14) drop-shadow(0 5px 5px #0009); }
.dice-position.is-unused .dice-cover,
.dice-position.is-inactive .dice-cover { opacity:.4; filter:grayscale(.45) drop-shadow(0 4px 4px #0008); }
.dice-position.is-unused .dice-cover::after,
.dice-position.is-inactive .dice-cover::after { content:'·'; opacity:.7; }
.dice-position.is-empty::before {
    content:'✧';
    color:#d7bf736b;
    font-size:17px;
}
.cover-reveal-active .dice-position .die { animation:dieUnderCover .36s ease-out var(--reveal-delay,0ms) both; }
.cover-reveal-active .dice-cover.is-lifting { animation:diceCoverLift .42s cubic-bezier(.2,.72,.22,1) var(--reveal-delay,0ms) both; }
.die-reveal-enter { animation:dieSparkleReveal .78s cubic-bezier(.18,.82,.2,1.18) both; }
.revealing-dice { perspective:800px; }
.lucky-star-burst { position:absolute; left:50%; top:50%; z-index:7; width:1px; height:1px; pointer-events:none; }
.lucky-star-burst i { --star-angle:0deg; --star-distance:58px; --star-delay:0ms; position:absolute; left:0; top:0; color:#ffe986; font-style:normal; font-size:18px; text-shadow:0 0 8px #fff4a8,0 0 15px #f1b629; animation:luckyStarFlight 1.15s ease-out var(--star-delay) both; }
@keyframes dieSparkleReveal { 0%{opacity:0;transform:rotateY(190deg) rotateZ(-24deg) scale(.32);filter:brightness(2) blur(5px) drop-shadow(0 0 22px #fff4a8)} 55%{opacity:1;transform:rotateY(24deg) rotateZ(8deg) scale(1.18);filter:brightness(1.35) blur(0) drop-shadow(0 0 20px #ffe36e)} 100%{transform:rotateY(0) rotateZ(0) scale(1);filter:brightness(1) drop-shadow(0 8px 8px #000b)} }
@keyframes dieUnderCover { 0%,28%{opacity:0;transform:scale(.72)} 100%{opacity:1;transform:scale(1)} }
@keyframes diceCoverLift { 0%{opacity:1;transform:translateY(0) rotateX(0) rotateZ(0)} 48%{opacity:1;transform:translateY(-22%) rotateX(18deg) rotateZ(-2deg)} 100%{opacity:0;transform:translateY(-112%) rotateX(72deg) rotateZ(-8deg) scale(.88)} }
@keyframes luckyStarFlight { 0%{opacity:0;transform:rotate(var(--star-angle)) translateX(4px) scale(.35)} 22%{opacity:1} 100%{opacity:0;transform:rotate(var(--star-angle)) translateX(var(--star-distance)) rotate(210deg) scale(1.05)} }
.your-cup.shaking .cup-visual { animation:cupShake .14s ease-in-out 8 alternate; }
.your-cup.shaking .dice-line { opacity:.35; filter:blur(4px); transform:translateY(7px) scale(.86); }
@keyframes cupShake { from{transform:translateX(-8px) rotate(-5deg) scale(1.04,.9)} to{transform:translateX(8px) rotate(5deg) scale(.97,1.04)} }

.players-section {
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    min-height:0;
    overflow:hidden;
    padding:6px;
    border:1px solid #cdb24d80;
    border-radius:18px;
    background:linear-gradient(180deg,#052118e8,#020e09f2);
    box-shadow:inset 0 0 26px #0006;
}
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:10px; min-height:34px; margin:0 4px 5px; }
.section-heading>strong { color:#b5e9c7; font-size:11px; white-space:nowrap; }
.players-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:minmax(68px,auto);
    align-content:start;
    gap:7px;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    padding:2px 7px 5px 2px;
    scroll-snap-type:y proximity;
    scrollbar-width:thin;
    scrollbar-color:#cda92c55 transparent;
    touch-action:pan-y;
    overscroll-behavior:contain;
}
.player-card {
    position:relative;
    display:grid;
    grid-template-columns:clamp(42px,6vw,62px) minmax(78px,18%) minmax(0,1fr);
    grid-template-areas:"avatar identity dice";
    align-items:center;
    gap:clamp(5px,1vw,11px);
    min-height:68px;
    min-width:0;
    padding:7px clamp(39px,5.2vw,56px) 7px 8px;
    overflow:visible;
    border:1px solid #315c41;
    border-radius:16px;
    background:linear-gradient(110deg,#03130c,#061d13 55%,#021009);
    scroll-snap-align:start;
}
.player-card.you { border-color:var(--gold); box-shadow:0 0 0 1px #f2cf6250 inset,0 0 16px #f4d26328; }
.player-card header { grid-area:identity; min-width:0; margin:0; }
.player-card h3 { margin:0; overflow:hidden; color:#fff1aa; font-size:14px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.player-card small { display:block; overflow:hidden; margin-top:3px; color:#83bd98; font-size:9px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.you-label { color:#ffd968; font-weight:1000; }
.player-dice-status {
    overflow:visible !important;
    color:#a9e8be !important;
    font-weight:850;
    line-height:1.05 !important;
    letter-spacing:.035em;
    white-space:normal !important;
    text-overflow:clip !important;
}
.player-roll { display:contents; }
.player-card-cup { grid-area:avatar; display:block; width:100%; height:58px; object-fit:contain; filter:drop-shadow(0 7px 7px #000b); }
.player-card .dice-line { grid-area:dice; width:100%; height:54px; gap:clamp(2px,.45vw,6px); }
.player-card .dice-position { max-width:min(100%,54px); }
.player-card .dice-rack.is-hidden .dice-position {
    border-color:transparent;
    background:transparent;
    box-shadow:none;
}
.player-card .dice-cover img { transform:translateY(3%) scale(.99,.94); }
.player-card.lucky-charm-host { --lucky-charm-size:clamp(38px,4.5vw,50px); --lucky-charm-top:-4px; --lucky-charm-right:2px; overflow:visible; }
.concealed-dice { display:grid; justify-items:start; align-content:center; gap:3px; min-height:0; padding:8px; border:1px dashed #65a77d88; border-radius:12px; background:linear-gradient(135deg,#071d13,#020b07); }
.concealed-dice strong { color:#ffe184; font-size:11px; letter-spacing:.06em; }
.concealed-dice small { color:#8ebca0; line-height:1.2; white-space:normal; }

footer {
    min-height:18px;
    padding:3px max(8px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    overflow:hidden;
    border-top:1px solid #d6b85342;
    color:#9bb4a4;
    background:#020906;
    font-size:8px;
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
    text-overflow:ellipsis;
}

@media (max-width:700px) {
    .cup-header { min-height:54px; padding-top:5px; padding-bottom:5px; }
    .cup-brand img { width:102px; }
    .back-link { min-height:42px; padding:7px 10px; font-size:8.5px; }
    .cup-shell { width:calc(100% - 8px); padding:4px 0; }
    .setup-card,.room-stage { border-radius:17px; }
    .setup-card {
        grid-template-columns:minmax(0,1fr) 92px;
        grid-template-rows:auto auto minmax(0,1fr) auto;
        align-items:end;
        gap:6px 8px;
        padding:8px;
    }
    .setup-card>div { grid-column:1/-1; }
    .setup-card h2 { font-size:20px; }
    .setup-card>label:nth-of-type(1) { grid-column:1; }
    .setup-card>label:nth-of-type(2) { grid-column:2; }
    .setup-card fieldset { grid-row:3; }
    .theme-choices { grid-auto-columns:86px; gap:6px; }
    .theme-choices button { min-width:86px; min-height:82px; grid-template-rows:minmax(48px,1fr) 20px; font-size:8px; }
    .primary-action { grid-row:4; min-height:44px; }
    .room-stage:not([hidden]) { grid-template-rows:46px minmax(232px,47%) minmax(0,1fr); gap:5px; padding:5px; }
    .room-toolbar { grid-template-columns:65px minmax(0,1fr) 69px; gap:5px; min-height:46px; padding:2px 3px 5px; }
    .room-toolbar div>span,.share-field>span { font-size:7px; }
    #roomCode { font-size:15px; letter-spacing:.05em; }
    .share-field input { min-height:34px; padding:5px 7px; font-size:9px; }
    .room-toolbar button { min-width:0; min-height:34px; padding:4px 6px; font-size:8px; }
    .your-cup {
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:minmax(76px,1fr) auto 46px;
        grid-template-areas:"cup" "dice" "actions";
        gap:4px;
        padding:6px 7px;
        border-radius:16px;
    }
    .cup-visual img { width:min(126px,34vw); max-height:116px; }
    .your-cup>#yourDice { height:52px; min-height:52px; padding:4px 7px; border-radius:14px; }
    .your-cup-copy { align-self:center; }
    .dice-actions { display:flex; justify-content:center; gap:8px; }
    .shake-button,.reveal-dice-button { flex:1 1 0; width:auto; max-width:152px; min-width:0; min-height:42px; padding:5px 7px; border-radius:16px; font-size:10px; }
    .action-sparkle { width:21px; height:21px; margin-right:3px; font-size:12px; }
    .dice-line { gap:clamp(3px,1vw,5px); }
    .your-cup .dice-position { max-width:min(100%,42px); }
    .section-heading { min-height:29px; margin:0 3px 3px; }
    .section-heading .step-label { font-size:7px; }
    .players-section h2 { font-size:19px; }
    .players-grid { grid-auto-rows:minmax(61px,auto); gap:5px; padding-right:5px; }
    .player-card {
        grid-template-columns:40px minmax(65px,20%) minmax(0,1fr);
        gap:5px;
        min-height:61px;
        padding:5px 35px 5px 6px;
        border-radius:14px;
    }
    .player-card h3 { font-size:12px; }
    .player-card small { font-size:8px; }
    .player-card-cup { height:52px; }
    .player-card .dice-line { height:46px; }
    .player-card .dice-position { max-width:min(100%,43px); }
    .player-card.lucky-charm-host { --lucky-charm-size:34px; --lucky-charm-top:-3px; --lucky-charm-right:1px; }
    .status { bottom:5px; padding:5px 9px; font-size:9px; }
}

@media (max-width:370px) {
    .cup-brand img { width:92px; }
    .back-link { padding-inline:8px; font-size:8px; }
    .room-stage:not([hidden]) { grid-template-rows:44px minmax(224px,46%) minmax(0,1fr); }
    .room-toolbar { grid-template-columns:60px minmax(0,1fr) 62px; }
    .your-cup { grid-template-rows:minmax(70px,1fr) auto 44px; }
    .cup-visual img { width:112px; max-height:100px; }
    .your-cup .dice-position { max-width:min(100%,38px); }
    .shake-button,.reveal-dice-button { max-width:143px; font-size:9px; }
    .player-card { grid-template-columns:36px 59px minmax(0,1fr); gap:4px; padding-right:31px; }
    .player-card-cup { height:46px; }
    .player-card .dice-line { gap:2px; }
    .player-card .dice-line { height:40px; }
    .player-card .dice-position { max-width:min(100%,38px); }
    .player-card.lucky-charm-host { --lucky-charm-size:30px; }
    footer { font-size:7px; }
}

@media (max-height:700px) {
    .cup-header { min-height:48px; }
    .cup-brand img { width:88px; }
    .back-link { min-height:38px; }
    .cup-shell { padding:3px 0; }
    .room-stage:not([hidden]) { grid-template-rows:42px minmax(208px,45%) minmax(0,1fr); gap:4px; padding:4px; }
    .room-toolbar { min-height:42px; }
    .your-cup { grid-template-rows:minmax(62px,1fr) auto 40px; }
    .cup-visual img { width:98px; max-height:84px; }
    .your-cup>#yourDice { height:46px; min-height:46px; }
    .your-cup .dice-position { max-width:min(100%,36px); }
    .shake-button,.reveal-dice-button { min-height:38px; }
    .section-heading { min-height:25px; }
    .players-section h2 { font-size:17px; }
    .players-grid { grid-auto-rows:minmax(54px,auto); gap:4px; }
    .player-card { min-height:54px; }
    .player-card-cup { height:44px; }
    .player-card .dice-line { height:38px; }
    footer { min-height:15px; padding-block:2px; font-size:7px; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; }
    .your-cup.shaking .cup-visual,.die-reveal-enter,.lucky-star-burst i,
    .cover-reveal-active .dice-position .die { animation:none !important; }
    .cover-reveal-active .dice-cover.is-lifting { display:none !important; animation:none !important; }
    .primary-action,.shake-button,.reveal-dice-button { transition:none; }
}

/* 2026-09-08: short screens may scroll instead of clipping the dice/roster. */
html, body {
    height: auto;
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
}
body { display: block; }
.cup-shell {
    height: auto;
    min-height: calc(100dvh - 86px);
    overflow: visible;
}
.setup-card, .room-stage {
    height: auto;
    min-height: calc(100dvh - 104px);
    overflow: visible;
}
.room-stage:not([hidden]) {
    grid-template-rows: auto minmax(300px, auto) minmax(180px, auto);
}
.players-section,
.players-grid {
    max-height: none;
    overflow: visible;
}
footer { white-space: normal; }


/* =========================================================
   PHONE LAYOUT CORRECTIONS
   - the room code was being overlapped by the invite field
   - the player's own cup is the hero of the screen and was tiny
   - the room list left a large empty area under a short roster
   ========================================================= */

@media (max-width:700px) {

    /* Room code on its own line so it can never collide with the
       invite link, which now spans the full width beneath it. */
    .room-toolbar {
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:
            "code copy"
            "share share";
        align-items:center;
        gap:4px 8px;
        min-height:0;
        padding:5px 4px 7px;
    }
    .room-toolbar>div:first-child { grid-area:code; }
    .share-field { grid-area:share; }
    .room-toolbar button { grid-area:copy; min-height:36px; padding:5px 10px; font-size:9px; }
    #roomCode { font-size:19px; letter-spacing:.08em; white-space:nowrap; }
    .room-toolbar div>span,.share-field>span { font-size:7.5px; }
    .share-field input { min-height:32px; font-size:10px; }

    /* Give the cup stage the space it deserves and shrink the roster
       block so a one-player room is not mostly empty green. */
    .room-stage:not([hidden]) {
        grid-template-rows:auto minmax(250px,54%) minmax(0,1fr);
        gap:6px;
    }

    /* The player's own cup is the hero element. */
    .cup-visual img {
        width:min(210px,54vw);
        max-height:none;
    }

    .your-cup {
        grid-template-rows:minmax(120px,1fr) auto 48px;
        gap:6px;
        padding:8px;
    }

    /* Keep the charm inside the row instead of hanging past its edge. */
    .players-grid { padding-right:12px; }
}

@media (max-width:370px) {
    .cup-visual img { width:min(180px,56vw); }
    #roomCode { font-size:17px; }
}

@media (max-height:700px) {
    .cup-visual img { width:min(150px,42vw); }
    .room-stage:not([hidden]) { grid-template-rows:auto minmax(190px,48%) minmax(0,1fr); }
}


/* =========================================================
   THEME PREVIEW
   Fills the empty middle of the setup card with a large view
   of the selected cup and the six dice faces that match it,
   so a player can see what they are choosing.
   ========================================================= */

.theme-preview {
    display:grid;
    grid-template-rows:minmax(0,1fr) auto auto;
    justify-items:center;
    align-content:center;
    gap:10px;
    min-height:0;
    padding:12px 10px;
    border:1px solid #d5b94e4d;
    border-radius:18px;
    background:
        radial-gradient(120% 80% at 50% 12%,#1b7a4a3d,transparent 70%),
        linear-gradient(180deg,#08301fb8,#03150ddb);
    box-shadow:inset 0 0 30px #0007;
}

.theme-preview-cup {
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:drop-shadow(0 14px 22px #000a);
}

.theme-preview-dice {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
}

.theme-preview-die {
    width:clamp(28px,6vw,42px);
    height:auto;
    filter:drop-shadow(0 4px 8px #0008);
}

.theme-preview-name {
    color:#ffe28b;
    font-size:12px;
    font-weight:950;
    letter-spacing:.16em;
    text-align:center;
}

/* Desktop: the preview sits in the middle column of the setup card. */
@media (min-width:701px) {
    .theme-preview { grid-column:2/4; grid-row:2; }
    .theme-preview-cup { max-height:min(340px,38vh); }
}

/* Phone: the preview takes over the empty area above the theme picker. */
@media (max-width:700px) {
    .setup-card {
        grid-template-rows:auto auto minmax(0,1fr) auto auto;
    }
    .theme-preview {
        grid-column:1/-1;
        grid-row:3;
        gap:8px;
        padding:10px 8px;
    }
    .theme-preview-cup { max-height:min(240px,30vh); }
    .setup-card fieldset { grid-row:4; }
    .primary-action { grid-row:5; }
    .theme-preview-die { width:clamp(26px,8vw,38px); }
    .theme-preview-name { font-size:11px; }
}

@media (max-height:700px) {
    .theme-preview-cup { max-height:22vh; }
    .theme-preview-die { width:26px; }
}