:root { --ink:#25324a; --sky:#dff5ff; --blue:#4f8ef7; --purple:#8a68f5; --yellow:#ffd85a; --mint:#30c99a; --pink:#ff8fa3; --white:#fffefa; --line:#c6d7e8; --muted:#6f7e93; --danger:#e65d6c; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(#ffffff8f 1.5px,transparent 1.5px) 0 0/18px 18px,var(--sky); font-family:Arial,"Pretendard",sans-serif; }
button,input,select { font:inherit; }.shell { width:min(100%,980px); min-height:100vh; margin:auto; padding:0 clamp(22px,6vw,72px); background:var(--white); border-inline:4px solid #fff; box-shadow:0 0 0 4px #b8e7ff; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; }.brand { color:var(--ink); font:900 18px/1 Arial,sans-serif; letter-spacing:-.07em; text-decoration:none; }.brand::before { content:""; display:inline-block; width:24px; height:24px; margin-right:8px; border-radius:9px 9px 9px 2px; background:var(--yellow); box-shadow:4px 4px 0 var(--purple); vertical-align:middle; }.topbar span { padding:7px 10px; border-radius:999px; color:var(--blue); background:#e9f2ff; font:800 10px/1 Arial,sans-serif; letter-spacing:.08em; }
.home-view,.create-view { display:grid; align-content:center; min-height:calc(100vh - 82px); padding:55px 0 90px; }.home-view { position:relative; }.home-view::after { content:""; position:absolute; right:2%; bottom:13%; width:105px; height:105px; border:8px solid var(--ink); border-radius:42% 58% 52% 48%; background:var(--yellow); box-shadow:14px 14px 0 var(--pink); transform:rotate(-12deg); }.eyebrow { width:max-content; margin:0 0 16px; padding:7px 10px; border-radius:999px; color:var(--purple); background:#eee8ff; font-size:11px; font-weight:800; letter-spacing:.08em; }h1 { margin:0; font:900 clamp(58px,11vw,105px)/.83 "Trebuchet MS",Arial,sans-serif; letter-spacing:-.1em; }h1 em { color:var(--purple); font-style:normal; }.tagline { margin:28px 0 32px; color:var(--muted); font-size:15px; font-weight:700; }
.primary,.secondary { display:block; min-width:200px; width:max-content; padding:16px 20px; border:0; border-radius:18px; color:#fff; background:var(--blue); box-shadow:0 6px 0 #2870db; font-size:15px; font-weight:900; text-align:left; cursor:pointer; }.primary:hover,.secondary:hover { transform:translateY(3px); box-shadow:0 3px 0 #2870db; }.primary span { float:right; margin-left:35px; }.secondary { color:var(--ink); background:var(--yellow); box-shadow:0 6px 0 #e4b825; }.join-form { display:flex; width:min(100%,390px); margin-top:18px; }.join-form input,.invite-row input { min-width:0; flex:1; padding:13px; border:2px solid #d7e5f0; border-radius:13px 0 0 13px; }.join-form button,.invite-row button { padding:0 18px; border:0; border-radius:0 13px 13px 0; color:#fff; background:var(--purple); font-weight:900; cursor:pointer; }
.text-button { margin-top:24px; padding:0; border:0; color:var(--muted); background:transparent; font-size:12px; font-weight:800; text-decoration:underline; cursor:pointer; }
.create-view { width:min(100%,560px); margin:auto; }.create-view h1 { font-size:clamp(44px,7vw,70px); }.create-form { display:grid; gap:17px; margin-top:32px; padding:25px; border:3px solid var(--ink); border-radius:25px; background:#fff; box-shadow:9px 9px 0 var(--yellow); }.create-form label { display:grid; gap:8px; color:var(--muted); font-size:12px; font-weight:800; }.create-form select { padding:13px; border:2px solid #d7e5f0; border-radius:13px; color:var(--ink); background:#f8fcff; font-weight:700; }.create-form .primary { width:100%; margin-top:5px; }
.lobby-view { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px,7vw,76px); align-items:center; min-height:calc(100vh - 138px); padding:55px 0; }.lobby-view h1 { font-size:clamp(45px,7vw,74px); }.room-code { display:flex; gap:13px; align-items:baseline; margin:28px 0 20px; padding:15px; border:2px dashed #bdcfe1; border-radius:16px; background:#f8fcff; }.room-code span,.detail-label { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.08em; }.room-code strong { overflow:hidden; color:var(--purple); font:800 15px Arial,sans-serif; text-overflow:ellipsis; white-space:nowrap; }.invite-label { display:grid; gap:8px; color:var(--muted); font-size:11px; font-weight:800; }.invite-row { display:flex; }.lobby-actions { display:flex; gap:12px; margin-top:25px; }.lobby-card,.game-panel { padding:22px; border:3px solid var(--ink); border-radius:25px; background:#fff; box-shadow:9px 9px 0 var(--mint); }.lobby-card section+section { margin-top:23px; padding-top:21px; border-top:2px dashed #d7e5f0; }.detail-label { display:flex; justify-content:space-between; margin:0 0 13px; }.lobby-card dl { margin:0; }.lobby-card dl div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #e4edf5; }.lobby-card dt { color:var(--muted); font-size:12px; font-weight:700; }.lobby-card dd { margin:0; font-size:13px; font-weight:900; }.players { display:grid; gap:8px; margin:0; padding:0; list-style:none; }.players li { display:flex; align-items:center; gap:9px; min-height:39px; padding:5px 8px; border-radius:13px; background:#f8fcff; font-size:12px; }.players i { display:grid; place-items:center; width:27px; height:27px; border-radius:50% 50% 50% 4px; color:#fff; background:var(--blue); font:900 10px Arial,sans-serif; font-style:normal; }.players small { margin-left:auto; padding:4px 6px; border-radius:8px; color:#7356d9; background:#eee8ff; font-size:9px; font-weight:900; }
.play-view { padding:34px 0 70px; }.play-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:14px; }.play-head h1 { font-size:48px; }.play-head .eyebrow { margin-bottom:9px; }.play-head output { padding:13px 16px; border-radius:16px; color:#fff; background:var(--ink); font-weight:900; }.game-notice { min-height:20px; margin:0 0 16px; color:var(--muted); font-size:13px; font-weight:800; }body[data-page="play"] .shell { width:min(100%,1280px); }.game-layout { display:grid; grid-template-columns:180px minmax(0,1fr) 220px; gap:24px; align-items:start; }.my-board { min-width:0; }.game-sidebar { display:grid; gap:18px; }.sudoku-board { display:grid; grid-template-columns:repeat(9,1fr); border:3px solid var(--ink); background:#fff; }.sudoku-cell { aspect-ratio:1; border:0; border-right:1px solid #c8d4e1; border-bottom:1px solid #c8d4e1; color:var(--ink); background:#fff; font-size:clamp(18px,4vw,30px); cursor:pointer; }.sudoku-cell:nth-child(3n) { border-right:3px solid var(--ink); }.sudoku-cell:nth-child(9n) { border-right:0; }.sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom:3px solid var(--ink); }.sudoku-cell.fixed { background:#f5f9fd; font-weight:900; cursor:default; }.sudoku-cell.related { background:#e8f2fb; }.sudoku-cell.selected { background:#b9dcf8; }.sudoku-cell.error { color:#ef4e62; background:#ffdbe1; }.number-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.number-pad button { min-height:42px; border:2px solid #d4e1ef; border-radius:12px; color:var(--ink); background:#fff; font-weight:900; cursor:pointer; }.number-pad button:disabled { opacity:.42; cursor:not-allowed; }.number-pad .clear { grid-column:1/-1; color:var(--danger); }.wrong-count { margin:0 0 15px; color:var(--danger); font-size:13px; font-weight:900; }.result-card { position:fixed; z-index:2; left:50%; top:50%; width:min(380px,calc(100vw - 42px)); padding:28px; border:3px solid var(--ink); border-radius:25px; background:#fffefa; box-shadow:12px 12px 0 var(--yellow); transform:translate(-50%,-50%); }.result-card h2 { margin:0 0 16px; }.result-card ol { margin:0; padding-left:25px; font-weight:800; line-height:2; }
.sudoku-board.covered { opacity:.12; pointer-events:none; }.other-boards { display:grid; gap:12px; align-content:start; }.other-boards__empty { margin:0; padding:15px 10px; color:var(--muted); border:2px dashed var(--line); border-radius:16px; font-size:11px; font-weight:800; line-height:1.5; }.mini-board { padding:12px; border:2px solid #c9d9e9; border-radius:17px; background:#f8fcff; box-shadow:4px 4px 0 #dbeeff; }.mini-board header { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; }.mini-board b { color:var(--ink); font-size:11px; }.mini-board small { padding:3px 5px; border-radius:6px; color:#168861; background:#c9f6e6; font-size:8px; font-weight:900; white-space:nowrap; }.mini-board > div { display:grid; grid-template-columns:repeat(9,1fr); border:2px solid var(--ink); background:#fff; }.mini-cell { display:grid; place-items:center; aspect-ratio:1; border-right:1px solid #d8e2eb; border-bottom:1px solid #d8e2eb; font-size:8px; }.mini-cell.fixed { font-weight:900; background:#f5f9fd; }.mini-cell.error { color:var(--danger); background:#ffdbe1; }
.status { display:block; min-height:58px; padding-top:17px; color:var(--muted); font-size:12px; font-weight:700; }.status:not(:empty)::before { content:"+"; margin-right:8px; color:var(--mint); }.status.error { color:var(--danger); }.status.error::before { color:var(--danger); }
.toast { position:fixed; z-index:20; top:24px; left:50%; padding:12px 17px; border:2px solid var(--ink); border-radius:14px; color:var(--ink); background:#fff; box-shadow:5px 5px 0 var(--purple); font-size:13px; font-weight:900; transform:translateX(-50%); }.toast::after { position:absolute; left:50%; bottom:-9px; width:14px; height:14px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); background:#fff; content:""; transform:translateX(-50%) rotate(45deg); }.toast[hidden] { display:none; }
@media (max-width:680px) { .shell { padding:0 24px; }.home-view::after { width:70px; height:70px; right:4%; bottom:15%; }.home-view h1 { font-size:65px; }.lobby-view,.game-layout { grid-template-columns:1fr; }.game-panel { display:none; }.lobby-actions { display:grid; }.invite-row { display:grid; }.invite-row input,.invite-row button { border-radius:12px; }.invite-row button { min-height:42px; margin-top:7px; }.number-pad { grid-template-columns:repeat(3,1fr); } }

.host-settings { display:grid; gap:11px; }
.host-settings label { display:grid; gap:5px; color:var(--muted); font-size:11px; font-weight:800; }
.host-settings select { width:100%; padding:9px; border:2px solid #d7e5f0; border-radius:10px; color:var(--ink); background:#f8fcff; font-size:12px; font-weight:800; }
.host-settings button { padding:10px; border:0; border-radius:10px; color:#fff; background:var(--purple); font-size:12px; font-weight:900; cursor:pointer; }
.lobby-card section[hidden] + section { margin-top:0; padding-top:0; border-top:0; }
.players li.is-ready { background:#e5fbf3; outline:2px solid #82e2bd; }.players li.is-ready i { background:var(--mint); }.players li.is-ready small { color:#168861; background:#c9f6e6; }
.my-board { position:relative; }.my-board.is-penalized .sudoku-board { filter:grayscale(.45) brightness(.78); }.penalty-overlay { position:absolute; z-index:1; top:38px; right:0; bottom:0; left:0; display:grid; place-content:center; justify-items:center; color:#fff; background:#25324acc; text-align:center; pointer-events:none; }.penalty-overlay p { margin:0; color:#ffd85a; font-size:14px; font-weight:900; letter-spacing:.08em; }.penalty-overlay strong { font:900 clamp(56px,10vw,100px)/1 Arial,sans-serif; }.penalty-overlay span { margin-top:5px; font-size:16px; font-weight:900; }
.result-card { width:min(500px,calc(100vw - 42px)); padding:30px; box-shadow:12px 12px 0 var(--yellow); }.result-card h2 { margin:0; font-size:30px; }.result-summary { margin:7px 0 21px; color:var(--muted); font-size:13px; font-weight:700; }.result-rankings { display:grid; gap:9px; margin:0 0 24px; padding:0; list-style:none; }.result-row { display:grid; grid-template-columns:52px 1fr auto; gap:11px; align-items:center; padding:12px; border:2px solid #dce7f1; border-radius:14px; background:#f8fcff; }.result-row.is-winner { border-color:#f1c53d; background:#fff7d9; }.result-row.is-eliminated { opacity:.65; }.result-place { display:grid; place-items:center; min-height:36px; border-radius:10px; color:var(--purple); background:#eee8ff; font-size:13px; font-weight:900; }.is-winner .result-place { color:#895d00; background:var(--yellow); }.result-row b,.result-row small { display:block; }.result-row b { margin-bottom:3px; font-size:14px; }.result-row small,.result-wrong { color:var(--muted); font-size:11px; font-weight:700; }.result-wrong { white-space:nowrap; }.result-card .primary { width:100%; text-align:center; }
.mini-grid { position:relative; }.mini-penalty { position:absolute; inset:0; z-index:1; display:grid; place-content:center; color:#fff; background:#25324acc; text-align:center; font-size:12px; font-weight:900; line-height:1.35; }
.board-viewer { position:relative; z-index:2; display:flex; align-items:center; gap:10px; min-height:28px; margin:0 0 10px; color:var(--muted); font-size:14px; font-weight:900; }.board-viewer button { padding:6px 10px; border:2px solid var(--blue); border-radius:9px; color:var(--blue); background:transparent; font:inherit; font-size:12px; cursor:pointer; }.board-viewer button:disabled { opacity:.45; cursor:not-allowed; }.mini-board { cursor:pointer; }.mini-board:hover,.mini-board:focus-visible,.mini-board.is-viewed { border-color:var(--blue); box-shadow:5px 5px 0 var(--blue); outline:0; }
.mini-meta { display:grid; justify-items:end; gap:3px; }.mini-meta span { color:var(--danger); font-size:9px; font-weight:900; }
.host-share { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:25px; }.host-share button { min-height:46px; border:2px solid #d7e5f0; border-radius:13px; color:var(--ink); background:#f8fcff; font-size:12px; font-weight:900; cursor:pointer; }.host-share button:last-child { color:#fff; border-color:var(--purple); background:var(--purple); }
.rules-card { width:min(100%,440px); margin-top:28px; padding:16px; border:2px dashed #c6d7e8; border-radius:16px; background:#f8fcff; }.rules-card ul { display:grid; gap:7px; margin:0; padding-left:18px; color:var(--muted); font-size:11px; font-weight:700; line-height:1.45; }.rules-card li::marker { color:var(--purple); }
.countdown-overlay { position:fixed; z-index:10; inset:0; display:grid; place-content:center; justify-items:center; color:#fff; background:#25324ae8; text-align:center; pointer-events:none; }.countdown-overlay p { margin:0; color:var(--yellow); font-size:18px; font-weight:900; letter-spacing:.12em; }.countdown-overlay strong { font:900 clamp(150px,30vw,340px)/.85 Arial,sans-serif; text-shadow:10px 10px 0 #2870db; }.countdown-overlay span { margin-top:18px; font-size:20px; font-weight:900; }
.error-dialog { width:min(390px,calc(100vw - 40px)); padding:28px; border:3px solid var(--ink); border-radius:24px; color:var(--ink); background:var(--white); box-shadow:11px 11px 0 var(--danger); }.error-dialog::backdrop { background:#25324a99; }.error-dialog__label { margin:0 0 10px; color:var(--danger); font-size:11px; font-weight:900; letter-spacing:.08em; }.error-dialog h2 { margin:0 0 24px; font-size:20px; line-height:1.4; }.error-dialog form { display:flex; justify-content:flex-end; }.error-dialog button { min-width:92px; padding:11px 18px; border:0; border-radius:11px; color:#fff; background:var(--blue); font-weight:900; cursor:pointer; }
.create-games-view { width:min(100%,820px); }.create-heading { margin-bottom:32px; }.create-layout { display:grid; grid-template-columns:minmax(210px,.75fr) minmax(0,1fr); gap:22px; align-items:stretch; }.game-picker { display:grid; align-content:start; gap:10px; }.game-card { display:grid; grid-template-columns:82px 1fr; gap:13px; align-items:center; width:100%; min-height:124px; padding:14px; border:2px solid #d7e5f0; border-radius:18px; color:var(--ink); background:#f8fcff; text-align:left; cursor:pointer; }.game-card:hover { border-color:var(--purple); }.game-card.is-selected { border:3px solid var(--ink); background:#fff; box-shadow:7px 7px 0 var(--yellow); }.game-card b,.game-card small { display:block; }.game-card b { margin-bottom:6px; font-size:18px; }.game-card small { color:var(--muted); font-size:11px; font-weight:700; line-height:1.4; }.game-icon { display:grid; aspect-ratio:1; overflow:hidden; border:2px solid var(--ink); background:#fff; }.game-icon i { display:grid; place-items:center; border-right:1px solid #c6d7e8; border-bottom:1px solid #c6d7e8; color:var(--ink); font-size:16px; font-style:normal; font-weight:900; }.sudoku-icon { grid-template-columns:repeat(3,1fr); }.sudoku-icon i:nth-child(3n) { border-right:0; }.sudoku-icon i:nth-child(n+7) { border-bottom:0; }.gomoku-icon { grid-template-columns:repeat(5,1fr); background:#fff7dc; }.gomoku-icon i:nth-child(5n) { border-right:0; }.gomoku-icon i:nth-child(n+21) { border-bottom:0; }.gomoku-icon i:nth-child(7)::after,.gomoku-icon i:nth-child(13)::after,.gomoku-icon i:nth-child(19)::after { width:12px; height:12px; border-radius:50%; background:var(--ink); content:""; }.gomoku-icon i:nth-child(9)::after,.gomoku-icon i:nth-child(17)::after { width:12px; height:12px; border:2px solid var(--ink); border-radius:50%; background:#fff; content:""; }.create-games-view .create-form { align-content:start; margin-top:0; }.game-settings { display:grid; gap:17px; }.game-availability { margin:2px 0 0; padding:10px; border-radius:11px; color:#8a6200; background:#fff4c8; font-size:11px; font-weight:800; line-height:1.45; }.create-form .primary:disabled { cursor:not-allowed; background:#a6b4c8; box-shadow:0 6px 0 #8391a3; }.create-form .primary:disabled:hover { transform:none; box-shadow:0 6px 0 #8391a3; }
.choice-group { display:grid; gap:9px; margin:0; padding:0; border:0; }.choice-group legend { padding:0; color:var(--muted); font-size:12px; font-weight:800; }.choice-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.choice-buttons button { min-height:43px; border:2px solid #d7e5f0; border-radius:12px; color:var(--ink); background:#f8fcff; font-size:13px; font-weight:900; cursor:pointer; }.choice-buttons button.is-selected { border-color:var(--ink); color:#fff; background:var(--blue); box-shadow:0 4px 0 #2870db; }.choice-group:nth-child(2) .choice-buttons { grid-template-columns:repeat(4,1fr); }.custom-time { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:800; }.custom-time input { width:100%; min-width:0; padding:10px 11px; border:2px solid #d7e5f0; border-radius:11px; color:var(--ink); background:#f8fcff; font-weight:800; }.custom-time input:focus { outline:0; border-color:var(--purple); }
button,input,select { transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease; }button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }.topbar { gap:10px; }.brand { margin-right:auto; }.theme-toggle { min-width:76px; padding:7px 9px; border:2px solid #d7e5f0; border-radius:999px; color:var(--ink); background:#f8fcff; font-size:10px; font-weight:900; cursor:pointer; }.theme-toggle:hover { border-color:var(--purple); color:var(--purple); }
body.theme-dark { --ink:#eef3ff; --sky:#0a1020; --blue:#669cff; --purple:#a98aff; --yellow:#7289ff; --mint:#48d5aa; --pink:#8d77e8; --white:#151d31; --line:#3a4b67; --muted:#aebbd0; --danger:#ff788a; background:radial-gradient(#ffffff14 1.5px,transparent 1.5px) 0 0/18px 18px,var(--sky); }.theme-dark .shell { border-color:#202d46; background:var(--white); box-shadow:0 0 0 4px #223554; }.theme-dark .topbar span,.theme-dark .eyebrow { color:#c9baff; background:#292447; }.theme-dark .theme-toggle,.theme-dark .join-form input,.theme-dark .create-form select,.theme-dark .custom-time input,.theme-dark .host-settings select { border-color:#40516e; color:var(--ink); background:#1c2740; }.theme-dark .create-form,.theme-dark .lobby-card,.theme-dark .game-panel,.theme-dark .game-card.is-selected,.theme-dark .result-card,.theme-dark .error-dialog,.theme-dark .toast { background:#1b2740; }.theme-dark .game-card,.theme-dark .choice-buttons button,.theme-dark .players li,.theme-dark .rules-card,.theme-dark .room-code,.theme-dark .other-boards__empty { border-color:#40516e; background:#18233a; }.theme-dark .game-icon,.theme-dark .sudoku-board,.theme-dark .mini-board > div { background:#172139; }.theme-dark .sudoku-cell,.theme-dark .mini-cell { border-color:#40516e; color:var(--ink); background:#172139; }.theme-dark .sudoku-cell.fixed,.theme-dark .mini-cell.fixed { background:#202d46; }.theme-dark .sudoku-cell.related { background:#29425e; }.theme-dark .sudoku-cell.selected { background:#3b6690; }.theme-dark .choice-buttons button.is-selected { border-color:#95b8ff; background:#3d73dc; }.theme-dark .host-share button { border-color:#40516e; color:var(--ink); background:#18233a; }.theme-dark .host-share button:last-child { border-color:var(--purple); color:#fff; background:var(--purple); }.theme-dark .game-availability { color:#c8d2ff; background:#2d315a; }.theme-dark .players li.is-ready { background:#173c39; outline-color:#4fc99e; }.theme-dark .players li.is-ready small { color:#8df0c7; background:#1e5149; }.theme-dark .secondary { color:#fff; background:#765ee0; box-shadow:0 6px 0 #5542ad; }.theme-dark .result-row.is-winner { border-color:#758eff; background:#27345d; }.theme-dark .is-winner .result-place { color:#fff; background:#765ee0; }
.theme-dark .brand::before { background:#7289ff; }.theme-dark .play-head output { color:#eef3ff; background:#27345d; box-shadow:0 4px 0 #1b2740; }.theme-dark .number-pad button { border-color:#40516e; color:#eef3ff; background:#1b2740; }.theme-dark .number-pad button:hover:not(:disabled) { border-color:#95b8ff; background:#273b61; }.theme-dark .number-pad button:disabled { border-color:#2c3a55; color:#65738b; background:#141c2e; }.theme-dark .number-pad .clear { color:#ff9aa8; background:#2d2238; }.theme-dark .mini-board { border-color:#40516e; background:#1b2740; box-shadow:4px 4px 0 #263a5d; }.theme-dark .mini-board small { color:#8df0c7; background:#1e5149; }.theme-dark .toast::after { border-color:#1b2740; background:#1b2740; }
.theme-dark .lobby-card,.theme-dark .game-panel { box-shadow:9px 9px 0 #596fd0; }.theme-dark .players li.is-ready { background:#222d53; outline-color:#667ee8; }.theme-dark .players li.is-ready i { background:#667ee8; }.theme-dark .players li.is-ready small { color:#d8e0ff; background:#39447a; }
.theme-dark .sudoku-cell.error,.theme-dark .mini-cell.error { color:#ff9aa8; background:#542d43; }
.theme-dark .result-row { border-color:#40516e; background:#18233a; }.theme-dark .result-row.is-winner { border-color:#758eff; background:#27345d; }.theme-dark .result-row b { color:#eef3ff; }.theme-dark .result-place { color:#c9baff; background:#2b3159; }.theme-dark .is-winner .result-place { color:#fff; background:#765ee0; }.theme-dark .result-row small,.theme-dark .result-wrong { color:#aebbd0; }
.lobby-game-choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.lobby-game-choices button { display:flex; align-items:center; gap:8px; min-width:0; padding:8px; border:2px solid var(--line); border-radius:10px; color:var(--ink); background:var(--white); font-weight:900; text-align:left; }.lobby-game-choices button.is-selected { border-color:var(--blue); background:#edf5ff; }.lobby-game-choices button:disabled { opacity:.45; cursor:not-allowed; }.lobby-game-choices .game-icon { flex:0 0 34px; width:34px; height:34px; }.lobby-game-choices small { display:block; color:var(--muted); font-size:10px; }.theme-dark .lobby-game-choices button { background:#18233a; }.theme-dark .lobby-game-choices button.is-selected { background:#27345d; }
.lobby-card { padding:27px; }.lobby-card section+section { margin-top:28px; padding-top:25px; }.lobby-card .detail-label { margin-bottom:16px; }.lobby-card dl div { padding:11px 0; }.host-settings { gap:18px; }.host-settings .choice-group { gap:11px; }.lobby-game-choices { gap:10px; }.lobby-game-choices button { padding:10px; }.lobby-game-choices .game-icon { flex-basis:38px; width:38px; height:38px; }.host-settings #lobbyDifficultyChoices { grid-template-columns:repeat(3,1fr); }.host-settings #lobbyTimeChoices { grid-template-columns:repeat(4,1fr); }.players { gap:10px; }.players li { min-height:45px; padding:7px 10px; }.players li b { min-width:0; }.players li small { flex:0 0 auto; white-space:nowrap; }
.lobby-card #roomSettings .detail-label { margin-bottom:22px; }.lobby-card #roomSettings dl div { padding:14px 0; }.lobby-card #hostSettings[hidden] + section { margin-top:30px; padding-top:27px; border-top:2px dashed #d7e5f0; }.theme-dark .lobby-card #hostSettings[hidden] + section { border-color:#40516e; }
.penalty-overlay strong,.countdown-overlay strong { display:flex; align-items:baseline; gap:8px; }.penalty-overlay strong > span,.countdown-overlay strong > span { margin:0; font:inherit; }.penalty-overlay strong small { color:#ffd85a; font:900 22px/1 Arial,sans-serif; }.countdown-overlay strong small { color:#ffd85a; font:900 clamp(34px,7vw,68px)/1 Arial,sans-serif; }.penalty-overlay > span { margin-top:5px; font-size:16px; font-weight:900; }.countdown-overlay > span { margin-top:18px; font-size:20px; font-weight:900; }
@media (max-width:680px) { .create-layout { grid-template-columns:1fr; }.game-picker { grid-template-columns:1fr 1fr; }.game-picker .detail-label { grid-column:1/-1; }.game-card { grid-template-columns:56px 1fr; min-height:92px; padding:10px; }.game-card b { font-size:15px; }.game-card small { display:none; } }