:root {
  --navy:#17243b;
  --navy-deep:#0d1728;
  --gold:#f2c94c;
  --cream:#f5e7c6;
  --wood:#a9693f;
  --wood-dark:#704027;
  --blue:#3498db;
  --red:#e74c3c;
  --green:#2ecc71;
}
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { display:flex; justify-content:center; background:#dfe8f2; font-family:'Jua','Malgun Gothic',sans-serif; color:#fff; user-select:none; touch-action:manipulation; }
button, input, select { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none!important; }
.game-container { position:relative; display:flex; flex-direction:column; width:100%; max-width:500px; height:100dvh; overflow:hidden; background:#f7f4ed; box-shadow:0 16px 45px rgba(17,30,50,.24); }
.header { z-index:30; display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:7px 10px; background:linear-gradient(135deg,#17243b,#263c60); }
.header-left { display:flex; align-items:center; gap:8px; min-width:0; }
.title { border:0; padding:0; background:transparent; color:var(--gold); font-size:1.18rem; white-space:nowrap; }
.home-btn { border:1px solid rgba(255,255,255,.2); border-radius:9px; padding:5px 9px; background:rgba(255,255,255,.12); color:#fff; font-size:.8rem; }
.rule-status { color:#a9bad2; font:800 .68rem/1 system-ui,sans-serif; letter-spacing:.08em; }
.turn-info { display:flex; align-items:center; justify-content:center; gap:8px; min-height:47px; padding:8px 10px; border-bottom:2px solid #c6aa7f; background:#263c60; color:#fff; font-size:1.03rem; }
.turn-piece { display:grid; width:30px; height:36px; place-items:center; }
.turn-piece-render { display:block; width:100%; height:100%; object-fit:fill; }
.turn-piece-render[src*="white-"] { filter:drop-shadow(0 2px 1px rgba(54,25,9,.34)); }
.turn-piece-render[src*="black-"] { filter:drop-shadow(0 2px 1px rgba(25,9,3,.48)); }
.check-badge { padding:4px 8px; border-radius:999px; background:#e74c3c; color:#fff; font:.8rem/1 system-ui,sans-serif; font-weight:900; animation:pulse .8s ease-in-out infinite alternate; }
@keyframes pulse { to { transform:scale(1.08); box-shadow:0 0 0 5px rgba(231,76,60,.16); } }
.board-stage { position:relative; isolation:isolate; flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0 10px 6px; overflow:hidden; background:radial-gradient(ellipse at 50% 38%,rgba(130,82,45,.46),transparent 56%),repeating-linear-gradient(90deg,#4a2d1d 0,#563522 12%,#402719 13%,#644129 25%,#3d2619 26%); }
.board-stage::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.55; background:repeating-linear-gradient(2deg,transparent 0 22px,rgba(20,10,5,.22) 23px,transparent 25px 48px),linear-gradient(90deg,rgba(255,220,166,.08),transparent 18%,rgba(19,8,3,.3) 70%,transparent); mix-blend-mode:soft-light; pointer-events:none; }
.player-clock { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; width:min(96%,464px); min-height:43px; padding:6px 12px; border:1px solid rgba(246,202,122,.5); border-radius:9px; background:rgba(26,11,5,.72); box-shadow:0 5px 10px rgba(18,7,2,.34),inset 0 1px rgba(255,226,173,.12); transition:border-color .16s,background .16s,box-shadow .16s; }
.player-clock.active { border-color:#ffe06c; background:rgba(86,45,13,.9); box-shadow:0 0 0 2px rgba(255,211,75,.2),0 6px 13px rgba(18,7,2,.42),inset 0 1px rgba(255,238,188,.2); }
.player-clock.warning .clock-time { color:#ffb4a6; }
.clock-player { display:flex; align-items:center; gap:7px; min-width:0; color:#f4d59d; font:800 .73rem/1 system-ui,sans-serif; }
.clock-dot { display:block; width:11px; height:11px; flex:0 0 auto; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(255,255,255,.72); }
.player-clock.black .clock-dot { background:#17243b; border:1px solid #8391a7; box-shadow:0 1px 4px rgba(0,0,0,.66); }
.clock-time { min-width:76px; color:#fff5d5; text-align:right; font:900 1.65rem/.9 'Jua','Malgun Gothic',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.045em; }
.board-frame { position:relative; width:min(96%,calc(100dvh - 205px)); aspect-ratio:1; max-width:464px; max-height:464px; padding:13px 13px 18px; border:1px solid #2f170d; border-radius:8px; background:linear-gradient(90deg,#4a2412,#8b542d 8%,#b77743 48%,#74401f 92%,#3b1c0e); transform:perspective(1400px) rotateX(5deg); transform-origin:50% 100%; box-shadow:0 25px 30px rgba(22,9,3,.62),0 8px 0 #32170b,0 11px 0 #1f0d07,inset 0 2px 1px rgba(255,223,173,.42),inset 0 -5px 8px rgba(38,15,5,.62); }
.board-frame::before { content:""; position:absolute; inset:5px; border:1px solid rgba(255,210,145,.34); border-radius:4px; box-shadow:inset 0 0 0 2px rgba(54,23,10,.72); pointer-events:none; }
.chess-board { position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; height:100%; overflow:visible; border:1px solid rgba(45,20,8,.9); outline:2px solid rgba(255,201,126,.26); transform:scaleY(.99); transform-origin:50% 100%; box-shadow:0 13px 18px rgba(24,9,3,.48),inset 0 0 16px rgba(42,17,7,.24); }
.chess-board::after { content:""; position:absolute; z-index:8; inset:0; border:1px solid rgba(255,242,209,.22); box-shadow:inset 0 -18px 20px rgba(63,26,9,.08),inset 0 12px 18px rgba(255,237,199,.07); pointer-events:none; }
.square { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; overflow:visible; border:0; padding:0; font:clamp(2.05rem,10vw,3.55rem)/1 "DejaVu Sans","Segoe UI Symbol","Noto Sans Symbols 2",serif; -webkit-tap-highlight-color:transparent; }
.square.light { background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 40%),repeating-linear-gradient(91deg,#dfbd88 0,#cfaa72 17%,#e9c994 34%); }
.square.dark { background:linear-gradient(135deg,rgba(255,222,171,.08),rgba(41,17,7,.1)),repeating-linear-gradient(88deg,#805038 0,#996148 18%,#73442f 35%); }
.square.selected { box-shadow:inset 0 0 0 5px rgba(255,214,65,.95); }
.square.last-from,.square.last-to { background-image:linear-gradient(rgba(255,230,80,.48),rgba(255,230,80,.48)); }
.square.in-check { box-shadow:inset 0 0 0 5px rgba(231,76,60,.92); background-image:radial-gradient(circle,rgba(231,76,60,.68),transparent 72%); }
.chess-board.checkmate-board { animation:checkmate-board-shake .52s ease-out both; }
.square.checkmate-king { z-index:9; background-image:radial-gradient(circle,rgba(255,224,77,.98) 0 18%,rgba(239,75,51,.82) 44%,rgba(239,75,51,.16) 73%,transparent 80%); box-shadow:inset 0 0 0 5px #ffe04d,0 0 0 3px rgba(255,235,133,.68),0 0 24px 8px rgba(255,72,45,.76); animation:checkmate-king-pulse .72s ease-in-out infinite alternate; }
.square.checkmate-king::before { content:""; position:absolute; z-index:1; inset:10%; border:2px solid rgba(255,247,185,.88); border-radius:50%; box-shadow:0 0 12px rgba(255,237,129,.86),inset 0 0 11px rgba(255,247,185,.55); pointer-events:none; animation:checkmate-ring-spin 1.8s linear infinite; }
.square.checkmate-king .piece { animation:checkmate-piece-pop .52s cubic-bezier(.2,1.5,.45,1) both; }
.square.legal::after { content:""; position:absolute; width:25%; aspect-ratio:1; border-radius:50%; background:rgba(29,104,71,.55); pointer-events:none; }
.square.capture::after { content:""; position:absolute; inset:7%; border:5px solid rgba(173,35,35,.58); border-radius:50%; pointer-events:none; }
.piece { position:absolute; z-index:5; left:50%; bottom:-4%; display:grid; width:92%; height:166%; min-width:0; min-height:0; place-items:end center; transform:translateX(-50%); transform-origin:50% 94%; transition:transform .16s ease,filter .16s ease; pointer-events:none; }
.piece:not(:empty)::after { content:""; position:absolute; z-index:-1; left:13%; right:13%; bottom:2%; height:8%; border-radius:50%; background:rgba(34,15,7,.48); filter:blur(2px); }
.square:hover .piece:not(:empty),.square.selected .piece:not(:empty) { transform:translateX(-50%) translateY(-7%) scale(1.05); }
.piece.white,.piece.black { filter:none; }
.piece-render { display:block; width:100%; height:100%; max-width:100%; max-height:100%; min-width:0; min-height:0; object-fit:fill; object-position:center bottom; image-rendering:auto; user-select:none; pointer-events:none; }
.piece.white .piece-render { filter:drop-shadow(0 5px 2px rgba(47,21,8,.42)); }
.piece.black .piece-render { filter:drop-shadow(0 5px 2px rgba(15,5,2,.62)); }
.captured-panel { width:min(96%,464px); min-height:49px; padding:3px 9px 4px; border:1px solid rgba(246,202,122,.42); border-radius:8px; background:rgba(26,11,5,.62); box-shadow:0 5px 10px rgba(18,7,2,.34),inset 0 1px rgba(255,226,173,.12); }
.captured-heading { display:flex; align-items:center; justify-content:space-between; color:#f4d59d; font:700 .62rem/1 system-ui,sans-serif; letter-spacing:.02em; }
.captured-heading span:last-child { min-width:18px; color:#ffd348; text-align:right; }
.captured-list { display:flex; align-items:end; gap:3px; min-height:32px; overflow:hidden; }
.captured-empty { color:rgba(255,234,198,.42); font:700 .72rem/1 system-ui,sans-serif; }
.captured-piece { display:block; width:30px; height:34px; object-fit:fill; object-position:center bottom; filter:drop-shadow(0 2px 1px rgba(8,3,1,.55)); }
.coord { position:absolute; z-index:7; color:rgba(39,21,12,.8); text-shadow:0 1px rgba(255,236,195,.45); font:900 clamp(.48rem,1.8vw,.62rem)/1 system-ui,sans-serif; pointer-events:none; }
.coord.file { right:3px; bottom:2px; }
.coord.rank { left:3px; top:2px; }
.last-move { min-height:19px; color:#4c3425; font:.78rem/1.35 system-ui,sans-serif; font-weight:800; text-align:center; }
.control-panel { display:flex; flex:0 0 auto; justify-content:center; gap:10px; padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border-top:2px solid #c6aa7f; background:#eef1f4; }
.game-control { min-width:130px; min-height:44px; border:0; border-radius:22px; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.16); }
.game-control.undo { background:var(--blue); }
.game-control.resign { background:var(--red); }
.menu-overlay,.modal-overlay { position:absolute; z-index:80; inset:52px 0 0; display:flex; align-items:center; justify-content:center; overflow:auto; padding:12px; background:rgba(13,23,40,.96); }
.modal-overlay { z-index:110; inset:0; background:rgba(7,13,24,.78); backdrop-filter:blur(5px); }
.menu-card,.compact-card,.rules-card,.rank-card,.lobby-box,.dialog-card { width:min(100%,420px); max-height:100%; overflow:auto; border:1px solid rgba(255,255,255,.16); border-radius:24px; padding:21px 18px; background:linear-gradient(155deg,rgba(30,54,94,.98),rgba(10,22,49,.99)); color:#fff; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.42); }
.menu-intro { display:grid; grid-template-columns:minmax(0,1fr) 78px; align-items:center; gap:10px; padding-left:78px; }
.menu-copy { min-width:0; }
.eyebrow { display:inline-flex; padding:4px 10px; border:1px solid rgba(84,216,255,.34); border-radius:999px; background:rgba(55,201,255,.12); color:#8ce6ff; font:.72rem/1 system-ui,sans-serif; font-weight:900; }
.menu-logo { margin:7px 0 4px; color:var(--gold); font-size:2.05rem; line-height:1.05; text-shadow:0 3px 0 #8d5c18; }
.menu-subtitle { margin:0; color:#cad8ee; font:.83rem/1.4 system-ui,sans-serif; }
.hub-player { margin:8px 0 0; color:#dfe9f8; font:.76rem/1.2 system-ui,sans-serif; }
.hub-player b { color:var(--gold); }
.menu-qr { width:78px; padding:6px 5px 5px; border-radius:13px; background:#fff; color:#17243b; font:.58rem/1 system-ui,sans-serif; font-weight:900; }
.menu-qr img { display:block; width:68px; height:68px; margin-bottom:4px; border-radius:8px; }
.menu-actions { display:grid; gap:9px; margin-top:16px; }
.start-btn { width:100%; min-height:48px; border:0; border-radius:26px; padding:11px 14px; color:#fff; font-size:1.1rem; box-shadow:0 5px 14px rgba(0,0,0,.2); transition:transform .14s,filter .14s; }
.start-btn:active { transform:scale(.97); }
.start-btn:hover { filter:brightness(1.07); }
.offline-btn { background:#e67e22; }
.multi-btn { background:#8e44ad; }
.rank-btn { background:var(--gold); color:#26384b; }
.rules-btn { background:#2b6d8f; }
.color-choice-btn { display:block; width:100%; max-width:300px; min-height:0; margin:10px auto 0; padding:15px 20px; border:0; border-radius:30px; color:#fff; font-size:1.3rem; box-shadow:0 5px 15px rgba(0,0,0,.2); transition:transform .2s; }
.color-choice-btn:active { transform:scale(.95); }
.white-btn { background:#ecf0f1; color:#2c3e50; }
.black-btn { background:#2c3e50; }
.compact-card .back-btn { display:block; margin:14px auto 0; }
.create-btn { background:var(--green); }
.join-btn { background:var(--blue); }
.swap-btn { background:#9b59b6; }
.start-online-btn { background:#f39c12; }
.compact-card { width:min(100%,470px); }
.compact-card h2,.rules-card h2,.rank-card h2,.lobby-box h2,.dialog-card h2 { margin:0 0 14px; color:var(--gold); }
.field-label,.lobby-heading { display:block; margin:10px 0 6px; color:#d7e2f2; font:.86rem/1.2 system-ui,sans-serif; font-weight:800; }
.menu-input { width:100%; min-height:46px; border:2px solid transparent; border-radius:11px; padding:8px 12px; background:#fff; color:#243349; text-align:center; font-size:1rem; outline:none; }
.menu-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,201,76,.18); }
.difficulty-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:7px; margin:2px 0 12px; }
.difficulty-option { min-width:0; height:49px; border:1px solid rgba(255,255,255,.24); border-radius:12px; padding:0 5px; background:rgba(255,255,255,.1); color:#ecf0f1; font-size:.78rem; font-weight:900; line-height:1.15; white-space:nowrap; }
.difficulty-option.active { border-color:var(--gold); background:var(--gold); color:#26384b; box-shadow:0 0 0 3px rgba(242,201,76,.2),0 7px 18px rgba(0,0,0,.22); }
.setting-help,.wait-msg { color:#c8d5e7; font:.8rem/1.45 system-ui,sans-serif; }
.back-btn,.refresh-btn,.confirm-btn { min-height:40px; border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:8px 18px; background:rgba(255,255,255,.09); color:#fff; }
.compact-card .back-btn,.rules-card .back-btn,.rank-card .back-btn,.lobby-box>.back-btn { margin-top:14px; }
.rules-content { color:#e7edf7; font:.86rem/1.55 system-ui,sans-serif; text-align:left; word-break:keep-all; }
.rules-content h3 { margin:13px 0 5px; color:#8ce6ff; font-size:.95rem; }
.rules-content p,.rules-content ul { margin:5px 0; }
.rules-content ul { padding-left:20px; }
.guide-card { width:min(100%,470px); }
.guide-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:14px; }
.guide-tab { min-width:0; height:44px; border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:0 5px; background:rgba(255,255,255,.09); color:#fff; font-size:.82rem; white-space:nowrap; }
.guide-tab.active { border-color:var(--gold); background:var(--gold); color:#26384b; box-shadow:0 0 0 3px rgba(242,201,76,.17); }
.guide-panel h2 { margin-bottom:12px; }
.tutorial-intro { margin:0 0 10px; color:#c9d6e9; font:.78rem/1.4 system-ui,sans-serif; }
.tutorial-piece-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin-bottom:10px; }
.tutorial-piece-btn { display:grid; min-width:0; min-height:58px; place-items:center; gap:2px; border:1px solid rgba(255,255,255,.2); border-radius:9px; padding:4px 2px; background:rgba(255,255,255,.09); color:#fff; }
.tutorial-piece-btn.active { border-color:var(--gold); background:var(--gold); color:#26384b; box-shadow:0 0 0 3px rgba(242,201,76,.17); }
.tutorial-piece-symbol { font:2rem/1 "DejaVu Sans","Segoe UI Symbol","Noto Sans Symbols 2",serif; }
.tutorial-piece-btn>span:last-child { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font:.62rem/1 system-ui,sans-serif; font-weight:900; }
.tutorial-board-frame { width:min(100%,360px); aspect-ratio:1; margin:0 auto 9px; padding:8px; border:1px solid #2f170d; border-radius:8px; background:linear-gradient(90deg,#4a2412,#8b542d 8%,#b77743 48%,#74401f 92%,#3b1c0e); box-shadow:0 12px 20px rgba(22,9,3,.45),inset 0 2px 1px rgba(255,223,173,.32); }
.tutorial-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; height:100%; overflow:hidden; border:1px solid rgba(45,20,8,.9); outline:2px solid rgba(255,201,126,.26); }
.tutorial-square { position:relative; display:grid; min-width:0; min-height:0; place-items:center; }
.tutorial-square.light { background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 40%),repeating-linear-gradient(91deg,#dfbd88 0,#cfaa72 17%,#e9c994 34%); }
.tutorial-square.dark { background:linear-gradient(135deg,rgba(255,222,171,.08),rgba(41,17,7,.1)),repeating-linear-gradient(88deg,#805038 0,#996148 18%,#73442f 35%); }
.tutorial-square.tutorial-origin { box-shadow:inset 0 0 0 3px rgba(231,76,60,.62); }
.tutorial-square.tutorial-target { background-image:linear-gradient(rgba(0,220,255,.78),rgba(0,151,230,.78)); box-shadow:inset 0 0 0 2px rgba(223,252,255,.82),0 0 8px rgba(0,207,255,.55); }
.tutorial-square.tutorial-target::after { content:""; position:absolute; width:28%; height:28%; border-radius:50%; background:#e9ffff; box-shadow:0 0 7px rgba(255,255,255,.95),0 0 11px rgba(0,218,255,.95); pointer-events:none; }
.tutorial-square.tutorial-path { background-image:linear-gradient(rgba(255,210,42,.9),rgba(255,151,18,.9)); box-shadow:inset 0 0 0 3px rgba(255,255,255,.78),0 0 10px rgba(255,195,40,.82); }
.tutorial-square.tutorial-current { z-index:1; box-shadow:inset 0 0 0 3px var(--gold),0 0 12px rgba(242,201,76,.8); }
.tutorial-piece-image { position:relative; z-index:2; display:block; width:72%; height:72%; object-fit:contain; filter:drop-shadow(0 3px 2px rgba(30,10,3,.46)); animation:tutorial-piece-pop .22s ease-out; }
.tutorial-coord { position:absolute; z-index:2; color:rgba(39,21,12,.8); text-shadow:0 1px rgba(255,236,195,.45); font:900 .46rem/1 system-ui,sans-serif; pointer-events:none; }
.tutorial-coord.file { right:2px; bottom:1px; }
.tutorial-coord.rank { left:2px; top:1px; }
.tutorial-caption { min-height:34px; margin:0 0 5px; color:#f3dfad; font:.78rem/1.4 system-ui,sans-serif; }
.tutorial-note { margin:0; color:#9eb3ce; font:.7rem/1.35 system-ui,sans-serif; }
@keyframes tutorial-piece-pop { from { opacity:.3; transform:scale(.7); } to { opacity:1; transform:scale(1); } }
.rank-card { width:min(100%,470px); }
.rank-card>p { margin:0 0 10px; color:#c9d6e9; font:.78rem/1.4 system-ui,sans-serif; }
.rank-mode-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-bottom:10px; }
.rank-mode-tabs button { min-width:0; height:49px; border:1px solid rgba(255,255,255,.17); border-radius:8px; padding:0 2px; background:rgba(255,255,255,.12); color:#fff; font-size:.76rem; white-space:nowrap; }
.rank-mode-tabs button.active { border-color:var(--gold); background:var(--gold); color:#26384b; box-shadow:0 5px 18px rgba(242,201,76,.24); }
.rank-summary { margin-bottom:9px; border:1px solid rgba(242,201,76,.55); border-radius:10px; padding:9px; background:rgba(255,255,255,.07); color:#dce7f5; font:.78rem/1.35 system-ui,sans-serif; }
.leaderboard-box { max-height:45dvh; overflow:auto; border:2px solid var(--gold); border-radius:14px; padding:8px; background:#101d34; text-align:left; }
.rank-item { display:grid; grid-template-columns:48px minmax(0,1fr) 55px; align-items:center; gap:7px; min-height:43px; padding:7px 8px; border-bottom:1px solid rgba(255,255,255,.12); color:#eef5ff; font:.82rem/1.2 system-ui,sans-serif; }
.rank-item:nth-child(1) { color:#ffd84d; }
.rank-item:nth-child(2) { color:#dfe6ef; }
.rank-item:nth-child(3) { color:#e1a066; }
.rank-main { min-width:0; }
.rank-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:900; }
.rank-date { display:block; margin-top:2px; color:#92a5bf; font-size:.65rem; }
.rank-score { text-align:right; font-weight:900; white-space:nowrap; }
.chess-rank-ad { display:block; width:100%; min-height:86px; margin:8px 0; overflow:hidden; }
.rank-empty { padding:35px 8px; color:#aebed3; text-align:center; font:.8rem/1.5 system-ui,sans-serif; }
.room-list { display:grid; gap:7px; max-height:205px; overflow:auto; padding:6px; border-radius:12px; background:rgba(0,0,0,.18); }
.room-entry { display:flex; align-items:center; justify-content:space-between; width:100%; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:10px; background:rgba(255,255,255,.08); color:#fff; text-align:left; }
.room-entry span:last-child { color:#8ce6ff; }
.room-code-input { max-width:180px; margin:auto; }
.refresh-btn { margin-top:8px; }
.divider { margin:12px 0; color:#8fa2bd; font:.78rem/1 system-ui,sans-serif; }
.player-list { display:grid; gap:7px; min-height:80px; margin:10px 0; padding:10px; border-radius:12px; background:rgba(0,0,0,.25); }
.player-row { display:flex; align-items:center; justify-content:space-between; border-radius:9px; padding:9px; background:rgba(255,255,255,.09); }
.kick-btn { border:0; border-radius:8px; padding:5px 8px; background:#e74c3c; color:#fff; font-size:.72rem; }
#displayRoomCode { color:#fff; font-size:1.8rem; letter-spacing:.12em; }
.dialog-card { border:2px solid var(--gold); }
.promotion-card { max-width:330px; }
.promotion-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.promotion-option { display:grid; min-height:68px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:12px; background:rgba(255,255,255,.1); color:#fff; font:2.6rem/1 serif; }
.promotion-piece { display:block; width:100%; height:100%; object-fit:fill; }
.result-card { position:relative; max-width:440px; overflow:visible; }
.result-card.checkmate-card { border-color:#ffe04d; box-shadow:0 0 0 3px rgba(255,224,77,.2),0 0 34px rgba(255,101,38,.45),0 20px 60px rgba(0,0,0,.52); }
.result-celebration { position:relative; display:grid; place-items:center; height:132px; margin:-12px auto 0; overflow:visible; isolation:isolate; pointer-events:none; }
.celebration-aura { position:absolute; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,rgba(255,239,143,.9) 0,rgba(255,178,49,.42) 27%,rgba(239,75,51,.15) 55%,transparent 72%); filter:blur(2px); animation:celebration-aura-pulse 1.05s ease-in-out infinite alternate; }
.celebration-ring { position:absolute; width:86px; height:86px; border:3px solid rgba(255,236,119,.92); border-radius:50%; box-shadow:0 0 0 7px rgba(255,110,43,.18),0 0 24px rgba(255,220,82,.92); animation:celebration-ring-burst 1.15s ease-out infinite; }
.celebration-king { position:relative; z-index:3; color:#fff6c4; font:6.2rem/.9 "DejaVu Sans","Segoe UI Symbol","Noto Sans Symbols 2",serif; text-shadow:0 3px 0 #a05a1f,0 0 8px #fff,0 0 22px #ffd53d,0 0 42px rgba(255,71,37,.9); animation:celebration-king-bounce .9s cubic-bezier(.2,1.45,.45,1) infinite alternate; }
.celebration-label { position:absolute; z-index:4; bottom:3px; color:#fff4b2; font:900 .85rem/1 system-ui,sans-serif; letter-spacing:.28em; text-shadow:0 2px 5px rgba(40,10,0,.75),0 0 11px rgba(255,219,83,.95); animation:celebration-label-glow .8s ease-in-out infinite alternate; }
.celebration-particles { position:absolute; inset:0; z-index:2; overflow:visible; }
.celebration-particle { position:absolute; left:50%; top:50%; width:7px; height:15px; border-radius:2px; background:var(--particle-color); box-shadow:0 0 8px var(--particle-color); opacity:0; transform-origin:50% 0; animation:celebration-particle-fly 1.05s cubic-bezier(.15,.75,.32,1) var(--particle-delay) both; }
@keyframes checkmate-board-shake { 0%,100% { transform:scaleY(.99) translateX(0); } 15% { transform:scaleY(.99) translateX(-5px); } 30% { transform:scaleY(.99) translateX(5px); } 45% { transform:scaleY(.99) translateX(-3px); } 60% { transform:scaleY(.99) translateX(3px); } }
@keyframes checkmate-king-pulse { from { filter:brightness(1); } to { filter:brightness(1.55) drop-shadow(0 0 10px rgba(255,217,62,.95)); } }
@keyframes checkmate-piece-pop { from { transform:translateX(-50%) translateY(-7%) scale(.86); } to { transform:translateX(-50%) translateY(-13%) scale(1.1); } }
@keyframes checkmate-ring-spin { to { transform:rotate(360deg); } }
@keyframes celebration-aura-pulse { from { transform:scale(.86); opacity:.7; } to { transform:scale(1.14); opacity:1; } }
@keyframes celebration-ring-burst { 0% { transform:scale(.65); opacity:0; } 35% { opacity:1; } 100% { transform:scale(1.55); opacity:0; } }
@keyframes celebration-king-bounce { from { transform:translateY(7px) scale(.94); } to { transform:translateY(-6px) scale(1.04); } }
@keyframes celebration-label-glow { from { opacity:.7; transform:scale(.96); } to { opacity:1; transform:scale(1.04); } }
@keyframes celebration-particle-fly { 0% { opacity:0; transform:rotate(var(--particle-angle)) translateY(-20px) scale(.35); } 18% { opacity:1; } 100% { opacity:0; transform:rotate(var(--particle-angle)) translateY(var(--particle-distance)) scale(1); } }
.result-winner { margin:0 0 16px; color:#85f0aa; font-size:1.35rem; }
.result-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.result-actions .start-btn { min-height:50px; padding:8px 5px; font-size:.92rem; }
.home-result { background:#3498db; }
.review-result { background:#2b6d8f; }
.again-result { background:#e67e22; }
.rank-result { background:var(--gold); color:#26384b; }
.result-end-ad { width:100%; min-height:90px; margin-top:10px; overflow:hidden; }
.review-card { max-width:430px; text-align:left; }
.review-card h2 { text-align:center; }
.review-summary { padding:10px; border:1px solid rgba(242,201,76,.48); border-radius:10px; background:rgba(255,255,255,.07); color:#e5edf7; font:.82rem/1.45 system-ui,sans-serif; }
.review-list { display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; max-height:48dvh; overflow:auto; margin:10px 0; }
.review-move { display:flex; justify-content:space-between; gap:7px; padding:6px 8px; border-radius:7px; background:rgba(255,255,255,.06); color:#dce7f4; font:.76rem/1.25 system-ui,sans-serif; }
.custom-card { max-width:330px; }
.custom-card p { color:#fff; font:1rem/1.5 system-ui,sans-serif; word-break:keep-all; }
.dialog-actions { display:flex; gap:8px; }
.dialog-actions>* { flex:1; }
.confirm-btn { border:0; background:#e74c3c; }
.confetti { position:absolute; z-index:150; width:9px; height:9px; pointer-events:none; animation:fall 2.8s ease-in forwards; }
@keyframes fall { from { transform:translateY(-20px) rotate(0); opacity:1; } to { transform:translateY(100dvh) rotate(620deg); opacity:0; } }
@media (max-height:720px) {
  .menu-card,.compact-card,.rules-card,.rank-card,.lobby-box { padding:14px; }
  .menu-logo { font-size:1.7rem; }
  .menu-actions { margin-top:10px; gap:6px; }
  .start-btn { min-height:43px; }
  .guide-card { padding:14px; }
  .tutorial-board-frame { width:min(100%,320px); }
  .board-frame { width:min(100%,calc(100dvh - 310px)); }
  .board-stage.timed .board-frame { width:min(100%,calc(100dvh - 405px)); }
}
@media (max-width:390px) {
  .header { padding-inline:7px; }
  .title { font-size:1rem; }
  .home-btn { font-size:.72rem; padding:5px 6px; }
  .rule-status { display:none; }
  .guide-tabs { gap:3px; }
  .guide-tab { font-size:.65rem; }
  .tutorial-piece-picker { gap:3px; }
  .tutorial-piece-btn { min-height:50px; padding-inline:1px; }
  .tutorial-piece-symbol { font-size:1.55rem; }
  .tutorial-piece-btn>span:last-child { font-size:.54rem; }
  .difficulty-options { gap:3px; }
  .difficulty-option { font-size:.61rem; }
  .rank-mode-tabs { gap:3px; }
  .rank-mode-tabs button { font-size:.61rem; }
  .game-control { min-width:116px; }
  .menu-intro { grid-template-columns:minmax(0,1fr) 62px; padding-left:62px; }
  .menu-qr { width:62px; }
  .menu-qr img { width:52px; height:52px; }
}

/* 메뉴의 QR은 눌러서 참고 화면처럼 크게 확인할 수 있습니다. */
.menu-qr { border:0; cursor:pointer; font-family:inherit; transition:transform .16s, box-shadow .16s; }
.menu-qr:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.34); }
.menu-qr:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.chess-qr-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background:rgba(2,6,23,.72); backdrop-filter:blur(8px); }
.chess-qr-modal[hidden] { display:none; }
.chess-qr-backdrop { position:absolute; inset:0; }
.chess-qr-card { position:relative; width:min(390px,calc(100vw - 32px)); padding:22px 20px 18px; border-radius:10px; background:#fff; color:#172753; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.chess-qr-card h2 { margin:0 0 7px; color:#172753; font-size:1.35rem; }
.chess-qr-card>p { margin:0 0 14px; color:#53617b; font-size:.76rem; }
.chess-qr-card img { display:block; width:min(280px,76vw); height:min(280px,76vw); margin:0 auto 14px; image-rendering:pixelated; }
.chess-qr-close { position:absolute; top:9px; right:10px; width:32px; height:32px; border:0; border-radius:8px; background:#172753; color:#fff; cursor:pointer; font-size:1.35rem; line-height:1; }
.chess-qr-close:hover { background:#2f5f9e; }