/* Laptop layout: board, current action and players share one viewport. */
html, body { height:100%; overflow:hidden; }
.mp-app { height:100dvh; min-height:0; max-width:1600px; padding:10px 16px; overflow:hidden; }
.masthead { flex-wrap:nowrap; align-items:center; margin-bottom:8px; padding-bottom:8px; gap:10px; }
.masthead h1 { font-size:23px; }
.masthead p { font-size:11px; }
.mp-app .btn-ghost { color:var(--star); background:#E9ECFF12; border-color:#E9ECFF38; }
.mp-app .btn-ghost:hover { background:#E9ECFF28; }
.mp-app button { cursor:pointer; }
.mp-app button:disabled { cursor:default; opacity:.5; }
.mp-app button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #FFD274; outline-offset:3px; }
.mp-screen { flex:1; min-height:0; width:100%; }
.mp-card, .phase-panel, .lobby-panel, .room-card { background:linear-gradient(160deg,#1D2650,#121A39); border:1px solid #E9ECFF29; border-radius:14px; color:var(--star); }
.mp-card, .phase-panel, .lobby-panel { padding:18px; }
h2, h3 { font-family:'Jua',sans-serif; font-weight:400; }
.mp-card h2, .phase-panel h2, .lobby-panel h2 { margin:0 0 8px; }
.muted { color:#ACB5D9; font-size:13px; line-height:1.6; }
.status-line { min-height:16px; color:#FFD274; font-size:12px; line-height:1.5; }
.status-line.bad { color:#FFAABC; }
.mp-form, .mp-field, .phase-form { display:grid; gap:9px; }
.mp-field { gap:5px; font-size:12px; font-weight:700; }
.mp-field input, .mp-field select { min-height:38px; border:1px solid #D8C9A3; border-radius:8px; padding:8px 10px; background:#FFF; color:#2A2110; font:500 14px 'Noto Sans KR',sans-serif; width:100%; }
.mp-actions, .mp-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn-mini { min-height:30px !important; padding:5px 9px !important; font-size:12px !important; flex:none !important; }
.mp-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; flex:none; min-height:30px; }
.identity-strip { display:flex; align-items:center; gap:7px; font-size:12px; min-width:0; }
.identity-pill { border:1px solid #E9ECFF33; border-radius:999px; padding:4px 9px; background:#FFFFFF0F; color:var(--star); white-space:nowrap; }
.room-title { max-width:240px; overflow:hidden; text-overflow:ellipsis; }

/* Discoverable rooms replace the code-entry flow. */
.mp-entry { display:grid; grid-template-columns:360px minmax(0,1fr); gap:24px; padding:8px 0; }
.mp-entry .mp-card { overflow:hidden; padding:14px 18px; }
.entry-emblem { font-size:30px; margin-bottom:4px; }
.mp-entry h2 { font-size:23px; margin-bottom:4px; }
.mp-entry h3 { margin:0; font-size:17px; }
.mp-entry hr { width:100%; border:0; border-top:1px solid #FFFFFF22; margin:6px 0; }
.mp-entry .status-line { margin-top:6px; }
.lesson-preview { border:1px solid #FFFFFF24; border-radius:8px; padding:8px 9px; background:#FFFFFF08; color:var(--star); }
.lesson-preview-top { display:flex; align-items:center; gap:9px; }
.lesson-preview b, .lesson-preview small { display:block; }
.lesson-preview small { color:#ACB5D9; font-size:11px; margin-top:2px; }
.lesson-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#FFFFFF12; flex:none; }
.lesson-preview p { margin:6px 0 0; color:#D8DDF2; font-size:12px; line-height:1.35; }
.rule-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.room-browser { display:flex; flex-direction:column; min-height:0; }
.directory-heading, .room-card-top, .room-card-bottom, .dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.directory-heading h2 { margin:4px 0; font-size:30px; }
.directory-heading p { margin:6px 0 18px; }
.room-directory { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; align-content:start; overflow-y:auto; min-height:0; padding:2px 6px 10px 2px; }
.room-card { padding:18px; box-shadow:0 8px 22px #0002; }
.room-card h3 { font-size:23px; overflow-wrap:anywhere; margin:14px 0 5px; }
.room-card .muted { margin:4px 0 18px; }
.room-orbit { font-size:32px; }
.room-state { color:#99EDC3; background:#6FCF9716; border:1px solid #6FCF9744; padding:4px 10px; border-radius:20px; font-size:11px; }
.unavailable .room-state { color:#B3BBDB; background:#FFFFFF08; border-color:#FFFFFF22; }
.room-card-bottom strong { color:#CFD6F3; font-size:13px; }
.room-card-bottom .btn { font-size:13px; padding:8px 16px; }
.directory-empty { grid-column:1/-1; padding:10vh 24px; text-align:center; color:#B5BEDD; border:1px dashed #FFFFFF28; border-radius:14px; }
.directory-empty > span { font-size:52px; }
.directory-empty h3 { font-size:25px; margin-top:20px; color:var(--star); }
.lobby-panel { max-width:1020px; align-self:center; overflow:auto; }
.lobby-title { color:#FFD274; font-size:30px; }
.lobby-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; }
.lobby-player { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px; border:1px solid #FFFFFF22; background:#FFFFFF06; border-radius:12px; min-height:70px; }
.lobby-player b { font-size:12px; color:#96E6BC; }
.conn-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; background:#DD7793; }
.conn-dot.on { background:#6FCF97; }
.host-form { grid-template-columns:1fr 1fr auto; align-items:end; max-width:620px; margin:22px 0 12px; }

.game-screen { display:flex; flex-direction:column; }
.layout.mp-game { display:grid; grid-template-columns:minmax(0,1fr) 300px; flex:1; min-height:0; gap:12px; }
.board-wrap { min-height:0; container-type:size; padding:8px; }
.board { width:min(100%,calc((100cqh - 16px) * 1.5)); height:auto; flex:none; }
.mp-side-scroll { min-height:0; overflow:hidden; display:flex; }
.mp-side-scroll > .phase-panel { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; padding:16px; }
.phase-panel h2 { font-size:22px; line-height:1.4; }
.phase-text { margin:8px 0 14px; line-height:1.6; white-space:pre-line; font-size:14px; overflow-wrap:anywhere; }
.phase-image { height:92px; width:100%; object-fit:contain; margin:0 0 10px; }
.choice-list, .phase-actions, .log-box { display:grid; gap:8px; }
.choice-list, .phase-actions, .phase-form { margin-top:12px; }
.mp-app .quiz-opt { background:var(--paper); color:#2A2110; text-align:left; min-height:40px; font-size:14px; padding:10px 12px; }
.mp-app .quiz-opt:hover:not(:disabled) { background:#FFF3D6; }
.quiz-opt.correct { background:#CDEBD6 !important; }
.quiz-opt.wrong { background:#F4D2D9 !important; }
.phase-actions .btn { min-height:38px; padding:9px 12px; font-size:14px; }
.answer-box { color:#2A2110; font-size:14px; }
.phase-kicker { color:#FFD274; font-size:10px; font-weight:700; letter-spacing:2px; margin-bottom:12px; }
.moving-ship, .card-symbol { font-size:70px; text-align:center; margin-top:45px; }
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:9px; flex:none; max-height:none; overflow:visible; margin-top:10px; }
.rail .player-card { min-width:0; padding:8px 10px; }
.player-top { gap:6px; margin-bottom:4px; }
.player-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.player-turn-tag { padding:2px 5px; font-size:8px; }
.player-dot { width:10px; height:10px; }
.player-finance { display:flex; gap:10px; margin:5px 0; align-items:center; }
.finance-part { padding:0; background:transparent; border:0; }
.finance-label { font-size:9px; }
.finance-value { font-size:15px; }
.finance-total { margin-left:auto; display:block; padding:3px 7px; min-width:0; }
.finance-total .finance-label { font-size:9px; }
.finance-total .finance-value { font-size:17px; }
.player-owned { display:flex; justify-content:space-between; flex-wrap:wrap; gap:2px 8px; font-size:9px; color:#AFB9DD; min-height:12px; }

/* Pip dice and the server-provided movement path. */
.mp-center { gap:12px; padding:18px; text-align:center; overflow:hidden; }
.mp-center .center-title { font-size:clamp(18px,2.3vw,31px); color:#FFD274; }
.center-phase { font:20px 'Jua',sans-serif; margin:0; }
.center-hint { font-size:12px; line-height:1.6; color:#AAB5D9; margin:0; }
.tile.planet .planet-label { top:3px; bottom:auto; left:0; right:0; background:transparent; text-align:center; }
.mp-app .tile { font-family:inherit; cursor:pointer; transition:background .15s,box-shadow .15s; }
.mp-app .tile:hover { background-color:#FFFFFF20; box-shadow:inset 0 0 0 1px #FFFFFF55; }
.tile.traversed { box-shadow:inset 0 0 0 2px #FFD274; background-color:#FFD27425; }
.tile.destination { outline:2px solid #A8F1D4; outline-offset:-2px; }
.mp-token { position:absolute; width:17px; height:17px; border-radius:50%; border:2px solid white; background:var(--player-color); box-shadow:0 0 9px var(--player-color),0 2px 5px #000A; transform:translate(-50%,-50%); transition:left .26s ease-in-out,top .26s ease-in-out; z-index:5; pointer-events:none; }
.mp-token.moving { width:22px; height:22px; border-width:3px; z-index:6; box-shadow:0 0 0 5px #FFFFFF25,0 0 18px var(--player-color); }
.tile .owner-flag { background:var(--player-color); color:transparent; }
.tile .stage-badge { background:#0B1026BB; padding:2px; border-radius:3px; top:20px; }
.dice-row { display:flex; gap:14px; margin:10px 0; }
.dice-face { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:4px; width:68px; height:68px; padding:12px; border-radius:14px; background:linear-gradient(145deg,#FFFDF7,#E5DDCB); box-shadow:0 6px 0 #9B9385,0 12px 26px #0007; }
.dice-dot { display:block; border-radius:50%; background:#222744; visibility:hidden; width:100%; height:100%; }
.dice-dot.visible { visibility:visible; }
.dice-face.unrolled { opacity:.4; }
.dice-moving .dice-face { animation:dice-settle .45s ease-out; }
@keyframes dice-settle { 0% { transform:rotate(-16deg) scale(.8); } 60% { transform:rotate(7deg) scale(1.06); } 100% { transform:none; } }

/* Card popups cover the dice within the board. */
.card-overlay { position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; background:#070B1E66; padding:24px 60px; }
.card-popup { width:min(100%,540px); max-height:100%; overflow-y:auto; overscroll-behavior:contain; padding:22px; border:1px solid #E8A33D99; border-radius:20px; background:radial-gradient(ellipse at top,#3C3157,#171D3E 65%); box-shadow:0 20px 70px #0009,0 0 40px #E8A33D20; text-align:center; }
.card-popup h2 { margin:0 0 8px; font-size:27px; }
.card-popup p { margin:6px 0 14px; }
.gacha-deck { display:flex; justify-content:center; gap:14px; padding:16px 6px 22px; perspective:900px; }
.gacha-card { display:flex; flex-direction:column; align-items:center; justify-content:space-around; width:120px; height:176px; border:2px solid #E8BD63; border-radius:12px; color:#F8D995; background:repeating-linear-gradient(45deg,#FFFFFF03 0 2px,transparent 2px 12px),linear-gradient(150deg,#51426A,#221F41); box-shadow:inset 0 0 0 5px #302847,inset 0 0 0 6px #E8BD6344,0 10px 20px #0005; transform:rotate(-5deg); transition:transform .2s,box-shadow .2s; animation:card-deal .45s ease backwards; font:10px 'Noto Sans KR',sans-serif; letter-spacing:2px; }
.gacha-card:nth-child(2) { transform:translateY(-8px); animation-delay:.08s; }
.gacha-card:nth-child(3) { transform:rotate(5deg); animation-delay:.16s; }
.gacha-card:hover:not(:disabled), .gacha-card:focus-visible { transform:translateY(-16px) rotate(0); box-shadow:0 0 26px #FFD27477; }
.gacha-card:disabled { opacity:.85; }
.card-orbit { font-size:19px; }
.card-key { font-size:47px; letter-spacing:0; }
.reveal-symbol { display:block; font-size:34px; margin-bottom:10px; }
.picked-label { color:#D4BDD6; font-size:11px; }
.revealed-card { animation:card-reveal .55s ease-out; }
.card-popup .phase-panel { background:none; border:0; padding:4px 0 0; text-align:center; }
.card-popup .phase-panel h2 { font-size:24px; color:#FFE4A5; }
.card-popup .phase-actions { display:flex; flex-wrap:wrap; justify-content:center; }
.card-popup .phase-actions .btn { flex:1 1 140px; }
.card-popup .choice-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card-popup .quiz-opt { text-align:center; }
@keyframes card-deal { from { opacity:0; transform:translateY(30px) rotateY(55deg); } }
@keyframes card-reveal { from { opacity:0; transform:rotateY(85deg) scale(.85); } to { opacity:1; transform:rotateY(0) scale(1); } }

/* Optional information never extends the page. */
.info-backdrop { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px; background:#040817B8; backdrop-filter:blur(6px); }
.info-dialog { width:min(100%,660px); max-height:calc(100dvh - 48px); overflow-y:auto; padding:24px; background:#171F40; color:var(--star); border:1px solid #FFFFFF33; border-radius:18px; box-shadow:0 20px 80px #0008; }
.dialog-heading { border-bottom:1px solid #FFFFFF22; padding-bottom:14px; margin-bottom:20px; }
.dialog-heading h2 { margin:0; font-size:24px; }
.tile-profile { display:grid; grid-template-columns:130px 1fr; gap:22px; align-items:center; }
.tile-profile img { width:100%; height:130px; object-fit:contain; }
.tile-profile h3 { margin:0; font-size:30px; }
.tile-profile p { color:#BDC6E4; line-height:1.8; font-size:14px; margin-bottom:0; }
.tile-profile-icon { text-align:center; font-size:70px; }
.planet-facts { display:grid; grid-template-columns:85px 1fr; gap:12px; font-size:14px; padding:18px; background:#FFFFFF06; border-radius:10px; }
.planet-facts dt { color:#AAB4D7; }
.planet-facts dd { margin:0; }
.record-fields { display:grid; grid-template-columns:84px 1fr; gap:4px 10px; margin:6px 0; }
.record-fields dt { color:#AAB4D7; }
.record-fields dd { margin:0; }
.base-status { padding:18px; margin-top:20px; border:1px solid #E8A33D55; background:#E8A33D0D; border-radius:12px; }
.base-status h3 { margin:0 0 10px; color:#FFD274; font-size:20px; }
.base-status p { margin:8px 0 0; font-size:14px; line-height:1.65; }
.log-box { font-size:13px; }
.log-item { padding:10px 12px; border:1px solid #FFFFFF15; border-radius:8px; background:#FFFFFF06; line-height:1.7; }
.info-dialog > .phase-panel { padding:0; border:0; background:none; }
.info-dialog > .phase-panel > h2 { display:none; }

@media (min-width:901px) and (max-height:740px) {
  .mp-app { padding:8px 12px; }
  .masthead h1 { font-size:21px; }
  .masthead { margin-bottom:6px; padding-bottom:6px; }
  .mp-form, .mp-field, .phase-form { gap:6px; }
  .muted { font-size:12px; line-height:1.45; }
  .mp-field input, .mp-field select { min-height:36px; padding:6px 9px; }
  .mp-card, .phase-panel, .lobby-panel { padding:14px; }
  .mp-center { gap:9px; }
  .dice-face { width:56px; height:56px; padding:10px; gap:3px; }
  .mp-entry { grid-template-columns:360px minmax(0,1fr); padding:4px 0; }
  .entry-emblem { font-size:24px; margin-bottom:2px; }
  .mp-entry .mp-card { padding:12px 16px; }
  .mp-entry h2 { font-size:21px; margin-bottom:3px; }
  .mp-entry h3 { font-size:17px; }
  .mp-entry hr { margin:5px 0; }
  .lesson-preview { padding:7px 8px; }
  .lesson-preview p { margin-top:6px; line-height:1.35; }
  .btn-block { min-height:38px; }
  .card-popup { padding:16px; }
  .gacha-card { height:150px; width:105px; }
}
@media (max-width:1100px) and (min-width:901px) {
  .layout.mp-game { grid-template-columns:minmax(0,1fr) 265px; }
  .player-finance { gap:5px; }
  .finance-part:nth-child(2) { display:none; }
  .room-title { max-width:170px; }
  .card-overlay { padding:16px 32px; }
}
@media (max-width:900px) {
  html, body { height:auto; overflow:auto; }
  .mp-app { height:auto; min-height:100dvh; padding:10px; overflow:visible; }
  .masthead { flex-wrap:wrap; }
  .masthead h1 { font-size:20px; }
  .masthead-actions { margin-left:auto; }
  .masthead p { display:none; }
  .mp-entry { grid-template-columns:1fr; gap:18px; }
  .entry-emblem { display:none; }
  .mp-entry .mp-form { grid-template-columns:1fr 1fr; }
  .mp-entry hr, .mp-entry h3, .mp-entry .btn-block, .lesson-select, .lesson-preview { grid-column:1/-1; }
  .room-directory { overflow:visible; }
  .mp-topline { flex-wrap:wrap; }
  .layout.mp-game { display:flex; flex-direction:column; }
  .board-wrap { height:clamp(270px,65vw,540px); flex:none; }
  .mp-side-scroll { max-height:420px; }
  .rail { display:flex; overflow-x:auto; padding:2px; }
  .rail .player-card { flex:0 0 210px; }
  .lobby-list { grid-template-columns:1fr; }
  .mp-center { padding:8px; gap:8px; }
  .mp-center .center-title { font-size:20px; }
  .center-phase { font-size:16px; }
  .center-hint { font-size:10px; }
  .dice-face { width:45px; height:45px; padding:8px; gap:3px; border-radius:9px; }
  .card-overlay { padding:10px 24px; }
  .card-popup { padding:14px; }
  .gacha-card { width:85px; height:125px; }
  .gacha-deck { padding:8px 0 12px; gap:10px; }
  .card-key { font-size:34px; }
}
@media (max-width:480px) {
  .tile .tk { font-size:8px; }
  .tile .ti { font-size:14px; }
  .tile .price-tag { font-size:7px; padding:1px 2px; }
  .planet-photo { max-height:32px; margin-top:10px; }
  .mp-token { width:12px; height:12px; }
  .mp-token.moving { width:16px; height:16px; }
  .mp-center .badge-log-no, .center-hint { display:none; }
  .mp-center .center-title { font-size:16px; }
  .card-popup h2 { font-size:21px; }
  .card-popup .phase-panel h2 { font-size:20px; }
  .card-popup .phase-text { font-size:12px; }
  .card-popup .phase-kicker { margin-bottom:7px; }
  .info-backdrop { padding:12px; }
  .info-dialog { padding:18px; max-height:calc(100dvh - 24px); }
  .tile-profile { grid-template-columns:80px 1fr; gap:14px; }
  .tile-profile img { height:90px; }
  .host-form { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}