.room-shell{min-height:calc(100dvh - 84px);max-width:1220px;margin:auto;padding:58px 32px 42px;display:grid;grid-template-columns:1fr 440px;gap:88px;align-items:center}.room-intro h1{font:clamp(62px,7vw,98px)/.86 "DM Serif Display";letter-spacing:-.045em;margin:15px 0 30px}.room-intro h1 em{color:var(--wine);font-weight:400}.room-intro>p:last-child{max-width:520px;color:var(--muted);font-size:16px;line-height:1.7}.room-forms{background:var(--white);border:1px solid var(--ink);border-radius:10px;padding:12px;box-shadow:0 24px 55px -35px var(--wine),9px 11px 0 var(--wine)}.room-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.room-tabs button{min-height:45px;border:0;border-radius:6px;background:transparent;font-size:11px;font-weight:800;letter-spacing:.12em}.room-tabs button.active{background:var(--wine);color:#fff}.room-form{padding:26px 20px 15px}.room-form label{display:grid;gap:9px;margin-bottom:19px;font-size:10px;font-weight:800;letter-spacing:.13em}.room-form input,.room-form select,.room-form textarea{width:100%;border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:0 15px;outline:0;font:500 14px/1.5 "Instrument Sans"}.room-form input,.room-form select{height:53px}.room-form textarea{padding:13px 15px;resize:vertical;min-height:150px}.room-form input:focus,.room-form select:focus,.room-form textarea:focus{border-color:var(--wine)}.room-form .code-input{text-transform:uppercase;font:26px "DM Serif Display";letter-spacing:.24em}.room-form>button{width:100%;height:52px;border:0;border-radius:6px;background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:10px;font-weight:800;letter-spacing:.13em}.room-error{min-height:20px;margin:0 20px;color:var(--hide);font-size:12px}.custom-deck-builder{margin:-4px 0 22px;padding:15px;border:1px solid color-mix(in srgb,var(--wine) 24%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--wine) 4%,var(--paper))}.custom-deck-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.custom-deck-head small{display:block;color:var(--wine);font-size:8px;font-weight:800;letter-spacing:.16em}.custom-deck-head strong{display:block;margin-top:3px;font:20px "DM Serif Display"}.custom-deck-head>i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--wine);color:#fff;font-size:18px}.custom-deck-builder label{margin-bottom:13px}.custom-deck-row{display:grid;grid-template-columns:1fr 76px;gap:9px}.custom-deck-row label:last-child input{padding:5px}.builder-hint{font-weight:500;letter-spacing:0;color:var(--muted);text-transform:none}.custom-deck-tools{display:flex;align-items:center;justify-content:space-between;gap:10px}.custom-deck-tools>span{color:var(--muted);font-size:11px}.custom-deck-tools>div{display:flex;gap:6px}.custom-deck-tools button{min-height:35px;padding:0 10px;border:1px solid var(--line);border-radius:5px;background:var(--white);font-size:8px;font-weight:800;letter-spacing:.08em}.custom-deck-tools #save-custom-deck{border-color:var(--wine);color:var(--wine)}

.room-live{grid-column:1/-1;width:100%;--room-color:var(--wine)}.room-live-top{min-height:56px;margin-bottom:22px;padding:8px 10px 8px 15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}.connection-state{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.11em}.connection-state>i{width:8px;height:8px;border-radius:50%;background:var(--say);box-shadow:0 0 0 5px color-mix(in srgb,var(--say) 10%,transparent)}.connection-state.reconnecting>i{background:#bc7b1f;box-shadow:0 0 0 5px color-mix(in srgb,#bc7b1f 10%,transparent);animation:roomPulse 1s infinite}.connection-state.error>i{background:var(--hide)}.room-code-ticket{height:42px;padding:0 7px 0 14px;border:1px solid color-mix(in srgb,var(--room-color) 30%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--room-color) 6%,var(--white));display:flex;align-items:center;gap:10px;color:var(--ink);box-shadow:0 11px 24px -20px var(--room-color);transition:.22s}.room-code-ticket:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--room-color) 48%,var(--line))}.room-code-ticket span{color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.13em}.room-code-ticket strong{font:20px "DM Serif Display";letter-spacing:.11em;color:var(--room-color)}.room-code-ticket i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--room-color);color:#fff;font-size:14px}#room-round{justify-self:end;padding:9px 13px;border:1px solid color-mix(in srgb,var(--room-color) 25%,var(--line));border-radius:999px;background:var(--white);font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--room-color)}

.room-layout{display:grid;grid-template-columns:275px minmax(0,1fr) 95px;gap:28px;align-items:start}.room-layout::after{content:""}.room-sidebar{margin-top:44px;min-width:0}.players-panel{position:relative;padding:0 18px 16px 0;background:transparent}.players-panel::before{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--line) 12%,var(--line) 88%,transparent)}.players-panel>header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:17px;padding-bottom:13px;border-bottom:1px solid var(--line)}.players-panel>header small{display:block;color:var(--room-color);font-size:9px;font-weight:800;letter-spacing:.14em}.players-panel h2{margin:4px 0 0;font:28px/.95 "DM Serif Display"}.players-panel>header>span{min-width:37px;height:31px;padding:0 9px;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--room-color) 8%,var(--white));color:var(--room-color);font-size:11px;font-weight:800}#players{display:grid;gap:5px}.room-player{position:relative;min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 8px 10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent);transition:opacity .25s,transform .25s}.room-player:last-child{border-bottom:0}.room-player::before{content:"";position:absolute;left:-10px;width:3px;height:0;border-radius:3px;background:var(--room-color);transition:height .25s}.room-player:not(.is-offline)::before{height:28px}.room-player.is-offline{opacity:.42}.player-avatar{position:relative;flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--room-color) 8%,var(--white));border:1px solid color-mix(in srgb,var(--room-color) 18%,var(--line));color:var(--room-color);font:16px "DM Serif Display"}.player-avatar>i{position:absolute;right:0;bottom:1px;width:10px;height:10px;border:2px solid var(--paper);border-radius:50%;background:var(--say)}.is-offline .player-avatar>i{background:var(--muted)}.room-player>div{min-width:0;display:grid;gap:3px}.room-player>div b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.room-player>div b em{margin-left:7px;padding:2px 5px;border-radius:3px;background:color-mix(in srgb,var(--room-color) 8%,transparent);color:var(--room-color);font-size:7px;font-style:normal;letter-spacing:.08em}.room-player>div small{color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.07em}.host-crown{margin-left:auto;color:var(--room-color);font-size:17px}.players-note{margin:14px 0 0;display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:9px;line-height:1.45}.players-note i{margin-top:1px;font-size:14px;color:var(--room-color)}

.room-play-column{min-width:0;display:flex;flex-direction:column;align-items:center}.room-deck-meta{min-height:39px;margin-bottom:7px;padding:4px 13px 4px 5px;border:1px solid color-mix(in srgb,var(--room-color) 25%,var(--line));border-radius:999px;display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--room-color) 5%,rgba(255,250,240,.9));font-size:10px;font-weight:800;letter-spacing:.13em;box-shadow:0 12px 25px -20px var(--room-color)}.room-deck-meta[hidden]{visibility:hidden;display:flex}.room-deck-meta>i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--room-color);color:#fff;font-size:15px}.room-deck-meta>b{padding:4px 6px;border-radius:4px;background:var(--room-color);color:#fff;font-size:7px;letter-spacing:.1em}.room-card-stage{position:relative;width:min(100%,540px);height:518px;display:grid;place-items:center;isolation:isolate;perspective:900px}.room-back,.room-card{position:absolute;width:min(86vw,382px);height:494px;border-radius:11px}.room-back{z-index:0;overflow:hidden;background:var(--room-color);border:1px solid rgba(255,255,255,.38);box-shadow:0 21px 42px -27px color-mix(in srgb,var(--room-color) 78%,transparent);transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1),background .35s}.room-back::before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.31);border-radius:4px;background:repeating-radial-gradient(circle at 0 0,transparent 0 9px,rgba(255,255,255,.06) 10px 11px)}.room-back-two{transform:rotate(-4.4deg) translate(-10px,6px);filter:brightness(.87)}.room-back-one{z-index:1;transform:rotate(3.3deg) translate(11px,3px)}.room-card-stage.is-lobby .room-back,.room-card-stage.is-finished .room-back{opacity:.24;transform:rotate(0) translateY(7px) scale(.97)}.room-card{--swipe-opacity:0;z-index:3;display:grid;place-items:center;overflow:hidden;text-align:center;touch-action:none;user-select:none;cursor:grab;background:repeating-linear-gradient(45deg,rgba(23,19,15,.016) 0 1px,transparent 1px 9px),var(--white);border:1px solid color-mix(in srgb,var(--room-color) 34%,rgba(23,19,15,.35));box-shadow:0 32px 62px -28px color-mix(in srgb,var(--room-color) 63%,transparent),0 13px 27px -21px color-mix(in srgb,var(--room-color) 72%,transparent);transition:transform .3s cubic-bezier(.22,.72,.2,1),opacity .27s}.room-card.dragging{transition:none;cursor:grabbing}.room-card::before{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--room-color) 18%,transparent);border-radius:5px;pointer-events:none}.room-card.deal-in{animation:roomDeal .55s cubic-bezier(.2,.82,.2,1) both}.room-card.is-revealed{cursor:default;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--room-color) 11%,transparent),transparent 39%),repeating-linear-gradient(45deg,rgba(23,19,15,.016) 0 1px,transparent 1px 9px),var(--white)}.room-card .swipe-overlay{z-index:12}.room-card.to-say .say-overlay{opacity:var(--swipe-opacity)}.room-card.to-hide .hide-overlay{opacity:var(--swipe-opacity)}.room-corner{position:absolute;z-index:3;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;color:var(--room-color);background:color-mix(in srgb,var(--room-color) 7%,transparent)}.room-corner.top{left:20px;top:20px}.room-corner.bottom{right:20px;bottom:20px}.room-corner i{font-size:18px}.room-wait,.room-question{position:relative;z-index:2;width:100%;max-width:370px;padding:42px 31px}.room-wait>i{width:61px;height:61px;margin:auto;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--room-color) 8%,transparent);color:var(--room-color);font-size:29px}.room-wait>small{display:block;margin-top:17px;color:var(--room-color);font-size:10px;font-weight:800;letter-spacing:.16em}.room-wait h1{font:42px/.98 "DM Serif Display";margin:8px 0 13px}.room-wait p{color:var(--muted);font-size:13px;line-height:1.55}.room-question>small{color:var(--room-color);font-size:10px;font-weight:800;letter-spacing:.17em}.room-question h1{font:clamp(32px,4vw,43px)/1.05 "DM Serif Display";font-weight:400;margin:22px 0 28px}.room-card-suit{width:46px;height:46px;margin:auto;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--room-color) 8%,transparent);color:var(--room-color);font-size:22px}.room-vote-progress{margin:18px 0 0;color:var(--muted);font-size:12px}.room-vote-progress b{color:var(--ink);font-size:14px}.room-my-vote{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--room-color) 7%,transparent);color:var(--room-color);font-size:10px;font-weight:800;letter-spacing:.08em}.room-reveal-title{width:max-content;margin:2px auto 17px;padding:6px 14px 6px 7px;border-radius:999px;display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--room-color) 8%,transparent);color:var(--room-color);font-size:11px;font-weight:800;letter-spacing:.11em}.room-reveal-title i{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--room-color);color:#fff;font-size:16px}.room-results{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-height:145px;overflow:auto;padding:2px}.room-results span{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(241,236,223,.58);font-size:12px;font-weight:700}.room-results span i{margin-right:3px;font-size:14px}.room-results .say{border-color:color-mix(in srgb,var(--say) 32%,var(--line));color:var(--say)}.room-results .hide{border-color:color-mix(in srgb,var(--hide) 32%,var(--line));color:var(--hide)}.room-countdown{height:3px;margin:20px 4px 8px;background:var(--line);overflow:hidden;border-radius:99px}.room-countdown i{display:block;height:100%;width:100%;background:var(--room-color);transform-origin:left;animation:roomCountdown var(--result-duration,4s) linear both}.auto-next{color:var(--muted)!important;font-size:9px!important;letter-spacing:.06em!important}.room-swipe-guide{width:min(100%,540px);min-height:58px;margin-top:4px;display:grid;grid-template-columns:1fr auto 1fr;gap:31px;align-items:center}.room-swipe-guide[hidden]{display:none}.room-swipe-guide button{border:0;background:none;padding:11px 2px;display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.12em}.room-swipe-guide button:first-child{justify-content:flex-end;color:var(--hide)}.room-swipe-guide button:last-child{justify-content:flex-start;color:var(--say)}.room-swipe-guide button i{font-size:21px}.room-drag-guide{min-width:88px;display:flex;flex-direction:column;align-items:center;color:var(--muted)}.room-drag-guide i{font-size:20px;animation:nudge 1.8s ease-in-out infinite}.room-drag-guide small{font-size:8px;letter-spacing:.12em}.room-actions{width:min(100%,530px);min-height:52px;margin-top:2px;display:flex;align-items:center;justify-content:center;gap:16px}.room-actions button,.room-new{min-height:48px;padding:0 25px;border:1px solid var(--ink);border-radius:6px;background:var(--white);display:flex;align-items:center;justify-content:center;gap:11px;font-size:10px;font-weight:800;letter-spacing:.11em;transition:.22s}.room-actions button:hover,.room-new:hover{transform:translateY(-2px);box-shadow:0 15px 28px -22px currentColor}.room-actions button.primary,.room-new{background:var(--ink);color:#fff}.room-actions button i,.room-new i{font-size:18px}.room-waiting-line{width:100%;min-height:46px;padding:9px 16px;border:1px solid color-mix(in srgb,var(--room-color) 14%,var(--line));border-radius:7px;background:color-mix(in srgb,var(--room-color) 3%,var(--white));display:flex!important;align-items:center;justify-content:center;gap:9px;color:var(--muted)!important;font-size:12px!important}.room-waiting-line i{color:var(--room-color);font-size:17px}.room-waiting-line b{color:var(--ink)}.room-waiting-line.is-reveal{font-size:11px!important}.final-card{overflow:auto;cursor:default}.room-final{width:100%;padding:26px 28px 28px;text-align:center}.final-icon{width:57px;height:57px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;background:var(--room-color);color:#fff;box-shadow:0 14px 28px -18px var(--room-color);font-size:25px}.room-final>small{color:var(--room-color);font-size:10px;font-weight:800;letter-spacing:.16em}.room-final h1{margin:8px 0 16px;font:38px/.96 "DM Serif Display"}.room-final-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.room-final-stats span{padding:11px 6px;border-radius:6px;background:color-mix(in srgb,var(--room-color) 7%,transparent);color:var(--muted);font-size:9px;text-transform:uppercase}.room-final-stats b{display:block;color:var(--room-color);font:26px "DM Serif Display"}.final-players{display:grid;gap:6px;margin-top:14px;text-align:left}.final-player{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);border-radius:7px;background:rgba(241,236,223,.42)}.final-player>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--room-color) 9%,var(--white));color:var(--room-color);font:13px "DM Serif Display"}.final-player>div{min-width:0;display:grid;gap:2px}.final-player b{font-size:11px}.final-player small{color:var(--muted);font-size:9px}.final-player em{margin-left:auto;color:var(--room-color);font-size:10px;font-style:normal;font-weight:800}

@keyframes roomDeal{from{opacity:0;transform:translateY(25px) rotate(1.5deg) scale(.97)}to{opacity:1;transform:none}}@keyframes roomCountdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes roomPulse{50%{opacity:.35}}
@media(max-width:980px){.room-layout{grid-template-columns:230px minmax(0,1fr);gap:22px}.room-layout::after{display:none}.room-live-top{grid-template-columns:1fr auto auto}.room-card-stage{height:500px}.room-back,.room-card{height:475px}}
@media(max-width:760px){.room-shell{display:block;padding:34px 16px 28px}.room-intro h1{font-size:59px}.room-forms{margin-top:40px}.custom-deck-row{grid-template-columns:1fr 65px}.room-live-top{margin-bottom:9px;padding:7px 0;grid-template-columns:1fr auto;gap:8px}.connection-state{font-size:8px}.room-code-ticket{grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:center;border-radius:7px}.room-code-ticket strong{font-size:22px}.room-code-ticket span{margin-right:auto}.room-code-ticket i{margin-left:auto}#room-round{grid-column:2;grid-row:1;padding:8px 10px}.room-layout{display:flex;flex-direction:column;gap:13px}.room-sidebar{order:2;width:100%;margin-top:0}.players-panel{padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:rgba(255,250,240,.55)}.players-panel::before{display:none}.players-panel>header{margin-bottom:8px;padding-bottom:9px}.players-panel h2{font-size:22px}#players{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 10px}.room-player{grid-template-columns:34px minmax(0,1fr) auto;padding:7px 0}.player-avatar{width:34px;height:34px;flex-basis:34px;font-size:13px}.room-player>div b{font-size:11px}.room-player>div small{font-size:7px}.players-note{display:none}.room-play-column{width:100%}.room-deck-meta{margin-bottom:3px}.room-card-stage{width:100%;height:min(460px,calc(100dvh - 230px));min-height:395px}.room-back,.room-card{width:min(82vw,345px);height:min(438px,calc(100dvh - 248px));min-height:375px}.room-question{padding:35px 28px}.room-question h1{font-size:clamp(29px,8vw,35px)}.room-results span{font-size:11px}.room-swipe-guide{margin-top:1px;gap:15px}.room-actions{margin-top:0}.room-waiting-line{text-align:center;padding:9px 12px;font-size:11px!important}.room-final{padding:21px 21px}.room-final h1{font-size:33px}.final-players{max-height:170px;overflow:auto}.final-player b{font-size:10px}.final-player small{font-size:8px}}
@media(max-width:480px){#players{grid-template-columns:1fr}.room-live-top{align-items:center}.room-code-ticket{height:40px}.room-card-stage{min-height:382px}.room-back,.room-card{min-height:365px}.room-question h1{margin-top:19px}.room-reveal-title{font-size:10px}.room-results{max-height:132px}.room-results span{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.room-card.deal-in,.room-countdown i,.connection-state.reconnecting>i{animation:none}.room-actions button,.room-card,.room-player,.room-code-ticket{transition:none}.room-drag-guide i{animation:none}}
.room-results span{display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left;column-gap:7px;row-gap:1px}.room-results span i{grid-row:1/3}.room-results span b{font-size:12px}.room-results span small{font-size:9px;font-weight:800;letter-spacing:.07em;opacity:.72}

/* v12 — room swipe, deck identity and external reveal */
.room-card.deal-in{animation:roomDeal .55s cubic-bezier(.2,.82,.2,1)}
.room-card.is-question{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--room-color) 9%,transparent) 0,transparent 33%),
    repeating-linear-gradient(45deg,rgba(23,19,15,.016) 0 1px,transparent 1px 9px),
    var(--white);
  border-color:color-mix(in srgb,var(--room-color) 52%,rgba(23,19,15,.28));
  box-shadow:
    inset 0 4px 0 color-mix(in srgb,var(--room-color) 88%,transparent),
    0 32px 62px -28px color-mix(in srgb,var(--room-color) 68%,transparent),
    0 13px 27px -21px color-mix(in srgb,var(--room-color) 74%,transparent);
}
.room-question>small{display:block;max-width:92%;margin-inline:auto;color:var(--room-color);font-size:10px;line-height:1.45;letter-spacing:.145em}
.room-card.dragging{will-change:transform;cursor:grabbing}

.room-result-panel{
  width:min(100%,540px);
  margin:8px auto 5px;
  padding:15px 16px 13px;
  border:1px solid color-mix(in srgb,var(--room-color) 28%,var(--line));
  border-radius:10px;
  background:
    linear-gradient(120deg,color-mix(in srgb,var(--room-color) 8%,transparent),transparent 48%),
    rgba(255,250,240,.84);
  box-shadow:0 20px 44px -34px var(--room-color);
  text-align:left;
  overflow:hidden;
}
.room-result-panel[hidden]{display:none}
.room-result-panel.is-visible{animation:roomResultIn .38s cubic-bezier(.2,.8,.2,1) both}
.room-result-panel>header{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.room-result-panel>header>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--room-color);color:#fff;box-shadow:0 12px 25px -17px var(--room-color)}
.room-result-panel>header>span i{font-size:19px}
.room-result-panel>header>div{min-width:0}
.room-result-panel>header small{display:block;color:var(--room-color);font-size:8px;font-weight:800;letter-spacing:.16em}
.room-result-panel>header h3{margin:2px 0 0;font:25px/1.05 "DM Serif Display";font-weight:400}
.room-result-panel>header em{color:var(--muted);font-size:9px;font-style:normal;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.room-opponent-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}
.room-opponent-result{min-width:0;display:grid;grid-template-columns:37px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(241,236,223,.42)}
.room-opponent-result .result-avatar{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1px solid currentColor;font:14px "DM Serif Display"}
.room-opponent-result>div{min-width:0;display:grid;gap:1px}
.room-opponent-result>div small{font-size:7px;font-weight:800;letter-spacing:.12em;opacity:.56}
.room-opponent-result>div b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.room-opponent-result>strong{display:flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.08em;white-space:nowrap}
.room-opponent-result>strong i{font-size:15px}
.room-opponent-result.say{color:var(--say);border-color:color-mix(in srgb,var(--say) 28%,var(--line));background:color-mix(in srgb,var(--say) 5%,var(--white))}
.room-opponent-result.hide{color:var(--hide);border-color:color-mix(in srgb,var(--hide) 28%,var(--line));background:color-mix(in srgb,var(--hide) 5%,var(--white))}
.solo-result{grid-column:1/-1;margin:0;padding:11px;color:var(--muted);font-size:11px;text-align:center}
.room-result-progress{height:3px;margin-top:12px;border-radius:99px;overflow:hidden;background:var(--line)}
.room-result-progress i{display:block;width:100%;height:100%;background:var(--room-color);transform-origin:left;animation:roomCountdown var(--result-duration,4s) linear both}

.final-player b{font-size:13px}
.final-player small{font-size:12px;line-height:1.25;color:color-mix(in srgb,var(--ink) 64%,var(--muted));font-weight:600}
.final-player em{font-size:11px}

@keyframes roomDeal{from{opacity:0;translate:0 25px;rotate:1.5deg;scale:.97}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes roomResultIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .room-result-panel{margin-top:5px;padding:12px}
  .room-result-panel>header{grid-template-columns:36px minmax(0,1fr);gap:9px}
  .room-result-panel>header>span{width:36px;height:36px}
  .room-result-panel>header h3{font-size:21px}
  .room-result-panel>header em{grid-column:1/-1;padding-top:7px;border-top:1px solid var(--line);text-align:center}
  .room-opponent-results{grid-template-columns:1fr}
  .room-opponent-result{grid-template-columns:35px minmax(0,1fr) auto}
  .final-player b{font-size:12px}
  .final-player small{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.room-result-panel.is-visible,.room-result-progress i{animation:none}.room-card.deal-in{animation:none}}

/* v13 — compact one-screen room table and true deck colors */
.room-live{--room-color:var(--wine)}
body[data-page="rooms"][data-room]:not([data-room=""]){height:100dvh;overflow:hidden}
body[data-page="rooms"][data-room]:not([data-room=""]) .room-shell{
  height:calc(100dvh - 84px);
  min-height:0;
  max-width:none;
  padding:0 clamp(20px,4vw,58px);
  display:block;
  overflow:hidden;
}
.room-live{height:100%;display:flex;flex-direction:column;min-height:0}
.room-live-top{
  flex:0 0 58px;
  min-height:58px;
  margin:0;
  padding:7px 2px;
  border-top:0;
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto auto auto;
  gap:10px;
}
.room-live-top .room-deck-meta{margin:0;min-height:40px;height:40px;box-shadow:none}
.room-live-top .room-deck-meta[hidden]{display:none}
.room-live-top #room-round{height:40px;display:grid;place-items:center;padding:0 14px}
.room-code-ticket{height:40px;box-shadow:none}
.room-layout{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  grid-template-columns:275px minmax(0,1fr) 95px;
  align-items:center;
  overflow:hidden;
}
.room-sidebar{margin-top:0;align-self:center}
.room-play-column{height:100%;min-height:0;justify-content:center;overflow:visible}
.room-card-stage{
  width:min(100%,540px);
  height:min(470px,calc(100dvh - 205px));
  min-height:390px;
  flex:0 1 auto;
}
.room-back,.room-card{
  width:min(86vw,372px);
  height:min(446px,calc(100dvh - 228px));
  min-height:372px;
}
.room-swipe-guide{
  width:min(100%,500px);
  min-height:46px;
  margin-top:2px;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.room-swipe-guide[hidden]{visibility:hidden;display:grid}
.room-swipe-guide button:first-child{justify-self:start}
.room-swipe-guide button:last-child{justify-self:end}
.room-drag-guide{justify-self:center}

/* Reveal is deliberately quieter than the playing card. */
.room-result-panel{
  width:min(100%,500px);
  margin:5px auto 0;
  padding:10px 11px 9px;
  border-radius:8px;
  box-shadow:0 15px 34px -31px var(--room-color);
}
.room-result-panel>header{
  grid-template-columns:30px minmax(0,1fr) auto;
  gap:8px;
  padding-bottom:8px;
}
.room-result-panel>header>span{width:30px;height:30px;box-shadow:none}
.room-result-panel>header>span i{font-size:14px}
.room-result-panel>header small{font-size:7px}
.room-result-panel>header h3{margin-top:1px;font:17px/1.05 "DM Serif Display"}
.room-result-panel>header em{font-size:8px}
.room-opponent-results{gap:6px;margin-top:8px}
.room-opponent-result{grid-template-columns:31px minmax(0,1fr) auto;gap:7px;padding:7px 8px;border-radius:6px}
.room-opponent-result .result-avatar{width:31px;height:31px;font-size:12px}
.room-opponent-result>div b{font-size:11px}
.room-opponent-result>strong{font-size:9px}
.room-opponent-result>strong i{font-size:13px}
.room-result-progress{height:2px;margin-top:8px}

/* The current deck owns the visual identity of the entire play area. */
.room-card.is-question{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--room-color) 13%,transparent) 0,transparent 35%),
    repeating-linear-gradient(45deg,color-mix(in srgb,var(--room-color) 3%,transparent) 0 1px,transparent 1px 9px),
    color-mix(in srgb,var(--room-color) 3%,var(--white));
  border-color:color-mix(in srgb,var(--room-color) 58%,var(--line));
}
.room-corner,.room-card-suit,.room-question>small,.room-vote-progress b{color:var(--room-color)}
.room-card-suit{background:color-mix(in srgb,var(--room-color) 9%,var(--white))}
.room-back{background:var(--room-color)!important}

@media(max-width:980px) and (min-width:761px){
  .room-layout{grid-template-columns:220px minmax(0,1fr);gap:18px}
  .room-live-top{grid-template-columns:1fr auto auto auto}
  .room-card-stage{height:min(490px,calc(100dvh - 205px))}
}
@media(max-width:760px){
  body[data-page="rooms"][data-room]:not([data-room=""]){height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-shell{height:auto;min-height:calc(100dvh - 70px);padding:0 16px 24px;overflow:visible}
  .room-live-top{min-height:auto;flex:none;padding:8px 0;grid-template-columns:1fr auto;gap:7px}
  .connection-state{grid-column:1;grid-row:1}
  #room-round{grid-column:2;grid-row:1}
  .room-code-ticket{grid-column:1/-1;grid-row:2}
  .room-live-top .room-deck-meta{grid-column:1/-1;grid-row:3;justify-self:center}
  .room-layout{height:auto;overflow:visible;align-items:start}
  .room-play-column{height:auto;overflow:visible}
  .room-card-stage{height:min(445px,calc(100dvh - 245px));min-height:380px}
  .room-back,.room-card{height:min(422px,calc(100dvh - 266px));min-height:360px}
  .room-swipe-guide{width:min(100%,390px);margin-top:0}
  .room-result-panel{width:min(100%,390px)}
  .room-result-panel>header{grid-template-columns:28px minmax(0,1fr) auto}
  .room-result-panel>header>span{width:28px;height:28px}
  .room-result-panel>header h3{font-size:16px}
  .room-result-panel>header em{grid-column:auto;padding:0;border:0;text-align:right;font-size:7px}
}

/* v14 — shared /oyna card component + full-height table layout */
@media(min-width:761px){
  body[data-page="rooms"][data-room]:not([data-room=""]){height:100dvh;overflow:hidden}
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-shell{height:calc(100dvh - 84px);min-height:0;max-width:none;padding:0;display:block;overflow:hidden}
  .room-live{height:100%;min-height:0;display:flex;flex-direction:column}
  .room-live-top{width:100%;flex:0 0 52px;min-height:52px;margin:0;padding:0;border-top:0;border-bottom:1px solid var(--line);background:rgba(241,236,223,.72)}
  .room-live-top-inner{width:100%;height:100%;padding:0 clamp(22px,5vw,76px);display:grid;grid-template-columns:minmax(190px,1fr) auto minmax(110px,auto) minmax(180px,1fr);align-items:center;gap:18px}
  .room-layout{flex:1 1 auto;min-height:0;height:auto;padding:0 clamp(22px,5vw,76px) 0 0;display:grid;grid-template-columns:290px minmax(0,1fr);gap:0;align-items:stretch;overflow:hidden}
  .room-sidebar{height:100%;min-height:0;margin:0;align-self:stretch;border-right:1px solid var(--line);padding:26px 24px 22px clamp(22px,5vw,76px)}
  .players-panel{height:100%;min-height:0;padding:0;display:flex;flex-direction:column}
  .players-panel::before{display:none}
  #players{min-height:0;overflow:auto;padding-right:4px}
  .players-note{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
  .room-play-column{position:relative;height:100%;min-height:0;padding:0 0 0 28px;display:flex;flex-direction:column;align-items:center;justify-content:stretch;overflow:visible}
  .room-card-stage.game-stage{width:min(100%,520px);height:auto;min-height:410px;flex:1 1 auto;margin:0;display:grid;place-items:center;overflow:visible}
  .room-swipe-guide.swipe-guide{width:min(100%,610px);min-height:54px;flex:0 0 54px;margin:0;display:grid;grid-template-columns:1fr auto 1fr;gap:38px;align-items:center}
  .room-swipe-guide[hidden]{display:grid;visibility:hidden}
  .room-actions{position:absolute;left:50%;bottom:58px;z-index:14;width:min(100%,520px);min-height:0;margin:0;transform:translateX(-50%);pointer-events:none}
  .room-actions>*{pointer-events:auto}
}

/* The room uses the exact same playing-card geometry and typography as /oyna. */
.room-card-stage .room-card.question-card,
.room-card-stage .room-back.back-card{width:min(86vw,390px);height:min(525px,calc(100dvh - 245px));min-height:395px;border-radius:10px}
.room-card-stage .room-card.question-card{
  background:repeating-linear-gradient(45deg,rgba(23,19,15,.016) 0 1px,transparent 1px 9px),var(--white);
  border:1px solid color-mix(in srgb,var(--active-deck) 36%,rgba(23,19,15,.35));
  box-shadow:0 28px 55px -25px color-mix(in srgb,var(--active-deck) 58%,transparent),0 10px 24px -18px color-mix(in srgb,var(--active-deck) 72%,transparent);
}
.room-card-stage .room-card.question-card::before{display:none}
.room-card-stage .room-card.question-card.is-revealed{background:repeating-linear-gradient(45deg,rgba(23,19,15,.016) 0 1px,transparent 1px 9px),var(--white)}
.room-card-stage .room-card.question-card .question-content{position:relative;z-index:3;text-align:center;padding:43px}
.room-card-stage .room-card.question-card .question-content small{color:var(--active-deck);font-size:10px;font-weight:700;letter-spacing:.2em}
.room-card-stage .room-card.question-card .question-content h2{margin:20px 0 34px;font:400 clamp(30px,4vw,39px)/1.12 "DM Serif Display"}
.room-card-stage .room-card.question-card .question-content>i{width:43px;height:43px;margin:auto;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--active-deck) 8%,transparent);color:var(--active-deck);font-size:22px}
.room-card-stage .room-card.question-card .corner{color:var(--active-deck);background:color-mix(in srgb,var(--active-deck) 7%,transparent)}
.room-card-stage .room-back.back-card{background:var(--back-color,var(--active-deck))!important;border:1px solid rgba(255,255,255,.43);box-shadow:0 15px 30px -22px color-mix(in srgb,var(--back-color,var(--active-deck)) 72%,transparent);transition:background .32s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.room-card-stage .room-back.back-card::before{inset:9px;border:1px solid rgba(255,255,255,.35);border-radius:3px;background-image:repeating-radial-gradient(circle at 0 0,transparent 0 9px,rgba(255,255,255,.055) 10px 11px)}
.room-card-stage .room-back-two.back-two{transform:rotate(-4.4deg) translate(-8px,4px);filter:brightness(.9) saturate(.9)}
.room-card-stage .room-back-one.back-one{transform:rotate(3.1deg) translate(9px,0)}

/* Meta strip: category — room code — round, aligned to the global header container. */
.room-live-top .room-deck-meta{justify-self:start;min-height:34px;height:34px;margin:0;padding:3px 11px 3px 4px;box-shadow:none;background:transparent}
.room-live-top .room-deck-meta>i{width:26px;height:26px;font-size:14px}
.room-live-top .room-deck-meta[hidden]{display:flex;visibility:hidden}
.room-code-ticket{position:relative;justify-self:center;height:36px;padding:0 6px 0 12px;box-shadow:none;background:rgba(255,250,240,.48)}
.room-code-ticket i{width:26px;height:26px}
#room-round{justify-self:start;height:34px;min-width:72px;padding:0 12px;display:grid;place-items:center;background:rgba(255,250,240,.56)}
.connection-state{justify-self:end;white-space:nowrap;font-size:9px}
.copy-tooltip{position:absolute;left:50%;top:calc(100% + 9px);z-index:40;padding:6px 9px;border-radius:5px;background:var(--ink);color:var(--white);font:700 9px/1 "Instrument Sans";letter-spacing:.06em;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,-5px);transition:opacity .18s,transform .18s}
.copy-tooltip::before{content:"";position:absolute;left:50%;bottom:100%;margin-left:-4px;border:4px solid transparent;border-bottom-color:var(--ink)}
.room-code-ticket.is-copied .copy-tooltip{opacity:1;transform:translate(-50%,0)}

/* Sidebar reads as a real table-side rail. */
.players-panel>header{margin-bottom:14px;padding-bottom:14px}
.players-panel h2{font-size:27px}
.room-player{padding-block:11px}

/* Compact bottom-sheet result: it no longer competes with the card. */
.room-result-panel{
  position:absolute;left:50%;bottom:59px;z-index:20;width:min(94%,520px);max-height:142px;margin:0;padding:10px 12px 9px;
  border:1px solid color-mix(in srgb,var(--room-color) 24%,var(--line));border-radius:9px;
  background:color-mix(in srgb,var(--room-color) 3%,rgba(255,250,240,.96));
  box-shadow:0 16px 34px -28px var(--room-color);transform:translate(-50%,18px);opacity:0;overflow:hidden;
}
.room-result-panel.is-visible{animation:roomResultSheet .34s cubic-bezier(.2,.8,.2,1) forwards}
.room-result-panel>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 0 7px;border-bottom:1px solid var(--line)}
.room-result-panel>header>div{display:flex;align-items:baseline;gap:9px;min-width:0}
.room-result-panel>header small{color:var(--room-color);font-size:7px;font-weight:800;letter-spacing:.14em;white-space:nowrap}
.room-result-panel>header strong{font:17px/1 "DM Serif Display";font-weight:400;white-space:nowrap}
.room-result-panel>header em{color:var(--muted);font-size:8px;font-style:normal;font-weight:700;white-space:nowrap}
.room-opponent-results{display:flex;align-items:center;gap:6px;margin-top:8px;overflow-x:auto;padding-bottom:1px}
.room-opponent-result{flex:0 0 auto;min-width:190px;grid-template-columns:30px minmax(0,1fr) auto;gap:7px;padding:6px 8px;border-radius:6px}
.room-opponent-result .result-avatar{width:30px;height:30px;font-size:12px}
.room-opponent-result>div small{display:none}
.room-opponent-result>div b{font-size:11px}
.room-opponent-result>strong{font-size:9px}
.room-opponent-result>strong i{font-size:13px}
.room-result-progress{height:2px;margin-top:7px}
.solo-result{width:100%;padding:5px 8px;font-size:10px;text-align:left}
@keyframes roomResultSheet{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}

/* Waiting feedback sits above the bottom controls rather than inside the card. */
.room-waiting-line{min-height:38px;padding:7px 12px;border-radius:6px;background:rgba(255,250,240,.92);box-shadow:0 10px 28px -26px var(--room-color);font-size:10px!important}

@media(max-width:980px) and (min-width:761px){
  .room-live-top-inner{grid-template-columns:minmax(150px,1fr) auto auto;gap:10px;padding-inline:24px}
  .connection-state{display:none}
  .room-layout{grid-template-columns:230px minmax(0,1fr);padding-right:24px}
  .room-sidebar{padding-left:24px;padding-right:18px}
  .room-play-column{padding-left:18px}
}

@media(max-width:760px){
  body[data-page="rooms"][data-room]:not([data-room=""]){height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-shell{height:auto;min-height:calc(100dvh - 70px);padding:0;overflow:visible}
  .room-live-top{margin:0;border-bottom:1px solid var(--line);padding:0}
  .room-live-top-inner{padding:8px 16px;display:grid;grid-template-columns:1fr auto;gap:7px 10px}
  .room-live-top .room-deck-meta{grid-column:1;grid-row:1;justify-self:start}
  #room-round{grid-column:2;grid-row:1;justify-self:end}
  .room-code-ticket{grid-column:1/-1;grid-row:2;width:100%;justify-content:center;border-radius:7px}
  .connection-state{grid-column:1/-1;grid-row:3;justify-self:center;font-size:8px}
  .room-layout{height:auto;padding:0 16px 22px;display:flex;flex-direction:column;overflow:visible}
  .room-play-column{order:1;width:100%;height:auto;padding:0;overflow:visible}
  .room-sidebar{order:2;width:100%;height:auto;margin-top:14px;padding:0;border:0}
  .players-panel{height:auto;padding:13px 14px;border:1px solid var(--line);border-radius:8px;background:rgba(255,250,240,.55)}
  .players-note{margin-top:12px;padding-top:10px}
  .room-card-stage.game-stage{width:100%;height:min(540px,calc(100dvh - 235px));min-height:410px}
  .room-card-stage .room-card.question-card,.room-card-stage .room-back.back-card{width:min(86vw,390px);height:min(525px,calc(100dvh - 255px));min-height:395px}
  .room-swipe-guide.swipe-guide{width:min(100%,610px);min-height:54px;margin:0}
  .room-result-panel{position:sticky;left:auto;bottom:8px;width:min(100%,520px);max-height:none;margin:-118px auto 8px;transform:translateY(14px);z-index:20}
  .room-result-panel.is-visible{animation:roomResultMobile .3s cubic-bezier(.2,.8,.2,1) forwards}
  .room-result-panel>header>div{display:grid;gap:1px}
  .room-result-panel>header strong{font-size:16px}
  .room-opponent-results{display:grid;grid-template-columns:1fr;max-height:92px;overflow:auto}
  .room-opponent-result{width:100%;min-width:0}
  .room-actions{position:static;width:100%;transform:none;margin:0}
  @keyframes roomResultMobile{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

@media(prefers-reduced-motion:reduce){.copy-tooltip,.room-result-panel.is-visible{transition:none;animation:none}.room-result-panel.is-visible{opacity:1;transform:translate(-50%,0)}}


/* v15 — exact viewport fill, neutral table chrome, deck-only category color */
.room-live{--active-deck:var(--wine);--room-color:var(--wine)}

/* Category color is intentionally scoped to the category pill and the actual deck/card only. */
.room-live-top .room-deck-meta{
  color:var(--active-deck);
  border-color:color-mix(in srgb,var(--active-deck) 30%,var(--line));
  background:color-mix(in srgb,var(--active-deck) 4%,rgba(255,250,240,.72));
}
.room-live-top .room-deck-meta>i{background:var(--active-deck);color:#fff}
.room-live-top .room-deck-meta>b{background:var(--active-deck);color:#fff}

/* Everything else at the table stays in the stable site palette. */
.room-code-ticket{
  color:var(--ink);
  border-color:var(--line);
  background:rgba(255,250,240,.5);
  box-shadow:none;
}
.room-code-ticket:hover{border-color:color-mix(in srgb,var(--ink) 28%,var(--line))}
.room-code-ticket strong{color:var(--ink)}
.room-code-ticket i{background:var(--wine);color:#fff}
#room-round{color:var(--ink);border-color:var(--line);background:rgba(255,250,240,.55)}
.players-panel>header small{color:var(--wine)}
.players-panel>header>span{background:rgba(125,23,39,.06);color:var(--wine)}
.room-player::before{background:var(--wine)}
.player-avatar{background:rgba(125,23,39,.045);border-color:color-mix(in srgb,var(--wine) 18%,var(--line));color:var(--ink)}
.room-player>div b em{background:rgba(125,23,39,.07);color:var(--wine)}
.host-crown,.players-note i{color:var(--wine)}

/* Header-under strip: connection — category — room code / round. */
.room-table-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}

@media(min-width:761px){
  body[data-page="rooms"][data-room]:not([data-room=""]){height:100dvh;min-height:100dvh;overflow:hidden}
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-shell{
    height:calc(100dvh - 84px);min-height:0;max-height:calc(100dvh - 84px);padding:0;overflow:hidden;
  }
  .room-live{
    height:100%;min-height:0;display:grid;grid-template-rows:52px minmax(0,1fr);overflow:hidden;
  }
  .room-live-top{height:52px;min-height:52px;display:block}
  .room-live-top-inner{
    height:52px;padding:0 clamp(22px,5vw,76px);display:grid;
    grid-template-columns:minmax(170px,.8fr) minmax(180px,1fr) auto;
    align-items:center;gap:24px;
  }
  .connection-state{grid-column:1;justify-self:start;color:var(--muted)}
  .room-live-top .room-deck-meta{grid-column:2;justify-self:start;min-width:0}
  .room-table-meta{grid-column:3;justify-self:end}

  .room-layout{
    height:100%;min-height:0;max-height:100%;padding:0;display:grid;
    grid-template-columns:290px minmax(0,1fr);gap:0;align-items:stretch;overflow:hidden;
  }
  .room-sidebar{
    height:100%;min-height:0;padding:26px 24px 20px clamp(22px,5vw,76px);
    border-right:1px solid var(--line);overflow:hidden;
  }
  .players-panel{height:100%;min-height:0;display:flex;flex-direction:column}
  #players{flex:0 1 auto;min-height:0;overflow:auto}
  .players-note{margin-top:auto}

  .room-play-column{
    width:100%;height:100%;min-height:0;padding:0 clamp(22px,5vw,76px) 0 28px;
    display:grid;grid-template-rows:minmax(0,1fr) 58px;align-items:stretch;justify-items:center;overflow:hidden;
  }
  .room-card-stage.game-stage{
    grid-row:1;width:min(100%,620px);height:100%;min-height:0;margin:0;display:grid;place-items:center;overflow:visible;
  }
  .room-card-stage .room-card.question-card,
  .room-card-stage .room-back.back-card{
    width:min(390px,calc((100dvh - 84px - 52px - 58px) * .78));
    height:min(525px,calc(100dvh - 84px - 52px - 76px));
    min-height:390px;
  }
  .room-swipe-guide.swipe-guide{
    grid-row:2;align-self:stretch;width:min(100%,610px);height:58px;min-height:58px;margin:0;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  }
  .room-actions{bottom:60px}
  .room-result-panel{bottom:61px}
}

@media(max-width:980px) and (min-width:761px){
  .room-live-top-inner{grid-template-columns:minmax(145px,.7fr) minmax(145px,1fr) auto;gap:12px;padding-inline:24px}
  .room-layout{grid-template-columns:230px minmax(0,1fr)}
  .room-sidebar{padding-left:24px;padding-right:18px}
  .room-play-column{padding-left:18px;padding-right:24px}
  .room-code-ticket span{display:none}
}

@media(max-width:760px){
  .room-live-top-inner{display:grid;grid-template-columns:1fr auto;gap:7px 10px;padding:8px 16px}
  .connection-state{grid-column:1;grid-row:1;justify-self:start}
  .room-live-top .room-deck-meta{grid-column:2;grid-row:1;justify-self:end}
  .room-table-meta{grid-column:1/-1;grid-row:2;width:100%;justify-content:space-between}
  .room-code-ticket{flex:1;justify-content:center}
  #room-round{flex:0 0 auto}
}

/* v16 — natural card sizing; balanced meta row; room sidebar breathing room */
@media(min-width:761px){
  body[data-page="rooms"][data-room]:not([data-room=""]){height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-shell{
    height:auto;min-height:calc(100dvh - 84px);max-height:none;padding:0;overflow:visible;
  }
  .room-live{
    height:auto;min-height:calc(100dvh - 84px);display:grid;
    grid-template-rows:52px minmax(650px,1fr);overflow:visible;
  }
  .room-live-top{height:52px;min-height:52px;margin:0;display:block}
  .room-live-top-inner{
    width:100%;height:52px;padding:0 clamp(22px,5vw,76px);display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;
  }
  .connection-state{grid-column:1;justify-self:start}
  .room-live-top .room-deck-meta{grid-column:2;justify-self:center}
  .room-table-meta{grid-column:3;justify-self:end}

  .room-layout{
    min-height:650px;height:auto;padding:0;display:grid;
    grid-template-columns:320px minmax(0,1fr);gap:0;align-items:stretch;overflow:visible;
  }
  .room-sidebar{
    height:auto;min-height:650px;margin:0;padding:26px 30px 22px clamp(22px,5vw,76px);
    border-right:1px solid var(--line);overflow:visible;
  }
  .players-panel{height:100%;min-height:600px;display:flex;flex-direction:column;padding-right:0}
  .players-panel::before{display:none}
  #players{flex:0 1 auto;min-height:0;overflow:visible}
  .players-note{margin-top:auto;padding-top:18px}
  .room-player{grid-template-columns:42px minmax(0,1fr) 22px;gap:10px;padding-right:0}
  .room-player>div b{display:flex;align-items:center;gap:7px;overflow:visible;text-overflow:clip;white-space:nowrap}
  .room-player>div b em{flex:0 0 auto;margin-left:0}

  .room-play-column{
    width:100%;min-height:650px;height:auto;padding:10px clamp(22px,5vw,76px) 8px 28px;
    display:grid;grid-template-rows:minmax(540px,1fr) 58px;align-items:stretch;justify-items:center;overflow:visible;
  }
  .room-card-stage.game-stage{
    grid-row:1;width:min(100%,520px);height:min(570px,calc(100dvh - 223px));min-height:540px;
    margin:auto;display:grid;place-items:center;overflow:visible;
  }
  .room-card-stage .room-card.question-card,
  .room-card-stage .room-back.back-card{
    width:min(86vw,390px);height:525px;min-height:525px;
  }
  .room-swipe-guide.swipe-guide{
    grid-row:2;align-self:end;width:min(100%,610px);height:58px;min-height:58px;margin:0;
  }
  .room-actions{bottom:62px}
  .room-result-panel{bottom:63px}
}

@media(max-width:1100px) and (min-width:761px){
  .room-live-top-inner{padding-inline:24px}
  .room-layout{grid-template-columns:285px minmax(0,1fr)}
  .room-sidebar{padding-left:24px;padding-right:24px}
  .room-play-column{padding-left:22px;padding-right:24px}
  .room-player{grid-template-columns:40px minmax(0,1fr) 20px;gap:9px}
  .player-avatar{width:40px;height:40px}
}

/* v17 — room grid must stay exactly one row on desktop.
   Legacy balancing pseudo-element became a third grid item and created an implicit second row. */
@media(min-width:761px){
  .room-layout::after{content:none!important;display:none!important}
  .room-layout{
    grid-template-rows:minmax(0,1fr);
    grid-auto-rows:0;
    grid-auto-flow:column;
  }
  .room-sidebar,.room-play-column{grid-row:1}
  .room-sidebar{grid-column:1}
  .room-play-column{grid-column:2}
}

/* v18 — viewport-centered table, full-width sidebar rules, shared /oyna controls */
@media(min-width:1201px){
  .room-layout{
    grid-template-columns:320px minmax(0,1fr) 320px;
  }
  .room-play-column{
    grid-column:2;
    padding-left:0;
    padding-right:0;
  }
}

@media(min-width:761px) and (max-width:1200px){
  .room-layout{
    grid-template-columns:285px minmax(0,1fr);
  }
  .room-play-column{
    padding-left:0;
    padding-right:24px;
  }
}

@media(min-width:761px){
  .room-sidebar{
    padding:0;
  }
  .players-panel{
    width:100%;
    height:100%;
    min-height:600px;
    padding:0;
  }
  .players-panel>header{
    width:100%;
    margin:0;
    padding:26px 30px 16px clamp(22px,5vw,76px);
    border-bottom:1px solid var(--line);
  }
  #players{
    width:100%;
    padding:14px 30px 0 clamp(22px,5vw,76px);
  }
  .players-note{
    width:100%;
    margin-top:auto;
    padding:16px 30px 20px clamp(22px,5vw,76px);
    border-top:1px solid var(--line);
    color:color-mix(in srgb,var(--ink) 62%,var(--muted));
    font-size:11px;
    line-height:1.5;
  }
  .players-note i{
    margin-top:1px;
    font-size:15px;
  }

  /* Keep the exact /oyna control component behavior. The legacy room
     justify-self rules pushed the two choices to the outer edges. */
  .room-swipe-guide.swipe-guide{
    width:min(100%,610px);
    height:54px;
    min-height:54px;
    margin:0;
    gap:38px;
  }
  .room-swipe-guide.swipe-guide button:first-child,
  .room-swipe-guide.swipe-guide button:last-child{
    justify-self:stretch;
  }
  .room-drag-guide{
    justify-self:stretch;
  }
}

/* v21 — player names + compact table result strip */
.room-player{
  grid-template-columns:42px minmax(0,1fr) auto;
}
.room-player .player-copy{min-width:0;max-width:100%}
.room-player .player-copy>b{
  min-width:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:7px;
  overflow:hidden;
  white-space:nowrap;
}
.room-player .player-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.room-player .player-copy>b em{flex:0 0 auto;margin-left:0}
.room-player .host-crown{flex:0 0 auto}

/* Result panel: a lightweight tray rising from the bottom, not a second card. */
.room-result-panel{
  width:min(620px,calc(100% - 28px));
  bottom:18px;
  padding:10px 12px 9px;
  border:1px solid color-mix(in srgb,var(--wine) 22%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--white) 94%,transparent);
  box-shadow:0 18px 44px -34px rgba(23,19,15,.48);
  backdrop-filter:blur(12px);
}
.room-result-panel>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 0 8px;
  border-bottom:1px solid var(--line);
}
.room-result-heading{display:flex;align-items:center;gap:9px;min-width:0}
.room-result-heading>span{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(125,23,39,.075);color:var(--wine);
}
.room-result-heading>span i{font-size:15px}
.room-result-heading>div{min-width:0;display:grid;gap:1px}
.room-result-panel>header .room-result-heading small{
  color:var(--wine);font-size:7px;font-weight:800;letter-spacing:.14em;white-space:nowrap;
}
.room-result-panel>header .room-result-heading strong{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:17px/1.1 "DM Serif Display";font-weight:400;color:var(--ink);
}
.room-result-panel>header em{
  flex:0 0 auto;padding:5px 8px;border-radius:999px;
  background:rgba(23,19,15,.045);color:var(--muted);
  font-size:8px;font-style:normal;font-weight:700;white-space:nowrap;
}
.room-opponent-results{
  display:flex;align-items:center;gap:7px;margin-top:8px;padding:0;
  overflow-x:auto;scrollbar-width:none;
}
.room-opponent-results::-webkit-scrollbar{display:none}
.room-opponent-result{
  flex:0 0 auto;min-width:205px;max-width:255px;
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;gap:8px;padding:7px 9px;
  border-radius:8px;background:rgba(241,236,223,.34);
  border:1px solid var(--line);
}
.room-opponent-result .result-avatar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);font:12px "DM Serif Display";
}
.room-opponent-result>div{min-width:0;display:grid;gap:1px}
.room-opponent-result>div b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ink)}
.room-opponent-result>div small{display:block;font-size:7px;font-weight:800;letter-spacing:.11em;opacity:.52;color:var(--ink)}
.room-opponent-result>strong{display:flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.07em;white-space:nowrap}
.room-opponent-result>strong i{font-size:13px}
.room-opponent-result.say{color:var(--say);border-color:color-mix(in srgb,var(--say) 24%,var(--line));background:color-mix(in srgb,var(--say) 4%,var(--white))}
.room-opponent-result.hide{color:var(--hide);border-color:color-mix(in srgb,var(--hide) 24%,var(--line));background:color-mix(in srgb,var(--hide) 4%,var(--white))}
.solo-result{
  width:100%;margin:0;padding:7px 9px;display:flex;align-items:center;gap:9px;
  color:var(--muted);font-size:10px;text-align:left;
}
.solo-result>i{font-size:17px;color:var(--wine)}
.solo-result>span{display:grid;gap:1px}
.solo-result b{color:var(--ink);font-size:11px}
.solo-result small{font-size:9px}
.room-result-progress{height:2px;margin-top:8px;background:var(--line);border-radius:99px;overflow:hidden}
.room-result-progress i{background:var(--wine)}

@media(min-width:761px){
  /* Keep the result tray proportional when there is only one visible answer. */
  .room-result-panel:has(.room-opponent-result:only-child){width:min(470px,calc(100% - 28px))}
  .room-result-panel:has(.solo-result){width:min(420px,calc(100% - 28px))}
  .room-result-panel:has(.room-opponent-result:only-child) .room-opponent-result{width:100%;max-width:none}
}
@media(max-width:760px){
  .room-result-panel{width:min(100% - 20px,520px);padding:9px 10px;bottom:10px}
  .room-result-panel>header{gap:8px}
  .room-result-heading>span{width:28px;height:28px;flex-basis:28px}
  .room-result-panel>header .room-result-heading strong{font-size:15px}
  .room-result-panel>header em{font-size:7px;padding:4px 6px}
  .room-opponent-results{display:grid;grid-template-columns:1fr;max-height:105px;overflow:auto}
  .room-opponent-result{width:100%;min-width:0;max-width:none}
}

/* v22 — room rules, invite links and compatibility */
.room-rules{margin:2px 0 4px;padding:14px;border:1px solid var(--line);border-radius:9px;background:rgba(241,236,223,.34)}
.room-rules-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.room-rules-head>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--wine);color:var(--white)}.room-rules-head i{font-weight:500}.room-rules-head>div{display:grid;gap:2px}.room-rules-head small{color:var(--wine);font-size:7px;font-weight:800;letter-spacing:.15em}.room-rules-head strong{font:17px/1 "DM Serif Display";font-weight:400}
.room-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.room-rule-grid label{margin:0!important;font-size:7px!important}.room-rule-grid select{margin-top:5px!important;min-height:40px!important;padding-inline:9px!important;font-size:9px!important}
.room-invite-state{width:min(560px,calc(100% - 36px));margin:clamp(55px,10vh,105px) auto;padding:34px;border:1px solid var(--line);border-radius:14px;background:rgba(255,250,240,.56);text-align:center;box-shadow:0 30px 70px -55px var(--ink)}
.invite-deck{width:58px;height:72px;margin:0 auto 18px;border:1px solid color-mix(in srgb,var(--invite-color) 65%,var(--line));border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--invite-color) 8%,var(--white));color:var(--invite-color);box-shadow:7px 8px 0 color-mix(in srgb,var(--invite-color) 85%,transparent),0 20px 35px -28px var(--invite-color);transform:rotate(-2deg)}.invite-deck i{font-size:23px;font-weight:500}
.room-invite-state>small{color:var(--wine);font-size:8px;font-weight:800;letter-spacing:.14em}.room-invite-state>h1{margin:9px 0 12px;font:52px/.9 "DM Serif Display";font-weight:400}.room-invite-state>h1 em{color:var(--wine);font-weight:400}.room-invite-state>p{max-width:390px;margin:0 auto 22px;color:var(--muted);font-size:12px;line-height:1.6}.invite-join-form{max-width:390px;margin:0 auto;text-align:left}.room-invite-state>a{min-height:46px;padding:0 17px;border-radius:7px;display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--white);font-size:9px;font-weight:800;letter-spacing:.06em;text-decoration:none}.room-invite-state.is-expired>span{width:54px;height:54px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;background:rgba(125,23,39,.08);color:var(--wine)}.room-invite-state.is-expired>span i{font-size:21px;font-weight:500}
.copy-tooltip{min-width:max-content;padding-inline:9px}
.room-compatibility{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;margin:10px 0;padding:9px 10px;border:1px solid color-mix(in srgb,var(--wine) 22%,var(--line));border-radius:8px;background:rgba(125,23,39,.035);text-align:left}.room-compatibility>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--wine);color:#fff}.room-compatibility>span i{font-weight:500}.room-compatibility>div{min-width:0;display:grid;gap:1px}.room-compatibility small{color:var(--wine);font-size:6px;font-weight:800;letter-spacing:.13em}.room-compatibility strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.room-compatibility p{margin:1px 0 0;color:var(--muted);font-size:8px}.room-compatibility p b{color:var(--ink)}.room-compatibility>em{color:var(--wine);font:26px/1 "DM Serif Display";font-style:normal}
@media(max-width:760px){.room-rule-grid{grid-template-columns:1fr}.room-invite-state{margin:35px auto;padding:27px 18px}.room-invite-state>h1{font-size:43px}.room-compatibility{grid-template-columns:34px minmax(0,1fr) auto}.room-compatibility>span{width:34px;height:34px}.room-compatibility>em{font-size:22px}}

/* v23 — polished room setup, optional rules and centered invite states */
.room-forms{padding:10px;border-color:color-mix(in srgb,var(--wine) 55%,var(--ink));box-shadow:0 28px 60px -42px var(--wine),7px 9px 0 color-mix(in srgb,var(--wine) 82%,transparent)}
.room-tabs{padding:4px;border:1px solid var(--line);border-radius:8px;background:rgba(241,236,223,.42)}.room-tabs button{min-height:47px;border-radius:6px;font-size:11px}.room-form{padding:24px 18px 14px}.room-form label{font-size:11px;letter-spacing:.11em}.room-form input,.room-form select{height:55px;font-size:15px}.room-form>button{height:55px;font-size:11px}
.room-rules{margin:3px 0 18px;padding:0;border:1px solid var(--line);border-radius:9px;background:rgba(241,236,223,.26);overflow:hidden;transition:border-color .2s ease,background .2s ease}.room-rules:not(.is-collapsed){border-color:color-mix(in srgb,var(--wine) 42%,var(--line));background:rgba(125,23,39,.025)}
.room-rules-toggle{width:100%;min-height:74px;padding:12px 13px;border:0;background:transparent;display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:11px;text-align:left;color:var(--ink)}.room-rules-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(125,23,39,.08);color:var(--wine)}.room-rules-icon i{font-size:18px;font-weight:500}.room-rules-copy{min-width:0;display:grid;gap:2px}.room-rules-copy small{color:var(--wine);font-size:9px;font-weight:800;letter-spacing:.14em}.room-rules-copy strong{font:20px/1.05 "DM Serif Display";font-weight:400}.room-rules-copy em{font-style:normal;color:var(--muted);font-size:11px;line-height:1.35}
.room-rules-switch{justify-self:end;width:40px;height:23px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(23,19,15,.06);transition:.2s}.room-rules-switch i{display:block;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:transform .22s ease,background .22s ease}.room-rules:not(.is-collapsed) .room-rules-switch{border-color:var(--wine);background:rgba(125,23,39,.1)}.room-rules:not(.is-collapsed) .room-rules-switch i{transform:translateX(17px);background:var(--wine)}
.room-rules-options{padding:0 13px 14px}.room-rules-options[hidden]{display:none}.room-rule-grid{padding-top:13px;border-top:1px solid var(--line);gap:9px}.room-rule-grid label{font-size:9px!important;letter-spacing:.09em!important}.room-rule-grid label>span{display:block;margin-bottom:7px}.room-rule-grid select{height:45px!important;min-height:45px!important;padding-inline:11px!important;font-size:11px!important;background:var(--white)!important}

body[data-page="rooms"][data-room=""][data-invite-room]:not([data-invite-room=""]){height:100dvh;overflow:hidden}
body[data-page="rooms"][data-room=""][data-invite-room]:not([data-invite-room=""]) .room-shell{height:calc(100dvh - 84px);min-height:0;max-width:none;padding:24px;display:grid;grid-template-columns:1fr;place-items:center;overflow:hidden}
.room-invite-state{width:min(590px,calc(100% - 18px));margin:0;padding:31px 34px 29px;border:1px solid color-mix(in srgb,var(--wine) 30%,var(--line));border-radius:14px;background:linear-gradient(145deg,rgba(255,250,240,.9),rgba(241,236,223,.7));box-shadow:0 34px 75px -58px var(--ink);text-align:center}
.room-invite-state .invite-deck{margin-bottom:16px}.room-invite-state>small{font-size:10px}.room-invite-state>h1{font-size:55px;margin:8px 0 11px}.room-invite-state>p{font-size:13px;line-height:1.55;margin-bottom:20px}.invite-join-form{width:min(390px,100%);max-width:none;margin:0 auto;padding:0;text-align:left}.invite-join-form label{margin:0 0 11px;font-size:10px}.invite-join-form input{text-align:center;font-size:16px}.invite-join-form>button{height:52px}.room-invite-state.is-expired>span{width:62px;height:62px;margin-bottom:15px}.room-invite-state.is-expired>span i{font-size:25px}.room-invite-state>a{min-height:50px;font-size:10px}

.room-compatibility{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;margin:11px 0;padding:11px 12px}.room-compatibility>span{width:44px;height:44px}.room-compatibility small{font-size:9px}.room-compatibility strong{font-size:13px}.room-compatibility p{font-size:11px;line-height:1.35}.room-compatibility>em{font-size:30px}
.room-final .final-player b{font-size:13px}.room-final .final-player small{font-size:11px}.room-final .final-player em{font-size:11px}

@media(max-width:760px){.room-rules-toggle{grid-template-columns:38px minmax(0,1fr) 40px;padding:11px}.room-rules-icon{width:38px;height:38px}.room-rules-copy strong{font-size:18px}.room-rules-copy em{font-size:10px}.room-rule-grid{grid-template-columns:1fr}.room-invite-state{padding:25px 18px}.room-invite-state>h1{font-size:44px}.room-invite-state>p{font-size:12px}body[data-page="rooms"][data-room=""][data-invite-room]:not([data-invite-room=""]){height:100dvh}body[data-page="rooms"][data-room=""][data-invite-room]:not([data-invite-room=""]) .room-shell{height:calc(100dvh - 70px);padding:16px}}
.room-rules-toggle{grid-template-columns:42px minmax(0,1fr) 72px}.room-rules-switch{position:relative;width:72px;height:26px;padding:3px}.room-rules-switch::before{content:"PASİF";position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:8px;font-weight:800;letter-spacing:.08em;color:var(--muted)}.room-rules-switch i{width:18px;height:18px}.room-rules:not(.is-collapsed) .room-rules-switch::before{content:"AKTİF";left:7px;right:auto;color:var(--wine)}.room-rules:not(.is-collapsed) .room-rules-switch i{transform:translateX(46px)}
@media(max-width:760px){.room-rules-toggle{grid-template-columns:38px minmax(0,1fr) 70px}}

/* v24 — result alignment, final scrollbar and replay controls */
.room-result-heading{
  align-items:center;
}
.room-result-heading>div{
  align-self:center;
  justify-content:center;
  gap:2px;
  line-height:1;
}
.room-result-panel>header .room-result-heading small{
  line-height:1.1;
}
.room-result-panel>header .room-result-heading strong{
  line-height:1.05;
}

.final-card{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--room-color) 68%,var(--wine)) rgba(23,19,15,.055);
  scrollbar-gutter:stable;
}
.final-card::-webkit-scrollbar{width:8px}
.final-card::-webkit-scrollbar-track{
  background:rgba(23,19,15,.045);
  border-radius:999px;
  margin:12px 4px;
}
.final-card::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--room-color) 68%,var(--wine));
  border:2px solid var(--white);
  border-radius:999px;
}
.final-card::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--room-color) 82%,var(--wine));
}

.room-actions:has(.room-replay){
  width:min(100%,530px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.room-actions:has(.room-replay) .room-new{
  width:100%;
  min-width:0;
  min-height:50px;
}
.room-replay{
  border-color:var(--wine)!important;
  background:var(--wine)!important;
  color:#fff!important;
  cursor:pointer;
}
.room-replay:disabled{opacity:.68;cursor:wait;transform:none!important}
.room-new-secondary{
  border-color:var(--ink)!important;
  background:var(--white)!important;
  color:var(--ink)!important;
}
@media(max-width:520px){
  .room-actions:has(.room-replay){grid-template-columns:1fr;gap:7px}
}

/* v25 — room controls, player states and decision insights */
.room-rule-grid input[type="number"]{width:100%;height:45px;border:1px solid var(--line);border-radius:6px;background:var(--white);padding:0 11px;font:600 12px/1 "Instrument Sans";color:var(--ink)}
.room-rule-grid label>small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.35;letter-spacing:0;text-transform:none}
.room-rule-switches{display:grid;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.rule-switch{display:grid!important;grid-template-columns:18px minmax(0,1fr) 36px;align-items:center;gap:10px;margin:0!important;padding:10px 11px;border:1px solid var(--line);border-radius:7px;background:rgba(255,250,240,.56);cursor:pointer}
.rule-switch>input{position:absolute;opacity:0;pointer-events:none}
.rule-switch>span{display:grid;gap:2px;min-width:0}.rule-switch b{font-size:11px;letter-spacing:.02em}.rule-switch small{font-size:10px;line-height:1.35;color:var(--muted);letter-spacing:0;text-transform:none}
.rule-switch>i{width:34px;height:20px;padding:2px;border-radius:999px;background:rgba(23,19,15,.12);position:relative;transition:.2s}.rule-switch>i::after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(23,19,15,.18);transition:.2s}.rule-switch>input:checked~i{background:var(--wine)}.rule-switch>input:checked~i::after{transform:translateX(14px)}
.room-password-rule{margin:0!important}.room-password-rule>span{display:flex;align-items:center;justify-content:space-between;font-size:9px!important}.room-password-rule em{font-style:normal;color:var(--muted);font-size:8px}.room-password-rule input{height:45px!important;font-size:12px!important}

.room-player{grid-template-columns:27px 42px minmax(0,1fr) auto auto;gap:8px;padding-left:0;border-left:0}
.player-order{align-self:center;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.06em}
.room-player::before{content:"";width:3px;height:30px;border-radius:99px;background:var(--player-color);position:absolute;left:-11px;top:50%;transform:translateY(-50%)}
.room-player .player-avatar{border-color:color-mix(in srgb,var(--player-color) 42%,var(--line));color:var(--player-color)}
.room-player.is-afk{opacity:.72}.room-player.is-afk .player-avatar i{background:#c68a2b}.room-player.is-offline{opacity:.44}
.player-menu{width:28px;height:28px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--muted);cursor:pointer}.player-menu:hover{background:rgba(23,19,15,.06);color:var(--ink)}.player-menu i{font-size:16px;font-weight:500}
.room-host-tools{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:12px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.room-host-tools button{border:0;background:none;color:var(--wine);display:flex;align-items:center;gap:6px;padding:0;font-size:9px;font-weight:800;letter-spacing:.06em;cursor:pointer}.room-host-tools i{font-size:15px;font-weight:500}.room-host-tools small{color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.06em;text-align:right}
.room-local-settings{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px 0;border-bottom:1px solid var(--line)}
.room-local-settings button{min-width:0;height:34px;border:1px solid var(--line);border-radius:7px;background:rgba(255,250,240,.5);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);font-size:8px;font-weight:800;letter-spacing:.05em;cursor:pointer}.room-local-settings button.is-off{opacity:.52}.room-local-settings i{font-size:14px;font-weight:500}
.connection-state.good i{background:#2e8b62}.connection-state.fair i{background:#c38a2d}.connection-state.weak i{background:#c85a33}.connection-state.reconnecting i{background:#c85a33;animation:roomPulse 1s infinite}
@keyframes roomPulse{50%{opacity:.35}}

.room-ready{min-height:48px;padding:0 18px;border:1px solid var(--wine);border-radius:7px;background:var(--white);color:var(--wine);font-weight:800;letter-spacing:.07em;cursor:pointer}.room-ready.is-ready{background:rgba(46,139,98,.08);border-color:#2e8b62;color:#2e8b62}.room-ready i{margin-right:6px;font-weight:500}.ready-count{align-self:center;color:var(--muted);font-size:10px}

.room-opponent-result{position:relative;border-left:3px solid var(--player-color)}
.room-opponent-result .result-avatar{color:var(--player-color);border:1px solid color-mix(in srgb,var(--player-color) 35%,var(--line))}
.mind-change{grid-column:2/-1;color:var(--muted);font-size:8px;font-style:normal;font-weight:700}.mind-change i{font-weight:500}
.round-insight{display:inline-flex;align-items:center;gap:7px;margin:8px 7px 0 0;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,250,240,.68);font-size:9px}.round-insight i{font-size:14px;font-weight:500}.round-insight b{font-size:9px;letter-spacing:.06em}.round-insight span{color:var(--muted)}
.round-insight.unanimous{border-color:rgba(46,139,98,.28);color:#287b58;background:rgba(46,139,98,.055)}.round-insight.tie{border-color:rgba(125,23,39,.26);color:var(--wine);background:rgba(125,23,39,.045)}.round-insight.rare{color:#765b17}.round-insight.streak{color:#9b4b23}.round-insight.changed{color:#5f4778}

@media(max-width:760px){
  .room-player{grid-template-columns:24px 38px minmax(0,1fr) auto}.room-player .host-crown{display:none}.player-menu{grid-column:4}.room-host-tools{align-items:flex-start}.room-host-tools small{max-width:120px}.room-local-settings{grid-template-columns:1fr}.round-insight{font-size:8px;padding:6px 8px}
}
.player-tools-wrap{position:relative}.player-tools-popover{position:absolute;right:0;top:34px;z-index:30;width:178px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--white);box-shadow:0 18px 35px -26px rgba(23,19,15,.55)}.player-tools-popover[hidden]{display:none}.player-tools-popover button{width:100%;height:36px;border:0;border-radius:6px;background:transparent;display:flex;align-items:center;gap:8px;padding:0 9px;color:var(--ink);font-size:10px;font-weight:700;text-align:left;cursor:pointer}.player-tools-popover button:hover{background:rgba(23,19,15,.055)}.player-tools-popover button:last-child{color:var(--wine)}.player-tools-popover i{font-size:15px;font-weight:500}
.room-live.is-unanimous .room-result-panel{animation:unanimousLift .5s cubic-bezier(.2,.75,.25,1)}.room-live.is-unanimous .question-card{box-shadow:0 28px 70px -44px rgba(46,139,98,.62)}.room-live.is-tie .room-result-panel{animation:tieNudge .5s ease}
@keyframes unanimousLift{0%{transform:translate(-50%,18px) scale(.97);opacity:.35}100%{transform:translate(-50%,0) scale(1);opacity:1}}@keyframes tieNudge{0%,100%{transform:translateX(-50%)}35%{transform:translateX(calc(-50% - 5px))}65%{transform:translateX(calc(-50% + 5px))}}
@media(prefers-reduced-motion:reduce){.room-live.is-unanimous .room-result-panel,.room-live.is-tie .room-result-panel{animation:none}}

/* v26 — shared room modals, cleaner controls and stable result readability */
html.room-modal-open,html.room-modal-open body{overflow:hidden}
.room-rules-launch{margin:3px 0 18px}
.room-rules-launch-button{width:100%;min-height:76px;padding:13px 14px;border:1px solid var(--line);border-radius:9px;background:rgba(241,236,223,.28);display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;text-align:left;color:var(--ink);cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.room-rules-launch-button:hover{border-color:color-mix(in srgb,var(--wine) 38%,var(--line));background:rgba(125,23,39,.025);transform:translateY(-1px)}
.room-rules-launch .room-rules-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(125,23,39,.08);color:var(--wine)}
.room-rules-launch .room-rules-icon i{font-size:18px;font-weight:500}
.room-rules-launch .room-rules-copy{display:grid;gap:2px;min-width:0}
.room-rules-launch .room-rules-copy small{color:var(--wine);font-size:9px;font-weight:800;letter-spacing:.14em}
.room-rules-launch .room-rules-copy strong{font:20px/1.05 "DM Serif Display";font-weight:400}
.room-rules-launch .room-rules-copy em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px;font-style:normal;line-height:1.35}
.room-rules-state{display:flex;align-items:center;gap:4px;color:var(--wine);font-size:9px;font-weight:800;letter-spacing:.08em;white-space:nowrap}.room-rules-state i{font-size:17px;font-weight:500}
.room-modal[hidden]{display:none!important}
.room-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;opacity:0;transition:opacity .18s ease}
.room-modal.is-open{opacity:1}
.room-modal-backdrop{position:absolute;inset:0;background:rgba(23,19,15,.46);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.room-modal-panel{position:relative;width:min(100%,570px);max-height:min(760px,calc(100dvh - 40px));overflow:auto;border:1px solid color-mix(in srgb,var(--wine) 35%,var(--line));border-radius:14px;background:var(--white);box-shadow:0 28px 70px -36px rgba(23,19,15,.65);transform:translateY(12px) scale(.985);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.room-modal.is-open .room-modal-panel{transform:none}
.room-modal-head{display:grid;grid-template-columns:48px minmax(0,1fr) 36px;gap:13px;align-items:start;padding:22px 22px 18px;border-bottom:1px solid var(--line)}
.room-modal-head>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(125,23,39,.08);color:var(--wine)}
.room-modal-head>span i{font-size:21px;font-weight:500}
.room-modal-head>div{min-width:0;display:grid;gap:3px}.room-modal-head small{color:var(--wine);font-size:9px;font-weight:800;letter-spacing:.15em}.room-modal-head h2{margin:0;font:29px/1 "DM Serif Display";font-weight:400}.room-modal-head p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.room-modal-head>button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}.room-modal-head>button i{font-size:19px;font-weight:500}
.room-modal-body{padding:18px 22px}
.room-modal-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;padding:16px 22px 20px;border-top:1px solid var(--line);background:rgba(241,236,223,.22)}
.room-modal-actions button{min-height:48px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.06em;cursor:pointer}.room-modal-actions .secondary{border:1px solid var(--line);background:transparent;color:var(--ink)}.room-modal-actions .primary{border:1px solid var(--ink);background:var(--ink);color:var(--white)}.room-modal-actions .primary.is-danger{border-color:var(--wine);background:var(--wine)}
.room-rules-modal-panel .rule-switch-master{margin-bottom:14px;background:rgba(125,23,39,.035);border-color:color-mix(in srgb,var(--wine) 28%,var(--line))}
.room-rules-options{transition:opacity .2s ease,filter .2s ease}.room-rules-options[aria-disabled="true"]{opacity:.4;filter:grayscale(.35);pointer-events:none}
.room-rules-modal-panel .room-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:15px 0;border-top:1px solid var(--line)}
.room-rules-modal-panel .room-rule-grid label{display:block;color:var(--ink);font-size:10px!important;font-weight:800;letter-spacing:.08em!important}.room-rules-modal-panel .room-rule-grid label>span{display:block;margin-bottom:7px}.room-rules-modal-panel .room-rule-grid input,.room-rules-modal-panel .room-rule-grid select{width:100%;height:46px!important;min-height:46px!important;padding:0 11px!important;border:1px solid var(--line);border-radius:7px;background:var(--white)!important;color:var(--ink);font-size:12px!important;letter-spacing:0!important}.room-rules-modal-panel .room-rule-grid label>small{display:block;margin-top:6px;color:var(--muted);font-size:9px;line-height:1.35;letter-spacing:0}
.room-rules-modal-panel .room-rule-switches{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.room-rules-modal-panel .rule-switch{min-height:82px;padding:12px;border:1px solid var(--line);border-radius:8px;background:rgba(241,236,223,.22);display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center;gap:12px;cursor:pointer}.room-rules-modal-panel .rule-switch>span{display:grid;gap:3px}.room-rules-modal-panel .rule-switch b{font-size:12px}.room-rules-modal-panel .rule-switch small{color:var(--muted);font-size:10px;line-height:1.4}.room-rules-modal-panel .rule-switch>i{position:relative;width:38px;height:22px;padding:3px;border:1px solid var(--line);border-radius:99px;background:rgba(23,19,15,.06)}.room-rules-modal-panel .rule-switch>i::after{content:"";display:block;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:.2s}.room-rules-modal-panel .rule-switch input{position:absolute;opacity:0;pointer-events:none}.room-rules-modal-panel .rule-switch input:checked~i{border-color:var(--wine);background:rgba(125,23,39,.1)}.room-rules-modal-panel .rule-switch input:checked~i::after{transform:translateX(16px);background:var(--wine)}
.room-password-rule{grid-column:1/-1;display:block;padding:12px;border:1px solid color-mix(in srgb,var(--wine) 30%,var(--line));border-radius:8px;background:rgba(125,23,39,.025)}.room-password-rule>span{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:9px;font-weight:800;letter-spacing:.09em}.room-password-rule>span em{color:var(--muted);font-size:8px;font-style:normal}.room-password-rule input{width:100%;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:var(--white);font-size:13px}
.room-action-modal-panel{width:min(100%,470px)}.room-action-modal-panel .room-modal-head{border-bottom:0;padding-bottom:22px}.room-action-modal-panel .room-modal-actions{border-top:1px solid var(--line)}
/* Sidebar controls should read as separate controls, not one merged strip. */
.room-host-tools{display:block!important;margin:13px 0 0!important;padding:0!important;border:0!important}
.room-side-control{width:100%;min-height:58px!important;padding:9px 10px!important;border:1px solid var(--line)!important;border-radius:8px!important;background:rgba(255,250,240,.54)!important;display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;align-items:center!important;gap:9px!important;text-align:left!important;color:var(--ink)!important}
.room-side-control-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(125,23,39,.07);color:var(--wine)}.room-side-control-icon i{font-size:16px!important}.room-side-control-copy{display:grid;gap:2px}.room-side-control-copy b{font-size:10px;letter-spacing:.06em}.room-side-control-copy small{max-width:none!important;color:var(--muted)!important;font-size:9px!important;letter-spacing:0!important;text-align:left!important}.room-side-control>em{max-width:86px;color:var(--muted);font-size:7px;font-style:normal;font-weight:800;line-height:1.25;letter-spacing:.06em;text-align:right}
.room-local-settings{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:8px;padding:0!important;border:0!important}.room-local-settings button{height:42px!important;border:1px solid var(--line)!important;border-radius:8px!important;background:rgba(255,250,240,.54)!important;font-size:9px!important}.room-local-settings button i{font-size:15px!important}.room-local-settings button.is-off{background:rgba(23,19,15,.035)!important}
/* Ready state uses two equally weighted cards and no black border. */
.room-actions:has(.room-ready-grid){display:grid;gap:8px;width:min(100%,520px)}
.room-ready-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.room-ready,.room-ready-status{min-height:58px;border:1px solid var(--line)!important;border-radius:8px;background:rgba(255,250,240,.72);display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:9px;padding:9px 11px;color:var(--ink)}
.room-ready{cursor:pointer;text-align:left}.room-ready>span,.room-ready-status>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(125,23,39,.07);color:var(--wine)}.room-ready>span i,.room-ready-status>span i{font-size:16px;font-weight:500}.room-ready>div,.room-ready-status>div{display:grid;gap:2px}.room-ready small,.room-ready-status small{color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.09em}.room-ready b,.room-ready-status b{font-size:11px;letter-spacing:.04em}.room-ready.is-ready{border-color:rgba(46,139,98,.35)!important;background:rgba(46,139,98,.055);color:var(--ink)}.room-ready.is-ready>span{background:rgba(46,139,98,.1);color:#2e8b62}.room-start-button{width:100%;min-height:46px}
/* Result tray: readable and visible for the configured duration. */
.room-result-panel>header .room-result-heading small{font-size:9px!important}.room-result-panel>header .room-result-heading strong{font-size:19px!important;line-height:1.05}.room-result-panel>header em{font-size:9px!important}.room-opponent-result>div b{font-size:12px!important}.room-opponent-result>div small{font-size:8px!important}.room-opponent-result>strong{font-size:10px!important}.room-result-progress{height:3px!important}
@media(max-width:760px){
  .room-modal{padding:12px}.room-modal-panel{max-height:calc(100dvh - 24px);border-radius:11px}.room-modal-head{grid-template-columns:42px minmax(0,1fr) 34px;padding:17px 15px 14px;gap:10px}.room-modal-head>span{width:42px;height:42px}.room-modal-head h2{font-size:24px}.room-modal-head p{font-size:11px}.room-modal-body{padding:14px 15px}.room-modal-actions{padding:13px 15px 15px;grid-template-columns:1fr 1fr}.room-rules-modal-panel .room-rule-grid{grid-template-columns:1fr}.room-rules-modal-panel .room-rule-switches{grid-template-columns:1fr}.room-rules-launch-button{grid-template-columns:38px minmax(0,1fr) auto;padding:11px}.room-rules-launch .room-rules-icon{width:38px;height:38px}.room-rules-launch .room-rules-copy strong{font-size:18px}.room-rules-state{font-size:8px}
  .room-ready-grid{grid-template-columns:1fr 1fr}.room-ready,.room-ready-status{min-height:54px;grid-template-columns:32px minmax(0,1fr);padding:8px}.room-ready>span,.room-ready-status>span{width:32px;height:32px}.room-ready b,.room-ready-status b{font-size:10px}.room-ready small,.room-ready-status small{font-size:7px}
  .room-side-control{grid-template-columns:34px minmax(0,1fr)}.room-side-control>em{grid-column:2;text-align:left;max-width:none}.room-local-settings{grid-template-columns:1fr 1fr!important}
}
@media(prefers-reduced-motion:reduce){.room-modal,.room-modal-panel,.room-rules-launch-button{transition:none}}

/* v27 — compact desktop rules modal, balanced sidebar controls, stable table states */
*,*::before,*::after{box-sizing:border-box}

@media(min-width:761px){
  .room-rules-modal-panel{
    width:min(720px,calc(100vw - 56px));
    max-height:calc(100dvh - 44px);
    overflow:hidden;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .room-rules-modal-panel .room-modal-head{padding:18px 20px 15px}
  .room-rules-modal-panel .room-modal-head>span{width:43px;height:43px}
  .room-rules-modal-panel .room-modal-head h2{font-size:27px}
  .room-rules-modal-panel .room-modal-head p{font-size:11px}
  .room-rules-modal-panel .room-modal-body{
    padding:14px 20px 12px;
    overflow:hidden;
    min-width:0;
  }
  .room-rules-modal-panel .rule-switch-master{
    min-height:68px;
    margin:0 0 12px;
    padding:11px 13px;
  }
  .room-rules-modal-panel .room-rule-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    padding:12px 0;
    align-items:start;
  }
  .room-rules-modal-panel .room-rule-grid label{
    min-width:0;
    display:grid;
    grid-template-rows:auto 46px 28px;
    align-content:start;
  }
  .room-rules-modal-panel .room-rule-grid label>span{margin-bottom:7px}
  .room-rules-modal-panel .room-rule-grid input,
  .room-rules-modal-panel .room-rule-grid select{
    width:100%;min-width:0;height:46px!important;margin:0!important;
  }
  .room-rules-modal-panel .room-rule-grid label>small{margin-top:6px;min-height:22px}
  .room-rules-modal-panel .room-rule-switches{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px 10px;
    min-width:0;
  }
  .room-rules-modal-panel .rule-switch{
    min-width:0;
    min-height:72px;
    padding:10px 12px;
  }
  .room-rules-modal-panel .rule-switch-password{grid-column:1/-1;min-height:64px}
  .room-rules-modal-panel .room-password-rule{grid-column:1/-1;padding:10px 12px}
  .room-rules-modal-panel .room-password-rule[hidden]{display:none!important}
  .room-rules-modal-panel .room-password-rule input{height:44px}
  .room-rules-modal-panel .room-modal-actions{padding:12px 20px 16px}
}

@media(min-width:761px) and (max-height:700px){
  .room-rules-modal-panel .room-modal-head{padding-top:13px;padding-bottom:11px}
  .room-rules-modal-panel .room-modal-head p{display:none}
  .room-rules-modal-panel .room-modal-body{padding-top:10px;padding-bottom:9px}
  .room-rules-modal-panel .rule-switch-master{min-height:58px;margin-bottom:8px}
  .room-rules-modal-panel .room-rule-grid{padding:8px 0}
  .room-rules-modal-panel .rule-switch{min-height:62px}
  .room-rules-modal-panel .room-rule-switches{gap:7px 9px}
  .room-rules-modal-panel .room-modal-actions{padding-top:10px;padding-bottom:11px}
}

/* Sidebar tools live at the bottom, directly above the live-table note. */
.players-panel{min-width:0}
.room-sidebar-controls{
  margin-top:auto;
  width:100%;
  padding:14px 22px 13px;
  border-top:1px solid var(--line);
}
.room-sidebar-controls .room-host-tools{margin:0!important;padding:0!important}
.room-sidebar-controls .room-local-settings{margin-top:8px!important;padding:0!important}
.players-note{margin-top:0!important}
@media(min-width:761px){
  .room-sidebar-controls{padding-left:clamp(22px,5vw,76px);padding-right:30px}
  .players-note{padding-top:15px!important}
}
@media(max-width:760px){
  .room-sidebar-controls{margin-top:10px;padding:10px 0 0;border-top:1px solid var(--line)}
}

/* The kicked state keeps the normal site shell but clearly ends the room session. */
.room-membership-ended-live{
  min-height:calc(100dvh - 86px);
  display:grid!important;
  place-items:center;
  padding:30px 20px;
  border-top:1px solid var(--line);
}
.room-membership-ended{
  width:min(100%,520px);
  margin:auto;
  text-align:center;
}
.room-membership-ended>span{
  width:58px;height:58px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;background:rgba(125,23,39,.08);color:var(--wine)
}
.room-membership-ended>span i{font-size:25px;font-weight:500}
.room-membership-ended>small{display:block;color:var(--wine);font-size:10px;font-weight:800;letter-spacing:.14em}
.room-membership-ended h1{margin:9px 0 12px;font:42px/.98 "DM Serif Display";font-weight:400}
.room-membership-ended h1 em{color:var(--wine);font-weight:400}
.room-membership-ended p{max-width:430px;margin:0 auto 22px;color:var(--muted);font-size:13px;line-height:1.55}
.room-membership-ended a{min-height:48px;padding:0 22px;border-radius:7px;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--white);font-size:10px;font-weight:800;letter-spacing:.08em}

/* Result tray must always sit above the bottom guide and remain readable. */
.room-result-panel.is-visible{z-index:30;opacity:1;visibility:visible;pointer-events:auto}

/* v28 — balanced sidebar controls + result tray breathing room */
@media(min-width:761px){
  /* Only the utility area escapes the asymmetric sidebar content padding. */
  .room-sidebar-controls{
    width:calc(100% + clamp(22px,5vw,76px) + 30px);
    margin-left:calc(-1 * clamp(22px,5vw,76px));
    padding:14px 18px 12px;
    box-sizing:border-box;
  }
  .players-note{
    width:calc(100% + clamp(22px,5vw,76px) + 30px);
    margin-left:calc(-1 * clamp(22px,5vw,76px))!important;
    padding:15px 18px 0!important;
    box-sizing:border-box;
  }

  /* Keep the result tray low and close to the viewport edge. */
  .room-result-panel{
    bottom:12px!important;
    width:min(570px,calc(100% - 34px));
    max-height:none;
    padding:12px 14px 11px;
    overflow:visible;
  }
  .room-result-panel>header{padding-bottom:9px}
  .room-opponent-results{margin-top:9px}
  .round-insight{margin-top:8px}
  .room-result-progress{margin-top:9px!important}
}

@media(max-width:1100px) and (min-width:761px){
  .room-sidebar-controls{
    width:calc(100% + 48px);
    margin-left:-24px;
    padding-inline:16px;
  }
  .players-note{
    width:calc(100% + 48px);
    margin-left:-24px!important;
    padding-inline:16px!important;
  }
}

/* v30 — compact, balanced sidebar utility footer */
@media(min-width:761px){
  .room-sidebar-controls{
    width:auto!important;
    margin-top:auto!important;
    margin-left:calc(-1 * clamp(22px,5vw,76px) + 14px)!important;
    margin-right:-4px!important;
    padding:14px 0 12px!important;
    border-top:1px solid var(--line)!important;
    box-sizing:border-box;
  }
  .room-sidebar-controls .room-host-tools,
  .room-sidebar-controls .room-local-settings{
    width:100%;
    margin-left:0!important;
    margin-right:0!important;
  }
  .room-side-control{
    min-height:56px!important;
    padding:9px 11px!important;
    border-color:color-mix(in srgb,var(--line) 90%,transparent)!important;
    background:rgba(255,250,240,.42)!important;
  }
  .room-local-settings{
    gap:8px!important;
    margin-top:8px!important;
  }
  .room-local-settings button{
    height:42px!important;
    background:rgba(255,250,240,.42)!important;
  }
  .players-note{
    width:auto!important;
    margin:0 -4px 0 calc(-1 * clamp(22px,5vw,76px) + 14px)!important;
    padding:12px 0 0!important;
    border-top:1px solid var(--line)!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:9px!important;
    color:color-mix(in srgb,var(--ink) 62%,transparent)!important;
    font-size:10px!important;
    line-height:1.5!important;
    box-sizing:border-box;
  }
  .players-note i{
    flex:0 0 auto;
    margin-top:1px!important;
    font-size:14px!important;
  }
  .players-note span{max-width:210px}
}

@media(max-width:1100px) and (min-width:761px){
  .room-sidebar-controls{
    margin-left:-10px!important;
    margin-right:-4px!important;
  }
  .players-note{
    margin-left:-10px!important;
    margin-right:-4px!important;
  }
}

/* v31 — true inset sidebar footer + non-scrolling desktop result tray */
@media(min-width:761px){
  /* Utility footer stays inside the sidebar with equal breathing room. */
  .room-sidebar-controls{
    width:100%!important;
    margin-top:auto!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:14px 12px 12px!important;
    border-top:1px solid var(--line)!important;
    box-sizing:border-box!important;
  }
  .room-sidebar-controls .room-host-tools,
  .room-sidebar-controls .room-local-settings{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .players-note{
    width:100%!important;
    margin:0!important;
    padding:12px 12px 0!important;
    border-top:1px solid var(--line)!important;
    box-sizing:border-box!important;
  }
  .players-note span{max-width:none!important}

  /* Result tray sits 12px above the viewport edge without creating page overflow. */
  .room-result-panel{
    bottom:12px!important;
    max-height:min(230px,calc(100% - 24px))!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body[data-page="rooms"][data-room]:not([data-room=""]),
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-shell,
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-live,
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-layout{
    overflow:hidden!important;
  }
}

/* v32 — stable result tray + live-note bottom breathing room */
@media(min-width:761px){
  /* Keep the live-table note away from the viewport/sidebar bottom edge. */
  .players-note{
    padding-bottom:14px!important;
  }

  /* The revealed-result tray must not drift when room content/polling changes. */
  .room-result-panel{
    position:fixed!important;
    left:50%!important;
    bottom:12px!important;
    margin:0!important;
    transform:translate(-50%,18px);
  }
  .room-result-panel.is-visible{
    transform:translate(-50%,0);
  }
}

/* v35 — room setup flow without decorative card preview */
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-shell{
  max-width:1360px;
  padding:clamp(38px,5vh,64px) clamp(24px,4vw,58px) 42px;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,500px);
  gap:clamp(56px,7vw,108px);
}
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-intro{
  align-self:stretch;
  min-height:590px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  padding-right:22px;
}
.room-intro-copy{position:relative;z-index:2}
.room-intro-copy>p:not(.kicker){max-width:560px;margin:0;color:var(--muted);font-size:17px;font-weight:500;line-height:1.65}
.room-flow{display:flex;align-items:center;gap:10px;margin-top:32px;flex-wrap:wrap}
.room-flow>span{min-width:132px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:rgba(255,250,240,.62);display:grid;grid-template-columns:auto 28px;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.room-flow>span>b{font-size:8px;letter-spacing:.14em;color:var(--wine)}
.room-flow>span>i{grid-row:1/3;grid-column:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(125,23,39,.07);color:var(--wine);font-size:14px;font-weight:500}
.room-flow>span>em{font-size:11px;font-style:normal;font-weight:700;letter-spacing:.01em}
.room-flow>i{color:var(--muted);font-size:15px;font-weight:500}

body[data-page="rooms"][data-room=""][data-invite-room=""] .room-forms{
  align-self:center;
  width:100%;
  border-color:color-mix(in srgb,var(--wine) 30%,var(--line));
  border-radius:14px;
  padding:9px;
  box-shadow:0 30px 70px -48px rgba(23,19,15,.65),0 18px 40px -34px var(--wine);
}
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-tabs{border:0;background:rgba(241,236,223,.55);border-radius:9px;padding:4px}
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-tabs button{font-size:11px;font-weight:750}
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form{padding:24px 20px 16px}
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form>label{gap:7px;margin-bottom:17px;font-size:11px;font-weight:700;letter-spacing:.09em}
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form input,
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form select{height:54px;border-radius:8px;background:rgba(255,250,240,.9);font-size:15px;font-weight:550}
body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form>button{height:55px;border-radius:8px;font-size:11px;font-weight:800}
.room-error{min-height:22px;margin:0 20px 4px;color:var(--hide);font-size:12px;font-weight:600;line-height:1.45}
.builder-hint{font-weight:600}

/* Desktop rules modal: no scrollbars, equal fields, tighter helper spacing. */
@media(min-width:761px){
  .room-rules-modal-panel{width:min(760px,calc(100vw - 48px));max-height:none;overflow:visible}
  .room-rules-modal-panel .room-modal-body{overflow:visible;padding:15px 20px 13px}
  .room-rules-modal-panel .rule-switch-master{min-height:66px;margin:0 0 11px;padding:11px 13px;border-radius:9px}
  .room-rules-modal-panel .rule-switch-master b{font-size:13px;font-weight:700}
  .room-rules-modal-panel .rule-switch-master small{font-size:10px;font-weight:500;line-height:1.35}
  .room-rules-modal-panel .room-rule-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:11px 0 12px;align-items:stretch}
  .room-rules-modal-panel .room-rule-grid label{display:grid;grid-template-rows:17px 48px auto;gap:6px;margin:0;align-content:start}
  .room-rules-modal-panel .room-rule-grid label>span{margin:0;font-size:10px;font-weight:750;line-height:17px}
  .room-rules-modal-panel .room-rule-grid input,
  .room-rules-modal-panel .room-rule-grid select{height:48px!important;min-height:48px!important;margin:0!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important}
  .room-rules-modal-panel .room-rule-grid label>small{min-height:0;margin:0;font-size:9px;font-weight:550;line-height:1.35}
  .room-rules-modal-panel .room-rule-switches{grid-template-columns:1fr 1fr;gap:9px 10px}
  .room-rules-modal-panel .rule-switch{min-height:72px;padding:11px 12px;border-radius:9px}
  .room-rules-modal-panel .rule-switch b{font-size:12px;font-weight:700}
  .room-rules-modal-panel .rule-switch small{font-size:10px;font-weight:500;line-height:1.38}
  .room-rules-modal-panel .rule-switch-password{grid-column:1/-1;min-height:64px}
}
.room-password-rule{
  overflow:hidden;
  opacity:0;
  max-height:0;
  transform:translateY(-6px);
  margin-top:-8px;
  padding-top:0!important;
  padding-bottom:0!important;
  border-color:transparent!important;
  transition:max-height .28s cubic-bezier(.2,.8,.2,1),opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),margin .28s ease,padding .28s ease,border-color .2s ease;
}
.room-password-rule.is-visible{
  opacity:1;
  max-height:96px;
  transform:translateY(0);
  margin-top:0;
  padding:10px 12px!important;
  border-color:color-mix(in srgb,var(--wine) 30%,var(--line))!important;
}
.room-password-rule[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.room-password-rule.is-visible[hidden]{visibility:visible}

.players-note span{font-size:13px!important;font-weight:500!important;line-height:1.45!important}

@media(max-width:980px) and (min-width:761px){
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-shell{grid-template-columns:minmax(0,.9fr) minmax(390px,470px);gap:44px;padding-inline:28px}
  .room-flow>span{min-width:118px}
}
@media(max-width:760px){
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-shell{display:block;padding:28px 16px 30px}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-intro{min-height:0;padding:0}
  .room-intro-copy>p:not(.kicker){font-size:14px}
  .room-flow{gap:7px;margin-top:22px}.room-flow>span{min-width:0;flex:1;padding:9px}.room-flow>span>b{display:none}.room-flow>span>em{font-size:9px}.room-flow>i{display:none}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-forms{margin-top:30px}
  .room-password-rule{transition:max-height .26s ease,opacity .2s ease,transform .26s ease,margin .26s ease,padding .26s ease,border-color .2s ease}
}

/* v36 — separate SFX / ambience / vibration controls */
.room-local-settings{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.room-local-settings button{padding-inline:5px!important;gap:5px!important;font-size:7.5px!important;letter-spacing:.035em!important;white-space:nowrap!important}
.room-local-settings button#toggle-room-music:not(.is-off){border-color:color-mix(in srgb,var(--wine) 28%,var(--line))!important;color:var(--wine)!important;background:rgba(125,23,39,.055)!important}
@media(max-width:1080px) and (min-width:761px){.room-local-settings{grid-template-columns:1fr 1fr!important}.room-local-settings #toggle-room-music{grid-column:1/-1}}
@media(max-width:760px){.room-local-settings{grid-template-columns:repeat(3,minmax(0,1fr))!important}.room-local-settings button{font-size:7px!important}}

/* v39 — mobile room UX only. Desktop room layout remains untouched. */
.room-mobile-panel-toggle,.room-mobile-sidebar-close,.room-mobile-sidebar-backdrop{display:none}
.players-head-actions{display:flex;align-items:center;gap:8px}
@media(max-width:760px){
  html.room-modal-open,html.room-modal-open body,html.room-mobile-table-open,html.room-mobile-table-open body{overflow:hidden!important}

  /* Setup / invite: single, thumb-friendly flow. */
  body[data-page="rooms"] .room-shell{padding-inline:14px}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-shell{padding:26px 14px calc(30px + env(safe-area-inset-bottom))}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-intro h1{font-size:clamp(46px,14vw,62px);line-height:.91}
  .room-intro-copy>p:not(.kicker){font-size:13px;line-height:1.55}
  .room-flow{margin-top:18px;gap:6px}.room-flow>span{min-height:48px;padding:8px 9px;border-radius:8px}.room-flow>span>em{font-size:9px;line-height:1.2}.room-flow>span>i{width:27px;height:27px}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-forms{margin-top:22px;border-radius:12px;padding:6px;box-shadow:0 20px 42px -34px rgba(23,19,15,.72)}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form{padding:18px 13px 12px}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form>label{margin-bottom:14px;gap:6px;font-size:10px}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form input,body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form select{height:52px;font-size:16px!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form>button{height:52px}
  .room-rules-launch-button{min-height:64px;padding:10px 12px}.room-rules-launch-button strong{font-size:16px}.room-rules-launch-button small{font-size:10px;line-height:1.4}
  .custom-deck-builder{padding:14px}.custom-deck-row{grid-template-columns:1fr}.custom-deck-builder textarea{min-height:210px;font-size:16px!important}.custom-deck-tools{align-items:flex-start;gap:10px;flex-direction:column}.custom-deck-tools>div{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}.custom-deck-tools button{min-height:44px}

  /* Rules/action modals become safe-area aware bottom sheets. */
  .room-modal{padding:10px;align-items:flex-end}.room-modal-panel{width:100%;max-width:560px;max-height:calc(100dvh - 20px);border-radius:15px 15px 9px 9px;overflow:hidden}.room-modal-head{padding:16px 15px 13px}.room-modal-head h2{font-size:25px}.room-modal-head p{font-size:11px;line-height:1.45}.room-modal-body{padding:13px 15px;overflow:auto;overscroll-behavior:contain}.room-modal-actions{padding:10px 15px calc(10px + env(safe-area-inset-bottom));gap:7px}.room-modal-actions button{min-height:48px}
  .room-rules-modal-panel .rule-switch-master{min-height:64px;padding:10px}.room-rules-modal-panel .room-rule-grid{grid-template-columns:1fr;gap:9px;padding-block:9px}.room-rules-modal-panel .room-rule-grid label{display:grid;grid-template-columns:minmax(0,1fr) minmax(105px,42%);grid-template-rows:auto auto;gap:3px 10px;align-items:center;margin:0}.room-rules-modal-panel .room-rule-grid label>span{font-size:10px;font-weight:750}.room-rules-modal-panel .room-rule-grid input,.room-rules-modal-panel .room-rule-grid select{grid-column:2;grid-row:1/3;height:46px!important;min-height:46px!important;margin:0!important;font-size:15px!important}.room-rules-modal-panel .room-rule-grid label>small{grid-column:1;grid-row:2;margin:0;font-size:9px;line-height:1.3}.room-rules-modal-panel .room-rule-switches{grid-template-columns:1fr;gap:7px}.room-rules-modal-panel .rule-switch{min-height:62px;padding:10px}.room-rules-modal-panel .rule-switch b{font-size:11px}.room-rules-modal-panel .rule-switch small{font-size:9.5px;line-height:1.35}.room-password-rule.is-visible{max-height:110px}

  .room-invite-state{width:100%;max-width:460px;margin:22px auto;padding:24px 16px calc(22px + env(safe-area-inset-bottom));border-radius:12px}.room-invite-state>h1{font-size:clamp(43px,14vw,58px);line-height:.92}.room-invite-state>p{font-size:12px;line-height:1.55}.invite-join-form{width:100%;margin-top:20px}.invite-join-form input{height:52px;font-size:16px!important}.invite-join-form button,.room-invite-state>a{min-height:52px}

  /* Live room: keep the game itself one-screen. Table/players move to a drawer. */
  body[data-page="rooms"][data-room]:not([data-room=""]){height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
  body[data-page="rooms"][data-room]:not([data-room=""]) .topbar{position:relative;top:auto;height:64px}
  body[data-page="rooms"][data-room]:not([data-room=""]) .room-shell{height:calc(100dvh - 64px)!important;min-height:0!important;padding:0!important;overflow:hidden!important}
  .room-live{height:100%;min-height:0;overflow:hidden}
  .room-live-top{flex:0 0 auto;min-height:78px;padding:0;background:rgba(241,236,223,.94);border-bottom:1px solid var(--line)}
  .room-live-top-inner{height:100%;padding:7px 12px;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:34px 29px;gap:4px 6px}
  .connection-state{grid-column:1;grid-row:1;justify-self:start;min-width:0;font-size:8px}.connection-state span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connection-state i{flex:0 0 auto}
  .room-mobile-panel-toggle{grid-column:3;grid-row:1;display:flex;align-items:center;gap:5px;height:32px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:rgba(255,250,240,.68);font-size:8px;font-weight:800;letter-spacing:.08em}.room-mobile-panel-toggle i{font-size:14px}.room-mobile-panel-toggle b{min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:8px}
  .room-table-meta{grid-column:2;grid-row:1;display:flex;gap:5px;align-items:center;justify-self:end}.room-code-ticket{width:auto!important;height:32px!important;padding:0 5px 0 8px!important;border-radius:7px!important}.room-code-ticket span{display:none}.room-code-ticket strong{font-size:10px}.room-code-ticket i{width:23px!important;height:23px!important;font-size:12px!important}#room-round{height:32px!important;min-width:58px!important;padding:0 8px!important;font-size:8px!important}
  .room-live-top .room-deck-meta{grid-column:1/-1!important;grid-row:2!important;justify-self:center!important;min-height:28px!important;height:28px!important;max-width:68vw;padding:2px 9px 2px 3px!important;font-size:8px!important}.room-live-top .room-deck-meta>i{width:23px!important;height:23px!important;font-size:12px!important}.room-live-top .room-deck-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .room-layout{position:relative;flex:1 1 auto;min-height:0;height:auto!important;padding:0 10px calc(6px + env(safe-area-inset-bottom))!important;display:block!important;overflow:hidden!important}
  .room-play-column{position:relative;order:initial;width:100%;height:100%!important;min-height:0;padding:0!important;display:flex;flex-direction:column;align-items:center;overflow:hidden!important}
  .room-card-stage.game-stage{width:100%;height:auto!important;min-height:0!important;flex:1 1 auto;margin:0;overflow:visible}
  .room-card-stage .room-card.question-card,.room-card-stage .room-back.back-card{width:min(84vw,350px);height:min(55dvh,455px)!important;min-height:310px!important;max-height:455px}
  .room-card-stage .room-card.question-card .question-content{padding:clamp(24px,7vw,34px)}.room-card-stage .room-card.question-card .question-content h2{font-size:clamp(25px,7.7vw,32px)!important;line-height:1.14!important;margin:17px 0 26px!important}.room-card-stage .room-card.question-card .question-content small{font-size:9px!important}
  .room-swipe-guide.swipe-guide{width:min(100%,390px);min-height:50px;flex:0 0 50px;margin:0!important;gap:4px}.room-swipe-guide button{min-height:44px;font-size:9px!important}.room-drag-guide{min-width:88px}
  .room-actions{position:absolute!important;left:50%!important;bottom:54px!important;width:min(calc(100% - 8px),390px)!important;transform:translateX(-50%)!important;margin:0!important}.room-waiting-line{min-height:42px;font-size:10px!important}

  /* Result tray is viewport-anchored and scrolls internally, never the whole page. */
  .room-result-panel{position:fixed!important;left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:520px;max-height:min(42dvh,300px)!important;margin:0 auto!important;padding:12px!important;transform:translateY(16px)!important;overflow:hidden!important;border-radius:12px!important;z-index:95!important}.room-result-panel.is-visible{transform:none!important}.room-result-panel>header{grid-template-columns:34px minmax(0,1fr) auto!important;gap:9px!important}.room-result-panel>header>span{width:34px!important;height:34px!important}.room-result-panel>header h3{font-size:18px!important}.room-result-panel>header small{font-size:8px!important}.room-result-panel>header em{font-size:8px!important}.room-opponent-results{display:grid!important;grid-template-columns:1fr!important;max-height:145px!important;overflow:auto!important;overscroll-behavior:contain;padding-right:2px!important;scrollbar-width:thin}.room-opponent-result{width:100%!important;min-width:0!important;min-height:46px}.room-opponent-result>div b{font-size:11px!important}.room-opponent-result>strong{font-size:9px!important}

  /* Players/settings as a mobile table drawer. */
  .room-sidebar{position:fixed!important;left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;z-index:111!important;width:auto!important;height:auto!important;max-height:min(78dvh,650px)!important;margin:0!important;padding:0!important;border:1px solid var(--line)!important;border-radius:14px!important;background:var(--paper)!important;box-shadow:0 30px 70px -35px rgba(23,19,15,.75)!important;transform:translateY(calc(100% + 30px));opacity:0;visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .28s;overflow:hidden!important}
  html.room-mobile-table-open .room-sidebar{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  .room-mobile-sidebar-backdrop{position:fixed;inset:0;z-index:110;display:block;border:0;background:rgba(23,19,15,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s linear .2s}
  html.room-mobile-table-open .room-mobile-sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .players-panel{max-height:min(78dvh,650px);padding:0;display:flex;flex-direction:column}.players-panel>header{flex:0 0 auto;padding:16px 15px 12px;border-bottom:1px solid var(--line)}.players-panel>header h2{font-size:24px}.players-head-actions{margin-left:auto}.players-head-actions>span{min-width:29px;height:29px}.room-mobile-sidebar-close{display:grid;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;place-items:center;background:rgba(255,250,240,.7);font-size:18px}
  #players{min-height:0;max-height:30dvh;overflow:auto;padding:7px 12px;overscroll-behavior:contain}.room-player{min-height:50px;padding:8px 5px}.room-player-name{font-size:11px}.room-player small{font-size:8px}
  .room-sidebar-controls{margin:0!important;padding:12px!important;border-top:1px solid var(--line)!important}.room-local-settings{gap:6px!important}.room-local-settings button{min-height:44px!important;border-radius:7px!important;font-size:7.5px!important}.room-host-tools button{min-height:44px!important}.players-note{margin:0!important;padding:10px 12px calc(12px + env(safe-area-inset-bottom))!important;border-top:1px solid var(--line)!important;font-size:11px!important}.players-note span{font-size:11px!important;line-height:1.4!important}

  .room-action-modal-panel{max-height:80dvh}.room-action-modal-panel .room-modal-actions{display:grid;grid-template-columns:1fr 1fr}
  .copy-tooltip{top:calc(100% + 7px)}
}

@media(max-width:760px) and (max-height:690px){
  .room-live-top{min-height:69px}.room-live-top-inner{grid-template-rows:31px 26px;padding-block:5px}.room-card-stage .room-card.question-card,.room-card-stage .room-back.back-card{height:min(52dvh,390px)!important;min-height:285px!important}.room-swipe-guide.swipe-guide{min-height:46px;flex-basis:46px}.room-card-stage .room-card.question-card .question-content h2{font-size:clamp(23px,7vw,29px)!important;margin:13px 0 20px!important}
}


/* v40 — mobile-first room polish requested after v39 */
.field-label-inline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.field-label-inline em{font-style:normal;color:var(--muted);font-size:.92em;font-weight:600;letter-spacing:0;text-transform:none}
.room-mobile-panel-toggle,.room-tabs button{color:var(--ink)}
.room-swipe-guide.swipe-guide{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:12px!important;width:min(100%,540px)!important;min-height:54px!important;margin:0!important}.room-swipe-guide.swipe-guide button{min-height:48px!important;padding:0 4px!important;gap:8px!important;font-size:10px!important}.room-swipe-guide.swipe-guide button:first-child{justify-content:flex-end!important}.room-swipe-guide.swipe-guide button:last-child{justify-content:flex-start!important}.room-swipe-guide .room-drag-guide{min-width:76px!important}
.room-modal{overflow-y:auto;overflow-x:hidden}.room-modal-panel{overflow-x:hidden}

@media(max-width:760px){
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-flow{display:none!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-intro{display:block!important;min-height:0!important;padding:0!important;margin-bottom:18px!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-intro h1{font-size:44px!important;line-height:.92!important;margin:8px 0 12px!important}
  .room-intro-copy>p:not(.kicker){font-size:13px!important;line-height:1.55!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-forms{margin-top:0!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-shell{padding:18px 14px 26px!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form{padding:18px 14px 12px!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form label{font-size:10px!important;letter-spacing:.09em!important;margin-bottom:14px!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form input,
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form select,
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form textarea{font-size:14px!important}
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form input,
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form select,
  body[data-page="rooms"][data-room=""][data-invite-room=""] .room-form>button{height:50px!important}

  .custom-deck-builder{margin:8px 0 18px!important;padding:16px 14px!important;border-radius:12px!important;background:linear-gradient(180deg,rgba(125,23,39,.045),rgba(255,250,240,.92))!important}
  .custom-deck-head{align-items:flex-start!important;gap:12px!important;margin-bottom:14px!important}.custom-deck-head strong{font-size:22px!important;line-height:1.02!important}.custom-deck-head>i{width:42px!important;height:42px!important}
  .custom-deck-builder label{gap:7px!important;margin-bottom:12px!important;font-size:10px!important;letter-spacing:.08em!important}
  .custom-deck-row{grid-template-columns:1fr!important;gap:10px!important}.custom-deck-row label:last-child input,#custom-deck-color{height:48px!important;padding:6px 8px!important}
  .custom-deck-builder textarea{min-height:190px!important;font-size:15px!important;line-height:1.45!important}
  .custom-deck-tools{display:grid!important;gap:10px!important;align-items:stretch!important}.custom-deck-tools>span{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:max-content;padding:7px 11px;border-radius:999px;background:rgba(125,23,39,.07);color:var(--wine)!important;font-size:11px!important;font-weight:700!important}.custom-deck-tools>div{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}.custom-deck-tools button{width:100%!important;min-height:46px!important;border-radius:8px!important;font-size:10px!important}

  .room-modal{padding:8px!important;align-items:flex-end!important;overflow-y:auto!important;overflow-x:hidden!important}
  .room-modal-panel{width:100%!important;max-width:560px!important;max-height:calc(100dvh - 16px)!important;overflow-y:auto!important;overflow-x:hidden!important;border-radius:16px 16px 10px 10px!important;-webkit-overflow-scrolling:touch}
  .room-modal-head{padding:14px 14px 10px!important;gap:10px!important}
  .room-modal-head h2{font-size:23px!important;line-height:.98!important}
  .room-modal-head p{margin-top:1px!important;font-size:10px!important;line-height:1.42!important}
  .room-modal-body{padding:12px 14px 14px!important;overflow-y:visible!important;overflow-x:hidden!important}
  .room-modal-actions{padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;grid-template-columns:1fr 1fr!important}
  .room-modal-actions button{min-height:46px!important}
  .room-rules-modal-panel .room-modal-head{padding-bottom:8px!important}
  .room-rules-modal-panel .room-rule-grid{padding-top:10px!important;gap:8px!important}
  .room-rules-modal-panel .room-rule-grid label{gap:4px!important}
  .room-rules-modal-panel .room-rule-grid label>small{margin-top:0!important;font-size:8px!important;line-height:1.3!important}
  .room-rules-modal-panel .room-rule-grid input,
  .room-rules-modal-panel .room-rule-grid select{height:44px!important;min-height:44px!important;font-size:13px!important}
  .room-rules-modal-panel .rule-switch{min-height:62px!important;padding:10px 11px!important}
  .room-rules-modal-panel .rule-switch b{font-size:11px!important}
  .room-rules-modal-panel .rule-switch small{font-size:9px!important;line-height:1.35!important}
  .room-rules-modal-panel .room-rule-switches{gap:8px!important}
  .room-password-rule.is-visible{max-height:132px!important}

  .connection-state{display:none!important}
  .room-live-top{min-height:auto!important;margin-bottom:10px!important;padding:8px 0 10px!important}
  .room-live-top-inner{display:grid!important;grid-template-columns:1fr!important;grid-auto-rows:auto!important;gap:8px!important;padding:0 14px!important}
  .room-live-top .room-deck-meta{grid-column:auto!important;grid-row:auto!important;justify-self:stretch!important;width:100%!important;order:1;margin:0!important}
  .room-table-meta{grid-column:auto!important;grid-row:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;order:2}
  .room-code-ticket{grid-column:auto!important;grid-row:auto!important;width:100%!important;justify-self:stretch!important;justify-content:center!important;margin:0!important}
  .room-code-ticket span{margin-right:auto!important}
  #room-round{grid-column:auto!important;grid-row:auto!important;justify-self:stretch!important;display:grid!important;place-items:center!important;min-height:42px!important;padding:0 12px!important}
  .room-mobile-panel-toggle{grid-column:auto!important;grid-row:auto!important;display:flex!important;justify-content:space-between!important;align-items:center!important;width:100%!important;min-height:42px!important;height:42px!important;padding:0 12px!important;border-radius:9px!important;background:rgba(255,250,240,.82)!important;color:var(--ink)!important;order:3}
  .room-mobile-panel-toggle span{font-size:9px!important;letter-spacing:.11em!important}.room-mobile-panel-toggle i{font-size:16px!important;color:var(--wine)!important}

  .room-layout{gap:10px!important}
  .room-card-stage{height:min(460px,calc(100dvh - 286px))!important;min-height:360px!important}
  .room-card-stage .room-card.question-card,.room-card-stage .room-back.back-card{height:min(430px,calc(100dvh - 314px))!important;min-height:320px!important}

  .room-swipe-guide.swipe-guide{width:min(100%,390px)!important;min-height:48px!important;gap:8px!important}.room-swipe-guide.swipe-guide button{font-size:9px!important}.room-swipe-guide .room-drag-guide{min-width:72px!important}

  .room-result-panel{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;max-height:min(40dvh,290px)!important;padding:11px 12px!important}
  .room-result-panel>header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important}
  .room-result-heading{gap:0!important}.room-result-heading>span{display:none!important}.room-result-panel>header .room-result-heading strong{font-size:16px!important}
  .room-opponent-results{max-height:152px!important}

  .room-card-stage.is-finished{height:auto!important;min-height:0!important;padding-bottom:0!important}
  .room-card-stage.is-finished .room-back{display:none!important}
  .room-card-stage.is-finished .room-card{position:relative!important;height:auto!important;min-height:0!important;max-height:min(58dvh,520px)!important;overflow:auto!important}
  .room-final{padding:20px 18px 18px!important}.room-final h1{font-size:30px!important;margin:8px 0 12px!important}.room-final-stats{gap:6px!important}.room-final-stats span{padding:10px 5px!important;font-size:8px!important}.room-final-stats b{font-size:22px!important}.final-players{max-height:none!important;margin-top:12px!important;gap:7px!important}.final-player{padding:10px 9px!important;align-items:center!important}.final-player b{font-size:11px!important}.final-player small{font-size:9px!important}.final-player em{font-size:10px!important}
  .room-actions{width:min(100%,390px)!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:12px!important}.room-actions button,.room-actions .room-new,.room-replay,.room-new-secondary{width:100%!important;min-height:50px!important}
}

/* v41 — mobile room geometry stabilization */
.room-mobile-deck-meta,.room-mobile-copy-link{display:none}

@media(max-width:760px){
  /* Never let iOS focus-zoom room forms. Keep visual density via height/padding instead. */
  body[data-page="rooms"] input,
  body[data-page="rooms"] select,
  body[data-page="rooms"] textarea{font-size:16px!important}

  /* Rules: compact text/input rhythm, no artificial empty rows. */
  .room-rules-modal-panel .room-modal-body{padding:10px 14px 7px!important}
  .room-rules-modal-panel .rule-switch-master{min-height:58px!important;margin:0 0 7px!important;padding:9px 10px!important}
  .room-rules-modal-panel .room-rule-grid{padding:7px 0 8px!important;gap:5px!important}
  .room-rules-modal-panel .room-rule-grid label{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 116px!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:1px!important;
    align-items:start!important;
    min-height:47px!important;
    margin:0!important;
  }
  .room-rules-modal-panel .room-rule-grid label>span{grid-column:1;grid-row:1;margin:2px 0 0!important;font-size:9px!important;line-height:1.15!important;font-weight:800!important}
  .room-rules-modal-panel .room-rule-grid label>small{grid-column:1;grid-row:2;margin:1px 0 0!important;font-size:8px!important;line-height:1.22!important;font-weight:550!important}
  .room-rules-modal-panel .room-rule-grid input,
  .room-rules-modal-panel .room-rule-grid select{grid-column:2!important;grid-row:1/3!important;width:116px!important;height:43px!important;min-height:43px!important;margin:0!important;padding-inline:10px!important;font-size:16px!important;align-self:center!important}
  .room-rules-modal-panel .room-rule-switches{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;margin:0!important}
  .room-rules-modal-panel .rule-switch{min-height:57px!important;margin:0!important;padding:9px 10px!important}
  .room-rules-modal-panel .rule-switch span{gap:1px!important}
  .room-rules-modal-panel .rule-switch b{font-size:10px!important;line-height:1.15!important}
  .room-rules-modal-panel .rule-switch small{font-size:8.5px!important;line-height:1.28!important}
  .room-password-rule{margin-bottom:0!important}
  .room-password-rule.is-visible{max-height:118px!important;margin-top:1px!important;padding:9px 10px!important}
  .room-rules-modal-panel .room-modal-actions{padding:8px 14px calc(9px + env(safe-area-inset-bottom))!important}

  /* All room modals use one stable viewport center. Opening another UI can no longer shift them. */
  html.room-modal-open,html.room-modal-open body{overflow:hidden!important}
  .room-modal{
    position:fixed!important;inset:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:8px!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }
  .room-modal[hidden]{display:none!important}
  .room-modal-panel{
    flex:0 0 auto!important;width:min(100%,560px)!important;
    max-height:calc(100svh - 16px)!important;
    margin:auto!important;overflow-y:auto!important;overflow-x:hidden!important;
    border-radius:14px!important;-webkit-overflow-scrolling:touch!important;
  }

  /* Live header: only TUR + Oyuncular / Masa Ayarları on one clean row. */
  .room-live-top{min-height:56px!important;height:56px!important;margin:0!important;padding:0!important;background:rgba(241,236,223,.96)!important}
  .room-live-top-inner{
    height:56px!important;padding:7px 12px!important;
    display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-rows:42px!important;gap:8px!important;align-items:center!important;
  }
  .connection-state,.room-live-top .room-deck-meta,.room-code-ticket{display:none!important}
  .room-table-meta{display:contents!important}
  #room-round{
    grid-column:1!important;grid-row:1!important;justify-self:start!important;
    min-width:62px!important;height:38px!important;min-height:38px!important;
    padding:0 11px!important;border-radius:9px!important;background:rgba(255,250,240,.72)!important;
    font-size:8px!important;letter-spacing:.09em!important;color:var(--ink)!important;
  }
  .room-mobile-panel-toggle{
    grid-column:2!important;grid-row:1!important;order:initial!important;
    justify-self:stretch!important;width:100%!important;height:38px!important;min-height:38px!important;
    padding:0 11px!important;border-radius:9px!important;background:rgba(255,250,240,.72)!important;color:var(--ink)!important;
    display:grid!important;grid-template-columns:22px minmax(0,1fr) auto!important;gap:7px!important;text-align:left!important;
  }
  .room-mobile-panel-toggle i{font-size:15px!important;color:var(--wine)!important}
  .room-mobile-panel-toggle span{font-size:9px!important;letter-spacing:.08em!important;white-space:nowrap!important}
  .room-mobile-panel-toggle b{justify-self:end!important}

  /* Category belongs to the card area, centered above the stack. */
  .room-mobile-deck-meta{
    flex:0 0 auto;min-height:32px;margin:7px auto 2px;padding:3px 10px 3px 4px;
    border:1px solid color-mix(in srgb,var(--room-color) 25%,var(--line));border-radius:999px;
    align-items:center;gap:7px;background:color-mix(in srgb,var(--room-color) 5%,rgba(255,250,240,.94));
    color:var(--ink);font-size:8px;font-weight:800;letter-spacing:.11em;max-width:74vw;
  }
  .room-mobile-deck-meta:not([hidden]){display:flex!important}
  .room-mobile-deck-meta>i{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;background:var(--room-color);color:#fff;font-size:12px}
  .room-mobile-deck-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .room-mobile-deck-meta>b{padding:3px 5px;border-radius:4px;background:var(--room-color);color:#fff;font-size:6px}

  /* Drawer owns sharing/invite on mobile. */
  .room-mobile-copy-link{
    width:100%;min-height:52px;margin:0 0 8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
    background:rgba(255,250,240,.7);color:var(--ink);align-items:center;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;text-align:left;
  }
  .room-mobile-copy-link{display:grid!important}
  .room-mobile-copy-link>i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(125,23,39,.08);color:var(--wine);font-size:16px}
  .room-mobile-copy-link>span{display:grid;gap:1px;min-width:0}.room-mobile-copy-link b{font-size:9px;letter-spacing:.07em}.room-mobile-copy-link small{font-size:8px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-mobile-copy-link em{font-size:8px;font-style:normal;font-weight:800;color:var(--wine);letter-spacing:.06em}

  /* /oyna and /oda now use the same exact guide geometry. */
  .room-swipe-guide.swipe-guide{
    width:min(100%,390px)!important;min-height:52px!important;flex:0 0 52px!important;
    margin:0 auto!important;gap:4px!important;padding-inline:2px!important;
  }
  .room-swipe-guide.swipe-guide button{min-height:44px!important;gap:5px!important;font-size:9px!important;padding:10px 3px!important}
  .room-swipe-guide.swipe-guide button>i{font-size:19px!important}
  .room-swipe-guide .room-drag-guide{min-width:88px!important}
  .room-swipe-guide .room-drag-guide small{font-size:7px!important}

  /* Lobby CTA: anchored at the viewport bottom, but reserve space so it never covers the card. */
  .room-play-column:has(.room-card-stage.is-lobby){padding-bottom:calc(68px + env(safe-area-inset-bottom))!important}
  .room-play-column:has(.room-card-stage.is-lobby) .room-actions{
    position:fixed!important;left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:520px!important;margin:0 auto!important;transform:none!important;z-index:90!important;
    display:grid!important;gap:7px!important;
  }
  .room-play-column:has(.room-card-stage.is-lobby) .room-start-button,
  .room-play-column:has(.room-card-stage.is-lobby) .room-actions>.primary{width:100%!important;min-height:50px!important;box-shadow:0 14px 30px -24px rgba(23,19,15,.6)}

  /* Final: content and actions stay in normal flow; no overlays on the summary card. */
  .room-play-column:has(.room-card-stage.is-finished){
    height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;
    padding:12px 8px calc(16px + env(safe-area-inset-bottom))!important;justify-content:flex-start!important;
  }
  .room-card-stage.is-finished{flex:0 0 auto!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;display:block!important}
  .room-card-stage.is-finished .room-back{display:none!important}
  .room-card-stage.is-finished .room-card{
    position:relative!important;inset:auto!important;width:min(100%,410px)!important;height:auto!important;min-height:0!important;max-height:none!important;
    margin:0 auto!important;overflow:visible!important;border-radius:14px!important;transform:none!important;
  }
  .room-final{padding:20px 16px 17px!important}.final-icon{width:50px!important;height:50px!important;margin-bottom:10px!important;font-size:22px!important}
  .room-final>small{font-size:8px!important}.room-final h1{font-size:31px!important;line-height:.96!important;margin:7px 0 13px!important}
  .room-final-stats{gap:5px!important}.room-final-stats span{padding:9px 4px!important;font-size:7px!important}.room-final-stats b{font-size:23px!important}
  .room-compatibility{margin:9px 0!important;padding:9px!important;grid-template-columns:36px minmax(0,1fr) auto!important;gap:8px!important}.room-compatibility>span{width:36px!important;height:36px!important}.room-compatibility strong{font-size:11px!important}.room-compatibility p{font-size:9px!important}.room-compatibility>em{font-size:23px!important}
  .final-players{max-height:170px!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding-right:2px!important;margin-top:9px!important;gap:6px!important}
  .final-player{padding:8px!important}.final-player>span{width:32px!important;height:32px!important}.final-player b{font-size:11px!important}.final-player small{font-size:9px!important}.final-player em{font-size:10px!important}
  .room-play-column:has(.room-card-stage.is-finished) .room-actions{
    position:static!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;
    width:min(100%,410px)!important;margin:10px auto 0!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;
  }
  .room-play-column:has(.room-card-stage.is-finished) .room-actions:has(.room-replay){grid-template-columns:1fr 1fr!important}
  .room-play-column:has(.room-card-stage.is-finished) .room-actions .room-new{width:100%!important;min-height:48px!important;padding:0 10px!important;font-size:9px!important}
  .room-play-column:has(.room-card-stage.is-finished) .room-replay{background:var(--wine)!important;border-color:var(--wine)!important;color:#fff!important}
  .room-play-column:has(.room-card-stage.is-finished) .room-new-secondary{background:var(--white)!important;color:var(--ink)!important}

  /* Revealed result keeps a fixed footprint without causing page scroll. */
  .room-result-panel{bottom:calc(10px + env(safe-area-inset-bottom))!important;max-height:min(38dvh,280px)!important}
}

/* Desktop/tablet room guide is the same shared component too. */
@media(min-width:761px){
  .room-swipe-guide.swipe-guide{width:min(100%,610px)!important;min-height:54px!important;height:54px!important;gap:38px!important;margin:0!important;padding:0!important}
  .room-swipe-guide.swipe-guide button{padding:10px 3px!important;gap:11px!important;font-size:10px!important}
  .room-swipe-guide .room-drag-guide{min-width:92px!important}
}


/* v42 — mobile room/detail polish without changing desktop game geometry */
/* The rules area should not have a separator line under the master switch on any viewport. */
.room-rules-modal-panel .room-rule-grid{border-top:0!important}

@media(max-width:760px){
  /* Safari input focus: keep controls at 16px to prevent viewport zoom. */
  .room-form input,.room-form select,.room-form textarea,
  .room-modal input,.room-modal select,.room-modal textarea{font-size:16px!important}

  /* Rules modal: remove nested side padding and vertically center helper copy with the input. */
  .room-rules-modal-panel .room-modal-body{padding:10px 14px 7px!important}
  .room-rules-modal-panel .rule-switch-master{margin-bottom:4px!important}
  .room-rules-modal-panel .room-rules-options{padding:0!important;margin:0!important}
  .room-rules-modal-panel .room-rule-grid{padding:4px 0 6px!important;gap:3px!important}
  .room-rules-modal-panel .room-rule-grid label{
    min-height:46px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 112px!important;
    grid-template-rows:auto auto!important;
    column-gap:9px!important;row-gap:0!important;
    align-content:center!important;align-items:center!important;
    margin:0!important;padding:0!important;
  }
  .room-rules-modal-panel .room-rule-grid label>span{
    grid-column:1!important;grid-row:1!important;
    align-self:end!important;margin:0 0 1px!important;
    font-size:9px!important;line-height:1.08!important;
  }
  .room-rules-modal-panel .room-rule-grid label>small{
    grid-column:1!important;grid-row:2!important;
    align-self:start!important;margin:0!important;
    font-size:8px!important;line-height:1.14!important;
  }
  .room-rules-modal-panel .room-rule-grid input,
  .room-rules-modal-panel .room-rule-grid select{
    grid-column:2!important;grid-row:1/3!important;
    width:112px!important;height:44px!important;min-height:44px!important;
    align-self:center!important;margin:0!important;padding:0 9px!important;
    font-size:16px!important;
  }
  .room-rules-modal-panel .room-rule-switches{gap:3px!important;margin:0!important;padding:0!important;border-top:0!important}
  .room-rules-modal-panel .rule-switch{min-height:52px!important;padding:7px 9px!important;gap:8px!important}
  .room-rules-modal-panel .rule-switch>span{gap:0!important}
  .room-rules-modal-panel .rule-switch b{font-size:10px!important;line-height:1.12!important}
  .room-rules-modal-panel .rule-switch small{font-size:8.25px!important;line-height:1.2!important;margin-top:2px!important}
  .room-rules-modal-panel .rule-switch-password{margin-bottom:0!important}
  .room-password-rule{margin:0!important}
  .room-password-rule.is-visible{max-height:106px!important;margin:3px 0 0!important;padding:8px 9px!important}
  .room-rules-modal-panel .room-modal-actions{padding-top:7px!important}

  /* Drawer: invitation link is its own block, not visually merged with host controls. */
  .room-sidebar-controls{display:block!important;padding:12px!important}
  .room-mobile-copy-link{margin:0 0 10px!important}
  .room-sidebar-controls .room-host-tools{
    width:100%!important;margin:0 0 10px!important;padding:10px 0 0!important;
    border-top:1px solid var(--line)!important;
  }
  .room-sidebar-controls .room-host-tools[hidden]{display:none!important}
  .room-sidebar-controls .room-local-settings{margin:0!important;padding-top:10px!important;border-top:1px solid var(--line)!important}

  /* Match /oyna exactly: the page gives the guide its horizontal breathing room. */
  .room-swipe-guide.swipe-guide{
    width:min(calc(100% - 26px),390px)!important;
    min-height:52px!important;flex:0 0 52px!important;
    margin:0 auto!important;padding:0 2px!important;gap:4px!important;
  }
  .room-swipe-guide.swipe-guide button{min-height:44px!important;padding:0!important;gap:5px!important;font-size:9px!important}
  .room-swipe-guide.swipe-guide button>i{font-size:19px!important}
  .room-swipe-guide .room-drag-guide{min-width:88px!important}
  .room-swipe-guide .room-drag-guide small{font-size:7px!important}

  /* Final summary is border-led, without the heavy card shadow. */
  .room-card-stage.is-finished .final-card{
    box-shadow:none!important;
    border:1px solid color-mix(in srgb,var(--room-color) 35%,var(--line))!important;
  }

  /* Final CTAs follow the same bottom-fixed pattern as “İlk kartı aç”. */
  .room-play-column:has(.room-card-stage.is-finished){
    overflow:hidden!important;
    padding:8px 8px calc(78px + env(safe-area-inset-bottom))!important;
  }
  .room-card-stage.is-finished{
    flex:1 1 auto!important;min-height:0!important;
    display:grid!important;place-items:start center!important;
    overflow:hidden!important;
  }
  .room-card-stage.is-finished .room-card{
    max-height:calc(100dvh - 64px - 56px - 86px - env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
  }
  .room-play-column:has(.room-card-stage.is-finished) .room-actions{
    position:fixed!important;
    left:12px!important;right:12px!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:520px!important;
    margin:0 auto!important;transform:none!important;
    z-index:90!important;
    display:grid!important;grid-template-columns:1fr!important;gap:7px!important;
  }
  .room-play-column:has(.room-card-stage.is-finished) .room-actions:has(.room-replay){grid-template-columns:1fr 1fr!important}
  .room-play-column:has(.room-card-stage.is-finished) .room-actions .room-new,
  .room-play-column:has(.room-card-stage.is-finished) .room-actions button{
    min-height:50px!important;margin:0!important;border-radius:8px!important;
  }
}


/* v43 — focused mobile spacing / rules / ready-state polish */
@media(max-width:760px){
  /* Drawer: the players list already separates the control area; avoid a second divider. */
  .room-sidebar-controls .room-host-tools{
    border-top:0!important;
    padding-top:0!important;
    margin-top:0!important;
  }

  /* Rules rows: wider control, slightly smaller input text, stronger left copy. */
  .room-rules-modal-panel .room-rule-grid label{
    grid-template-columns:minmax(0,1fr) 126px!important;
    column-gap:10px!important;
    min-height:48px!important;
  }
  .room-rules-modal-panel .room-rule-grid label>span{
    font-size:10px!important;
    line-height:1.08!important;
    font-weight:800!important;
  }
  .room-rules-modal-panel .room-rule-grid label>small{
    font-size:9px!important;
    line-height:1.12!important;
    font-weight:600!important;
  }
  .room-rules-modal-panel .room-rule-grid input,
  .room-rules-modal-panel .room-rule-grid select{
    width:126px!important;
    height:44px!important;
    min-height:44px!important;
    font-size:14px!important;
    font-weight:650!important;
  }

  /* Compact rule switches without leaving dead vertical space. */
  .room-rules-modal-panel .room-rule-switches{
    gap:2px!important;
  }
  .room-rules-modal-panel .rule-switch{
    min-height:48px!important;
    padding:6px 8px!important;
    gap:7px!important;
  }
  .room-rules-modal-panel .rule-switch b{
    font-size:10px!important;
    line-height:1.08!important;
  }
  .room-rules-modal-panel .rule-switch small{
    margin-top:1px!important;
    font-size:8px!important;
    line-height:1.14!important;
  }
  .room-rules-modal-panel .rule-switch-password{
    margin-bottom:0!important;
  }

  /* Hidden password field must not reserve a grid row. */
  .room-password-rule[hidden]:not(.is-visible){
    display:none!important;
    margin:0!important;
    padding:0!important;
    max-height:0!important;
  }
  .room-password-rule.is-visible{
    margin:2px 0 0!important;
    padding:7px 8px!important;
    max-height:92px!important;
  }
  .room-rules-modal-panel .room-modal-body{
    padding-bottom:4px!important;
  }
  .room-rules-modal-panel .room-modal-actions{
    padding-top:5px!important;
  }

  /* Ready cards: perfect circle and left-aligned content like Masa Durumu. */
  .room-ready,.room-ready-status{
    justify-items:start!important;
    text-align:left!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:9px!important;
  }
  .room-ready>span,.room-ready-status>span{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
  }
  .room-ready>span i,.room-ready-status>span i{
    display:block!important;
    margin:0!important;
    line-height:1!important;
    font-size:16px!important;
  }
  .room-ready>div,.room-ready-status>div{
    justify-self:start!important;
    text-align:left!important;
  }

  /* Give the category chip a little air below the compact room header. */
  .room-mobile-deck-meta{
    margin:14px auto 4px!important;
  }
}


/* v44 — mobile Hazırım card alignment + white active background */
@media(max-width:760px){
  .room-ready,
  .room-ready-status{
    width:100%!important;
    justify-content:start!important;
    justify-items:start!important;
    align-content:center!important;
    text-align:left!important;
  }

  .room-ready>span,
  .room-ready-status>span{
    justify-self:start!important;
    align-self:center!important;
  }

  .room-ready>div,
  .room-ready-status>div{
    width:100%!important;
    justify-self:start!important;
    align-self:center!important;
    text-align:left!important;
  }

  .room-ready.is-ready{
    background:var(--white)!important;
  }
}


/* v45 — Hazırım must use the same true left layout as Masa Durumu */
@media(max-width:760px){
  .room-actions .room-ready{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:stretch!important;
    justify-items:stretch!important;
    text-align:left!important;
    padding:8px 10px!important;
    gap:9px!important;
  }

  .room-actions .room-ready>span{
    grid-column:1!important;
    justify-self:start!important;
    align-self:center!important;
    margin:0!important;
  }

  .room-actions .room-ready>div{
    grid-column:2!important;
    justify-self:stretch!important;
    align-self:center!important;
    width:auto!important;
    margin:0!important;
    text-align:left!important;
  }

  .room-actions .room-ready>div small,
  .room-actions .room-ready>div b{
    display:block!important;
    width:100%!important;
    text-align:left!important;
  }

  .room-actions .room-ready.is-ready{
    background:var(--white)!important;
  }
}