[hidden] { display: none !important; }

.ranking-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ranking-head h3 { margin:0; }
.ranking-tabs { display:flex; gap:4px; }
.ranking-tabs button { padding:5px 9px; border-radius:8px; opacity:.55; }
.ranking-tabs button.active { opacity:1; color:white; background:#594be8; border-color:#594be8; }
.ranking-panel #ranking { height:110px; overflow:auto; margin:10px 0 0; padding-left:28px; }
.ranking-panel #ranking li { padding:3px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lobby-shortcuts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }
.lobby-shortcuts button { position:relative; display:grid; min-width:0; min-height:92px; place-items:center; align-content:center; gap:2px; padding:10px 5px; overflow:hidden; border-color:#ffffff14; background:linear-gradient(155deg,#17243a,#0b1422); box-shadow:0 9px 24px #02071255; }
.lobby-shortcuts button::before { content:""; position:absolute; inset:auto -25% -70% -25%; height:90px; border-radius:50%; background:var(--hub-glow,#7669ff); opacity:.14; filter:blur(5px); transition:.2s; }
.lobby-shortcuts button:hover { transform:translateY(-2px); border-color:#7669ff88; box-shadow:0 12px 28px #02071288,0 0 0 1px #7669ff22 inset; }
.lobby-shortcuts button:hover::before { opacity:.28; }
.lobby-shortcuts button[data-open-hub="vault"] { --hub-glow:#45bfff; }
.lobby-shortcuts button[data-open-hub="friends"] { --hub-glow:#35d69a; }
.lobby-shortcuts button[data-open-hub="ranking"] { --hub-glow:#ffc657; }
.lobby-shortcuts span { position:relative; z-index:1; font-size:25px; }
.lobby-shortcuts b { position:relative; z-index:1; font-size:13px; }
.lobby-shortcuts small { position:relative; z-index:1; color:#77859a; font-size:9px; white-space:nowrap; }
.lobby-shortcuts i { position:absolute; z-index:2; top:8px; right:9px; width:9px; height:9px; border:2px solid #101a29; border-radius:50%; background:#ff5364; box-shadow:0 0 10px #ff5364; }
.lobby-service-dock { display:contents; }
.hub-dialog { width:min(900px,calc(100vw - 28px)); max-width:none; max-height:calc(100dvh - 28px); padding:0; overflow:hidden; border-color:#7684a433; background:linear-gradient(145deg,#172439,#09111e 72%); }
.hub-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:23px 25px 18px; border-bottom:1px solid #ffffff10; background:linear-gradient(120deg,#7669ff12,transparent 55%); }
.hub-dialog-head h2 { margin:4px 0 2px; font-size:25px; }
.hub-dialog-head p:not(.eyebrow),.hub-dialog-head small { margin:0; color:#8491a6; font-size:12px; }
.dialog-close { flex:0 0 38px; min-height:38px; padding:0; border-radius:50%; font-size:23px; }
.ranking-head small { display:block; margin-top:2px; color:#7f8da2; font-size:9px; }
.shop-items,.friend-list { display:grid; gap:7px; overflow:auto; }
.shop-items article,.friend-list article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; border:1px solid #ffffff12; border-radius:10px; background:#0c1523; }
.shop-items article div,.friend-list article div { display:grid; min-width:0; gap:2px; }
.shop-items small,.friend-list small { color:#8795a9; font-size:10px; }
.shop-items em { color:#ffd36c; font-style:normal; font-size:10px; }
.shop-items button,.friend-list button { padding:6px 8px; font-size:10px; }
.shop-icon,.friend-avatar { display:grid; width:32px; height:32px; place-items:center; border-radius:9px; background:#24324b; font-size:18px; }
.friend-avatar { border-radius:50%; color:#eaf4ff; background:#4056a8; font-size:13px; font-weight:900; }
.friend-list small.online { color:#70dd98; }
.friend-add-form { display:grid; grid-template-columns:1fr auto; gap:6px; margin-bottom:5px; }
.friend-add-form input { min-width:0; padding:7px; }
.friend-add-form button { padding:7px 10px; }
.friend-search-results { display:grid; gap:6px; margin:0 0 12px; }
.friend-search-results article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; border:1px solid #4fcda433; border-radius:10px; background:#10251f88; }
.friend-search-results article>div { display:grid; min-width:0; gap:2px; }
.friend-search-results b { overflow:hidden; color:#e8fff7; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.friend-search-results small { overflow:hidden; color:#718e87; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.friend-search-results button { min-width:58px; min-height:30px; padding:5px 7px; font-size:9px; }
.friend-search-results .empty-state { margin:2px 0; padding:9px; color:#74887f; border:1px dashed #4fcda42b; border-radius:9px; text-align:center; font-size:10px; }
.hub-shop-items { grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); min-height:270px; max-height:620px; padding:24px; }
.hub-shop-items article { min-height:108px; padding:16px; border-radius:16px; background:linear-gradient(145deg,#142239,#0b1524); }
.hub-shop-items .shop-icon { width:52px; height:52px; border-radius:15px; font-size:27px; background:linear-gradient(145deg,#574ae0,#2f3882); box-shadow:0 9px 24px #302a8d55; }
.hub-shop-items b { font-size:15px; }
.hub-shop-items small { line-height:1.45; }
.shop-hub-tabs { display:flex; gap:8px; padding:12px 24px 0; border-top:1px solid #ffffff0b; }
.shop-hub-tabs button { min-width:140px; border-color:#ffffff16; background:#111b2c; }
.shop-hub-tabs button.active { border-color:#7e70ff88; color:#fff; background:linear-gradient(135deg,#5446c8,#6b4aa9); box-shadow:0 8px 24px #5b4ed12c; }
.shop-dialog { width:min(1180px,calc(100vw - 28px)); }
.shop-dialog #game-card-panel { position:relative; max-height:calc(100dvh - 150px); gap:10px; padding:18px 24px 24px; overflow:auto; }
.shop-dialog #game-card-panel .game-card-pack { padding:12px 16px; }
.game-card-store-toolbar { display:flex; min-height:0; align-items:end; justify-content:space-between; gap:24px; margin:0; padding:4px 2px 16px; border-bottom:1px solid #ffffff10; }
.game-card-store-toolbar h3,.game-card-store-toolbar p { margin:0; }.game-card-store-toolbar h3 { margin:4px 0; font-size:22px; }.game-card-store-toolbar>div:first-child>small { color:#8493aa; font-size:11px; }
.game-card-store-toolbar>div:last-child { display:grid; flex:0 0 auto; gap:2px; text-align:right; }.game-card-store-toolbar>div:last-child small { color:#8f9bb0; }.game-card-store-toolbar>div:last-child strong { color:#ffd565; font-size:20px; }
.game-card-storefront { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-top:8px; }
.game-card-pack-product { position:relative; display:grid; min-width:0; min-height:340px; grid-template-columns:190px minmax(0,1fr); align-items:center; gap:17px; padding:20px; overflow:hidden; border:1px solid #ffffff16; border-radius:22px; background:linear-gradient(150deg,#15243a,#080f1b); box-shadow:inset 0 1px #ffffff10,0 16px 38px #0006; }
.game-card-pack-product::before { content:""; position:absolute; inset:-35%; opacity:.24; pointer-events:none; transform:rotate(-18deg); }
.game-card-pack-product.tetris::before { background:radial-gradient(circle at 35% 45%,#35fff2 0 8%,transparent 34%),conic-gradient(from 70deg,#5c4cff,#16dccc,#5c4cff); }
.game-card-pack-product.worldmarble::before { background:radial-gradient(circle at 35% 45%,#ffe275 0 8%,transparent 34%),conic-gradient(from 70deg,#d8a635,#0c9d9c,#d8a635); }
.game-card-pack-art { position:relative; display:grid; width:178px; height:250px; align-content:center; justify-items:center; gap:5px; padding:24px 14px; overflow:hidden; border:2px solid #ffffff9e; border-radius:13px 13px 18px 18px; color:#fff; text-align:center; clip-path:polygon(0 3%,5% 0,10% 3%,15% 0,20% 3%,25% 0,30% 3%,35% 0,40% 3%,45% 0,50% 3%,55% 0,60% 3%,65% 0,70% 3%,75% 0,80% 3%,85% 0,90% 3%,95% 0,100% 3%,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%); box-shadow:0 20px 36px #0009,inset 0 0 0 5px #08111b99,inset 0 0 42px #ffffff25; transform:rotate(-3deg); transition:.2s ease; }
.game-card-pack-product:hover .game-card-pack-art { filter:brightness(1.08); transform:translateY(-5px) rotate(-1deg) scale(1.025); }
.game-card-pack-product.tetris .game-card-pack-art { background:radial-gradient(circle at 50% 30%,#60fff78a,transparent 28%),linear-gradient(155deg,#583bde,#087985 55%,#0b263b); }
.game-card-pack-product.worldmarble .game-card-pack-art { background:radial-gradient(circle at 50% 30%,#fff4a5a8,transparent 28%),linear-gradient(155deg,#d7a12e,#126e72 58%,#123142); }
.game-card-pack-art::before,.game-card-pack-art::after { content:""; position:absolute; width:150px; height:150px; border:1px solid #ffffff3d; border-radius:50%; }.game-card-pack-art::before { top:-70px; left:-45px; }.game-card-pack-art::after { right:-75px; bottom:-65px; }
.game-card-pack-art .pack-shine { position:absolute; inset:-50% auto -50% -60%; width:38%; background:linear-gradient(90deg,transparent,#fff8,transparent); transform:rotate(18deg); animation:game-card-pack-shine 3.2s ease-in-out infinite; }
.game-card-pack-art>i { z-index:1; font-style:normal; font-size:55px; filter:drop-shadow(0 6px 10px #0008); }.game-card-pack-art>small,.game-card-pack-art>b,.game-card-pack-art>em { z-index:1; }.game-card-pack-art>small { font-size:8px; font-weight:900; letter-spacing:.18em; }.game-card-pack-art>b { font-size:22px; line-height:1.05; text-shadow:0 3px 8px #0009; }.game-card-pack-art>em { margin-top:8px; padding:4px 8px; border:1px solid #ffffff55; border-radius:999px; background:#06101b77; font-size:7px; font-style:normal; letter-spacing:.12em; }
.game-card-pack-copy { position:relative; z-index:1; display:grid; min-width:0; align-content:center; gap:7px; }.game-card-pack-copy>span { color:#8eeae6; font-size:10px; font-weight:900; }.worldmarble .game-card-pack-copy>span { color:#f0ca67; }.game-card-pack-copy h3,.game-card-pack-copy p { margin:0; }.game-card-pack-copy h3 { font-size:20px; }.game-card-pack-copy p { min-height:49px; color:#9ca9bb; font-size:10px; line-height:1.55; }.game-card-pack-copy>small { min-height:18px; color:#ffd668; font-size:9px; }
.game-card-pack-buy { display:grid; gap:7px; margin-top:8px; }.game-card-pack-buy button { display:flex; min-height:45px; align-items:center; justify-content:space-between; gap:8px; padding:9px 11px; font-size:11px; }.game-card-pack-buy button b { color:#ffd76c; font-size:10px; }.game-card-pack-buy .primary b { color:#fff4c4; }
@keyframes game-card-pack-shine { 0%,48% { left:-60%; } 70%,100% { left:150%; } }
.card-vault-dialog { width:min(1120px,calc(100vw - 28px)); background:radial-gradient(circle at 50% 0,#283a5d66,transparent 38%),linear-gradient(145deg,#111c2d,#070d17 76%); }.game-card-vault-panel { max-height:calc(100dvh - 116px); background:linear-gradient(#0d1725aa,#080f1aee); }.vault-card-toolbar { position:sticky; z-index:3; top:-18px; padding:10px 0; background:#111c2dcc; backdrop-filter:blur(12px); }.vault-card-toolbar .game-card-game-tabs button { min-width:150px; min-height:48px; font-size:13px; }.vault-card-toolbar .game-card-game-tabs button.active { border-color:#49e6df; background:linear-gradient(135deg,#12666b,#173b50); box-shadow:0 0 20px #28d8d244,inset 0 0 20px #54fff51a; }
.game-card-ability-select { display:grid; gap:9px; padding:13px; border:1px solid #3f526e; border-radius:16px; background:linear-gradient(145deg,#111d30,#0a1220); box-shadow:inset 0 1px 0 #ffffff0b,0 10px 26px #0004; }.game-card-ability-select>header { display:flex; align-items:end; justify-content:space-between; gap:10px; }.game-card-ability-select>header b { color:#e7edf8; font-size:14px; }.game-card-ability-select>header small { color:#73839a; font-size:9px; }.game-card-ability-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }.game-card-ability-button { display:flex; min-width:0; min-height:58px; align-items:center; gap:8px; padding:8px 10px; border-color:#33435c; color:#aab7c9; background:linear-gradient(145deg,#162337,#0b1422); text-align:left; }.game-card-ability-button>i { flex:0 0 34px; display:grid; width:34px; height:38px; place-items:center; border:1px solid #ffffff10; border-radius:10px; background:#ffffff08; font-style:normal; font-size:20px; }.game-card-ability-button>span { display:grid; min-width:0; gap:2px; }.game-card-ability-button b { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.game-card-ability-button small { color:#61728a; font-size:8px; }.game-card-ability-button.active { border-color:#ffd45b; color:#fff4c2; background:radial-gradient(circle at 16% 40%,#ffc02e33,transparent 42%),linear-gradient(145deg,#3b2c16,#181b27); box-shadow:0 0 0 1px #ffcf4b22 inset,0 0 22px #e7a71933; transform:translateY(-1px); }.game-card-ability-button.active>i { border-color:#ffc83866; background:#b87f1838; box-shadow:0 0 15px #ffc33535; }.game-card-ability-button.active small { color:#c9a95c; }
.game-card-operation-panel { display:grid; gap:8px; padding:10px; border:1px solid #ffffff14; border-radius:16px; background:#070e19cc; }.game-card-operation-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.game-card-operation-tabs button { display:flex; min-height:50px; align-items:center; justify-content:center; gap:8px; border-color:#35445b; color:#8290a5; background:linear-gradient(#162236,#0c1523); }.game-card-operation-tabs button span { font-size:18px; }.game-card-operation-tabs button b { font-size:11px; }.game-card-operation-tabs button.active { border-color:#806dff; color:#f2efff; background:linear-gradient(135deg,#5847c9,#342f78); box-shadow:0 7px 20px #4837b94d,inset 0 1px #ffffff20; }.game-card-operation-panel>p { min-height:16px; margin:0; color:#8795aa; text-align:center; font-size:9px; }.game-card-max-level { display:inline-flex; min-height:30px; align-items:center; padding:5px 9px; border:1px solid #ffd15b66; border-radius:8px; color:#ffd975; background:#63480f36; font-size:9px; font-weight:900; }
.my-room-dialog { width:min(1240px,calc(100vw - 24px)); height:min(820px,calc(100dvh - 24px)); max-height:none; background:#070d17; }.my-room-shell { display:grid; grid-template-columns:286px minmax(0,1fr); width:100%; height:100%; overflow:hidden; }.my-room-sidebar { position:relative; z-index:2; display:flex; width:auto; min-width:0; min-height:0; flex-direction:column; gap:16px; padding:24px 18px 18px; border-right:1px solid #ffffff12; background:radial-gradient(circle at 50% 20%,#30466c66,transparent 32%),linear-gradient(180deg,#15233a,#09111e 75%); box-shadow:10px 0 35px #0005; }.my-room-sidebar>header { display:block; min-height:0; margin:0; padding:0 7px; }.my-room-sidebar>header h2 { margin:3px 0 0; font-size:25px; }.my-room-avatar-card { display:grid; justify-items:center; gap:4px; min-height:260px; padding:15px 10px 12px; border:1px solid #ffffff16; border-radius:20px; background:radial-gradient(circle at 50% 40%,#647dba31,transparent 52%),#0a1321aa; box-shadow:inset 0 1px #ffffff0e,0 16px 38px #0005; }.my-room-avatar-card #my-room-avatar { display:grid; width:180px; height:200px; place-items:center; }.my-room-avatar-card>b { font-size:16px; }.my-room-avatar-card>small { color:#9aabd0; }.my-room-equipped { display:grid; gap:9px; margin-top:auto; }.my-room-equipped>header { display:grid; min-height:0; gap:2px; margin:0; padding:0 4px; }.my-room-equipped>header b { font-size:13px; }.my-room-equipped>header small { color:#65758d; font-size:8px; line-height:1.4; }.my-room-equipped-slots,#my-room-equipped-slots { display:grid; gap:8px; }.my-room-equipped-slot { position:relative; display:grid; width:100%; min-height:94px; align-content:start; gap:7px; padding:10px; overflow:visible; border-color:#53637c; background:linear-gradient(145deg,#17253a,#0a1321); text-align:left; }.my-room-equipped-slot>small { color:#7f90a9; font-size:8px; }.my-room-equipped-slot>span:not(.my-room-card-trait) { display:flex; align-items:center; gap:9px; }.my-room-equipped-slot>span>i { display:grid; flex:0 0 42px; width:42px; height:48px; place-items:center; border:1px solid currentColor; border-radius:11px; background:#ffffff09; font-style:normal; font-size:23px; }.my-room-equipped-slot>span>span { display:grid; min-width:0; gap:3px; }.my-room-equipped-slot>span b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.my-room-equipped-slot>span small { color:#8391a6; font-size:8px; }.my-room-equipped-slot.empty { border-style:dashed; color:#7788a1; }.empty-card-slot { justify-content:center; color:#7d8ca2; }.empty-card-slot i { border-style:dashed!important; font-size:28px!important; }.my-room-card-trait { position:absolute; z-index:20; left:calc(100% + 10px); bottom:0; display:grid; width:270px; gap:5px; padding:12px 14px; visibility:hidden; border:1px solid #ffd26077; border-radius:12px; color:#f6e4aa; background:#111522f5; box-shadow:0 14px 40px #000b,0 0 22px #e5b42b33; opacity:0; transform:translateX(-8px); transition:.16s; pointer-events:none; }.my-room-card-trait::before { content:""; position:absolute; left:-7px; bottom:24px; width:12px; height:12px; border-left:1px solid #ffd26077; border-bottom:1px solid #ffd26077; background:#111522; transform:rotate(45deg); }.my-room-card-trait em { color:#d3a936; font-size:8px; font-style:normal; letter-spacing:.12em; }.my-room-card-trait b { overflow:visible!important; color:#f3f0e8; font-size:10px!important; line-height:1.5; white-space:normal!important; }.my-room-equipped-slot:hover .my-room-card-trait,.my-room-equipped-slot:focus-visible .my-room-card-trait { visibility:visible; opacity:1; transform:none; }
.my-room-workspace { position:relative; z-index:1; display:grid; min-width:0; min-height:0; grid-template-rows:auto auto minmax(0,1fr); background:radial-gradient(circle at 88% 0,#6157b72b,transparent 31%),#09111d; }.my-room-topbar { display:flex; min-height:0; align-items:center; justify-content:space-between; gap:18px; margin:0; padding:18px 20px 14px 26px; border-bottom:1px solid #ffffff10; }.my-room-topbar.no-brand { justify-content:flex-end; }.my-room-topbar h2 { margin:3px 0 0; font-size:23px; }.my-room-topbar>div:last-child { display:flex; align-items:center; gap:12px; }.my-room-main-tabs { display:flex; gap:7px; }.my-room-main-tabs button { min-width:112px; min-height:44px; border-color:#3b4960; color:#8c9ab0; background:#111b2b; }.my-room-main-tabs button.active { border-color:#8172ff; color:#fff; background:linear-gradient(135deg,#5f4dd6,#3c347f); box-shadow:0 8px 24px #5948cd4d,inset 0 1px #ffffff21; }.my-room-sub-tabs { display:flex; gap:4px; padding:10px 20px 0 26px; border-bottom:1px solid #ffffff0a; }.my-room-sub-tabs button { min-width:104px; border:0; border-bottom:2px solid transparent; border-radius:8px 8px 0 0; color:#748299; background:transparent; }.my-room-sub-tabs button.active { border-bottom-color:#57e4e0; color:#e8ffff; background:linear-gradient(#1e4b5236,transparent); }.my-room-content { min-height:0; overflow:hidden; }.my-room-content>.game-card-vault-panel { max-height:none; height:100%; padding:12px 18px 18px 26px; overflow:auto; }.my-room-content .vault-card-toolbar { top:-12px; padding:7px 0 10px; }.my-room-content .vault-card-toolbar>div:last-child { display:none; }.my-room-card-filters { position:relative; z-index:1; top:auto; display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,.55fr); gap:9px; padding:10px; border:1px solid #ffffff12; border-radius:13px; background:#0b1422e8; backdrop-filter:blur(12px); }.my-room-card-filters label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px; margin:0; color:#8796ad; font-size:9px; }.my-room-card-filters select { min-width:0; margin:0; }.my-room-content .game-card-list-head { padding-top:2px; }.my-room-effects-empty { display:grid; height:100%; place-content:center; justify-items:center; gap:8px; color:#8391a7; text-align:center; }.my-room-effects-empty>span { font-size:48px; filter:drop-shadow(0 0 18px #8e78ff); }.my-room-effects-empty>b { color:#e9e7ff; font-size:18px; }.my-room-effects-empty p { margin:0; font-size:10px; line-height:1.6; }.game-card-action-guide { display:inline-flex; min-height:30px; align-items:center; padding:5px 9px; border:1px solid #61718a; border-radius:8px; color:#8e9bb0; background:#182235; font-size:8px; }
.game-card-panel { display:grid; gap:14px; max-height:min(700px,78vh); padding:18px 24px 24px; overflow:auto; }
.game-card-toolbar,.game-card-pack,.game-card-list-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.game-card-toolbar>div:last-child { display:grid; gap:2px; text-align:right; }.game-card-toolbar>div:last-child small { color:#8492a8; }.game-card-toolbar>div:last-child strong { color:#ffd66e; font-size:18px; }
.game-card-game-tabs { display:flex; gap:8px; }.game-card-game-tabs button.active { border-color:#6ee8df88; color:#dffffd; background:#17464d; }
.game-card-pack { padding:18px; border:1px solid #7669ff55; border-radius:18px; background:radial-gradient(circle at 10% 20%,#6254e32f,transparent 40%),linear-gradient(135deg,#172742,#101725); }
.game-card-pack h3,.game-card-pack p { margin:3px 0; }.game-card-pack p { color:#9da9ba; font-size:11px; }.game-card-draw-actions { display:flex; gap:8px; }
.game-card-draw-result { display:flex; gap:8px; padding:12px; overflow:auto; border:1px solid #ffd66e44; border-radius:15px; background:#3f2d132b; }
.game-card-draw-result>span { display:grid; min-width:145px; gap:3px; padding:12px; border:1px solid currentColor; border-radius:13px; background:#0e1726; animation:game-card-pop .45s both; }.game-card-draw-result i { font-style:normal; font-size:24px; }.game-card-draw-result small { opacity:.7; }
@keyframes game-card-pop { from { opacity:0; transform:translateY(12px) scale(.92) } }
.game-card-draw-result { display:block; padding:16px; overflow:hidden; background:radial-gradient(circle at 50% 0,#7057ff26,transparent 42%),linear-gradient(145deg,#111a2d,#0a101d); border-color:#7568d96b; box-shadow:inset 0 1px 0 #ffffff12,0 15px 36px #0006; }
.game-card-draw-result>header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid #ffffff13; }
.game-card-draw-result>header>div { display:grid; gap:3px; }.game-card-draw-result>header strong { font-size:17px; color:#f3f5ff; }.game-card-draw-result>header small { color:#aab5cb; }
.game-card-reveal-all { min-width:156px; border-color:#7d6cff; background:linear-gradient(135deg,#6755eb,#8d55ee); color:#fff; box-shadow:0 8px 24px #7057ff3d; }
.game-card-reveal-all:disabled { border-color:#364158; background:#202a3c; color:#8792a8; box-shadow:none; }
.game-card-reveal-back-store { min-width:190px; border-color:#52dacf88; color:#eaffff; background:linear-gradient(135deg,#176c70,#21445f); box-shadow:0 8px 24px #1daaa433; }
.game-card-reveal-grid { display:grid; grid-template-columns:repeat(5,minmax(118px,160px)); justify-content:center; gap:10px; perspective:1200px; }
.game-card-reveal-card { position:relative; width:100%; height:150px; padding:0; border:0; border-radius:15px; background:transparent; color:#f7f8ff; cursor:pointer; perspective:1100px; opacity:0; animation:game-card-deal .55s cubic-bezier(.18,.8,.22,1) var(--deal-delay,0ms) forwards; isolation:isolate; }
.game-card-reveal-card:hover[data-state="hidden"] { transform:translateY(-5px) rotate(-1deg); filter:brightness(1.14); }.game-card-reveal-card:focus-visible { outline:3px solid #68e9ff; outline-offset:4px; }
.game-card-reveal-flipper { position:absolute; inset:0; display:block; transform-style:preserve-3d; transition:transform var(--reveal-duration,580ms) cubic-bezier(.2,.72,.17,1) var(--reveal-delay,0ms); will-change:transform; }
.game-card-reveal-card.opening .game-card-reveal-flipper,.game-card-reveal-card.revealed .game-card-reveal-flipper { transform:rotateY(180deg); }
.game-card-draw-result.single-reveal { min-height:510px; align-content:center; }
.game-card-draw-result.single-reveal .game-card-reveal-grid { grid-template-columns:minmax(230px,290px); }
.game-card-draw-result.single-reveal .game-card-reveal-card { height:350px; }
.game-card-draw-result.single-reveal .game-card-reveal-back>i,.game-card-draw-result.single-reveal .game-card-reveal-front>i { font-size:52px; }
.game-card-draw-result.single-reveal .game-card-reveal-front>b { font-size:17px; }
.game-card-draw-result.single-reveal .game-card-reveal-front>strong { font-size:19px; }
.game-card-draw-result.single-reveal .game-card-reveal-front>small { max-width:220px; font-size:11px; }

.game-card-pack-opening { position:absolute; z-index:40; inset:0; display:grid; place-items:center; overflow:hidden; border-radius:18px; background:radial-gradient(circle at 50% 48%,#7b6eff45,transparent 28%),#030813ed; backdrop-filter:blur(10px); opacity:0; transition:opacity .2s ease; }
.game-card-pack-opening.show { opacity:1; }.game-card-pack-opening.finished { opacity:0; }
.game-card-pack-opening-burst { position:relative; display:grid; width:360px; height:430px; place-items:center; perspective:1000px; }
.game-card-pack-opening-burst::before,.game-card-pack-opening-burst::after { content:""; position:absolute; inset:50%; width:20px; height:20px; border-radius:50%; opacity:0; transform:translate(-50%,-50%); }
.game-card-pack-opening.tearing .game-card-pack-opening-burst::before { animation:game-card-pack-burst .7s .35s ease-out both; box-shadow:0 0 0 8px #fff,0 0 40px 25px #68fff4,0 0 110px 70px #755dff; }
.game-card-pack-opening.worldmarble.tearing .game-card-pack-opening-burst::before { box-shadow:0 0 0 8px #fff,0 0 40px 25px #ffe774,0 0 110px 70px #11b9ad; }
.game-card-opening-pack { position:relative; display:grid; width:220px; height:320px; align-content:center; justify-items:center; gap:8px; overflow:hidden; border:2px solid #ffffffb8; border-radius:15px 15px 22px 22px; color:#fff; background:radial-gradient(circle at 50% 28%,#62fff28f,transparent 26%),linear-gradient(155deg,#593ee2,#087a84 56%,#0a2136); box-shadow:0 30px 70px #000d,inset 0 0 0 6px #06101b99,inset 0 0 50px #ffffff28; clip-path:polygon(0 3%,5% 0,10% 3%,15% 0,20% 3%,25% 0,30% 3%,35% 0,40% 3%,45% 0,50% 3%,55% 0,60% 3%,65% 0,70% 3%,75% 0,80% 3%,85% 0,90% 3%,95% 0,100% 3%,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%); opacity:0; transform:translateY(35px) rotateY(-22deg) scale(.72); }
.game-card-pack-opening.worldmarble .game-card-opening-pack { background:radial-gradient(circle at 50% 28%,#fff3a59e,transparent 26%),linear-gradient(155deg,#d9a42e,#117276 58%,#102d40); }
.game-card-pack-opening.show .game-card-opening-pack { animation:game-card-pack-arrive .45s cubic-bezier(.15,.85,.25,1.2) both; }
.game-card-pack-opening.tearing .game-card-opening-pack { animation:game-card-pack-rip .95s cubic-bezier(.18,.75,.24,1) both; }
.game-card-opening-pack>small,.game-card-opening-pack>i,.game-card-opening-pack>b,.game-card-opening-pack>em { position:relative; z-index:2; }.game-card-opening-pack>small { font-size:9px; font-weight:900; letter-spacing:.18em; }.game-card-opening-pack>i { font-style:normal; font-size:68px; filter:drop-shadow(0 8px 12px #0009); }.game-card-opening-pack>b { font-size:27px; line-height:1.04; text-align:center; text-shadow:0 4px 10px #0009; }.game-card-opening-pack>em { padding:5px 10px; border:1px solid #ffffff66; border-radius:999px; background:#06101b88; font-size:8px; font-style:normal; letter-spacing:.14em; }
.game-card-opening-tear { position:absolute; z-index:5; top:47%; left:50%; width:0; height:7px; background:linear-gradient(90deg,transparent,#fff 12% 88%,transparent); filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #70fff5); transform:translate(-50%,-50%) rotate(-4deg); }
.game-card-pack-opening.tearing .game-card-opening-tear { animation:game-card-pack-tear .42s .12s ease-out both; }
.game-card-opening-pieces { position:absolute; inset:0; pointer-events:none; }.game-card-opening-pieces i { position:absolute; top:48%; left:50%; width:14px; height:32px; opacity:0; background:linear-gradient(#fff,#6bf0e5); clip-path:polygon(0 0,100% 20%,64% 100%,18% 72%); }.worldmarble .game-card-opening-pieces i { background:linear-gradient(#fff8bd,#d9a42e); }.game-card-pack-opening.tearing .game-card-opening-pieces i { animation:game-card-pack-piece .68s .38s ease-out both; }.game-card-opening-pieces i:nth-child(1){--piece-x:-130px;--piece-y:-95px;--piece-r:-90deg}.game-card-opening-pieces i:nth-child(2){--piece-x:-100px;--piece-y:105px;--piece-r:140deg}.game-card-opening-pieces i:nth-child(3){--piece-x:-25px;--piece-y:-145px;--piece-r:210deg}.game-card-opening-pieces i:nth-child(4){--piece-x:55px;--piece-y:135px;--piece-r:300deg}.game-card-opening-pieces i:nth-child(5){--piece-x:125px;--piece-y:-80px;--piece-r:390deg}.game-card-opening-pieces i:nth-child(6){--piece-x:150px;--piece-y:70px;--piece-r:480deg}
@keyframes game-card-pack-arrive { to { opacity:1; transform:none; } }
@keyframes game-card-pack-rip { 0% { opacity:1; transform:none; } 18% { transform:rotate(-2deg) scale(1.03); } 28% { transform:rotate(3deg) scale(1.04); } 42% { transform:rotate(-2deg) scale(1.06); } 68% { opacity:1; filter:brightness(1.8); transform:scale(1.12); } 100% { opacity:0; filter:brightness(2.4); transform:scale(1.38); } }
@keyframes game-card-pack-tear { 0% { width:0; } 100% { width:115%; } }
@keyframes game-card-pack-burst { 0% { opacity:0; transform:translate(-50%,-50%) scale(.1); } 35% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(12); } }
@keyframes game-card-pack-piece { 0% { opacity:0; transform:translate(-50%,-50%) scale(.4); } 18% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--piece-x)),calc(-50% + var(--piece-y))) rotate(var(--piece-r)) scale(1.25); } }
.game-card-reveal-back,.game-card-reveal-front { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 8px; overflow:hidden; border:1px solid #6c79b8; border-radius:15px; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:inset 0 0 0 4px #091122,inset 0 0 0 6px #5969a055,0 10px 26px #0008; }
.game-card-reveal-back { background:radial-gradient(circle at 50% 34%,#7f72ff55 0 5%,transparent 32%),repeating-linear-gradient(135deg,#1a2645 0 7px,#111a33 7px 14px); }
.game-card-reveal-back::before { content:""; position:absolute; inset:-45%; background:conic-gradient(from 0deg,transparent,#75f3ff44,transparent 25%,#a47cff42,transparent 55%); animation:game-card-back-shine 3s linear infinite; }
.game-card-reveal-back::after { content:"?"; position:absolute; width:52px; height:52px; display:grid; place-items:center; border:2px solid #a8b1ff80; border-radius:50%; color:#fff; font:900 29px/1 sans-serif; text-shadow:0 0 14px #9b8cff; box-shadow:0 0 24px #6259ef66,inset 0 0 20px #7768ff45; }
.game-card-reveal-back>* { position:relative; z-index:1; }.game-card-reveal-back>i { margin-bottom:52px; font-size:17px; }.game-card-reveal-back>b { letter-spacing:.13em; font-size:9px; color:#d9dcff; }.game-card-reveal-back>small { font-size:8px; color:#8f9ab4; }
.game-card-reveal-front { transform:rotateY(180deg); justify-content:flex-start; padding-top:9px; background:radial-gradient(circle at 50% 22%,#ffffff1b,transparent 34%),linear-gradient(150deg,#202c43,#0b1322 70%); border-color:#8693aa; }
.game-card-reveal-front::before { content:""; position:absolute; inset:-80% -30%; background:linear-gradient(110deg,transparent 43%,#ffffff2b 49%,transparent 55%); transform:translateX(-45%); animation:game-card-front-shine 2.8s ease-in-out infinite; }
.game-card-reveal-front>* { position:relative; z-index:1; }.game-card-reveal-front>b { align-self:flex-start; padding:2px 7px; border:1px solid currentColor; border-radius:999px; font-size:9px; letter-spacing:.08em; }.game-card-reveal-front>i { font-size:27px; filter:drop-shadow(0 5px 8px #0009); }.game-card-reveal-front>strong { max-width:100%; overflow:hidden; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }.game-card-reveal-front>small { display:-webkit-box; min-height:24px; overflow:hidden; color:#bbc5d7; font-size:8px; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }.game-card-reveal-front>em { margin-top:auto; padding-top:4px; color:#8290aa; font-size:8px; font-style:normal; border-top:1px solid #ffffff14; width:100%; }
.game-card-reveal-card.grade-d .game-card-reveal-front { border-color:#8590a0; }.game-card-reveal-card.grade-c .game-card-reveal-front { border-color:#42c98b; box-shadow:inset 0 0 30px #1db97b23,0 10px 26px #0008; }.game-card-reveal-card.grade-b .game-card-reveal-front { border-color:#4da1ff; box-shadow:inset 0 0 34px #328fff2c,0 10px 28px #167dd73b; }
.game-card-reveal-card.grade-a .game-card-reveal-front { border:2px solid #c877ff; background:radial-gradient(circle at 50% 20%,#cb83ff55,transparent 36%),linear-gradient(150deg,#332150,#100f27 72%); box-shadow:inset 0 0 35px #c064ff4a,0 0 12px #db7dff,0 14px 36px #8439dd91; }.game-card-reveal-card.grade-a .game-card-reveal-front>b { color:#e9b3ff; text-shadow:0 0 9px #d473ff; }
.game-card-reveal-card.grade-s { z-index:3; }.game-card-reveal-card.grade-s .game-card-reveal-front { border:2px solid #ffd75e; background:radial-gradient(circle at 50% 18%,#fff5a082,transparent 32%),conic-gradient(from 200deg at 50% 35%,#6f390f,#171123,#855b0c,#211229,#6f390f); box-shadow:inset 0 0 40px #ffbd3066,0 0 18px #fff2a2,0 0 44px #ffad21c7,0 16px 48px #000c; }.game-card-reveal-card.grade-s .game-card-reveal-front>b { color:#fff0a1; text-shadow:0 0 7px #fff,0 0 16px #ffae00; }.game-card-reveal-card.grade-s .game-card-reveal-front>strong { color:#fff4c3; font-size:15px; text-shadow:0 0 11px #ffbd28; }
.game-card-reveal-card.rare-charging::before,.game-card-reveal-card.rare-charging::after { content:""; position:absolute; left:50%; top:50%; z-index:4; pointer-events:none; }
.game-card-reveal-card.rare-charging::before { width:190%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#f4c0ffbd 0 3%,#b750ff8c 8%,#913cff42 23%,transparent 62%); transform:translate(-50%,-50%) scale(.12); mix-blend-mode:screen; animation:game-card-a-light-charge var(--charge-duration,1200ms) cubic-bezier(.12,.75,.18,1) both; }
.game-card-reveal-card.rare-charging::after { width:220%; aspect-ratio:1; border-radius:50%; background:repeating-conic-gradient(from 0deg,transparent 0 8deg,#d58aff8c 9deg 11deg,transparent 12deg 27deg); -webkit-mask:radial-gradient(circle,transparent 0 19%,#000 34%,transparent 71%); mask:radial-gradient(circle,transparent 0 19%,#000 34%,transparent 71%); transform:translate(-50%,-50%) scale(.28); animation:game-card-a-rays var(--charge-duration,1200ms) ease-out both; }
.game-card-reveal-card.grade-a.rare-charging .game-card-reveal-back { animation:game-card-a-back-charge var(--charge-duration,1200ms) ease-in-out both; }
.game-card-reveal-card.grade-s.rare-charging::before { width:250%; background:radial-gradient(circle,#fff 0 2%,#fff3a7e8 5%,#ffd027a6 12%,#ff9d004f 31%,transparent 66%); animation-name:game-card-s-light-charge; animation-duration:var(--charge-duration,2450ms); }
.game-card-reveal-card.grade-s.rare-charging::after { width:290%; background:repeating-conic-gradient(from 0deg,transparent 0 6deg,#fff8b7db 7deg 9deg,transparent 10deg 20deg,#ffb20a8a 21deg 23deg,transparent 24deg 34deg); animation-name:game-card-s-rays; animation-duration:var(--charge-duration,2450ms); }
.game-card-reveal-card.grade-s.rare-charging .game-card-reveal-back { animation:game-card-s-back-charge var(--charge-duration,2450ms) ease-in-out both; }
.game-card-reveal-card.opening,.game-card-reveal-card.revealed { opacity:1; }.game-card-reveal-card.impact .game-card-reveal-flipper { animation:game-card-impact .75s cubic-bezier(.22,.95,.32,1) both; }.game-card-reveal-card.grade-s.impact .game-card-reveal-flipper { animation:game-card-s-impact 1.5s cubic-bezier(.15,.84,.18,1) both; }
.game-card-screen-effect { position:fixed; inset:0; z-index:2147483646; display:grid; place-items:center; overflow:hidden; pointer-events:none; background:radial-gradient(circle,#b65dff31 0,transparent 48%); animation:game-card-screen-fade 1.5s both; }
.game-card-screen-effect.grade-s { background:radial-gradient(circle,#fff1a659 0,#ffb0001f 30%,transparent 65%); animation:game-card-s-screen 2.6s both; }
.game-card-screen-burst { position:relative; z-index:2; display:grid; justify-items:center; gap:2px; min-width:260px; padding:24px 42px; border:1px solid #d68cff; border-radius:22px; background:#150d2de8; color:#fff; box-shadow:0 0 30px #c95dff,0 0 90px #8b28d988; animation:game-card-burst-in .6s cubic-bezier(.1,.9,.2,1) both; }
.game-card-screen-burst small { color:#e7b6ff; font-size:11px; letter-spacing:.2em; }.game-card-screen-burst strong { font-size:54px; line-height:1; color:#e6a0ff; text-shadow:0 0 12px #fff,0 0 30px #bd4aff; }.game-card-screen-burst b { margin-top:6px; font-size:17px; }
.game-card-screen-effect.grade-s .game-card-screen-burst { min-width:340px; padding:34px 60px; border:2px solid #ffde68; background:linear-gradient(145deg,#351b06f2,#160c05f2); box-shadow:0 0 24px #fff5ae,0 0 70px #ffc21e,0 0 140px #ff890099; animation:game-card-s-burst 1.2s cubic-bezier(.08,.92,.18,1) both; }.game-card-screen-effect.grade-s .game-card-screen-burst small { color:#ffe9a0; }.game-card-screen-effect.grade-s .game-card-screen-burst strong { font-size:82px; color:#fff2a6; text-shadow:0 0 10px #fff,0 0 26px #ffd33b,0 0 55px #ff8a00; }.game-card-screen-effect.grade-s .game-card-screen-burst b { color:#fff3bd; font-size:22px; }
.game-card-screen-effect>i { position:absolute; left:50%; top:50%; width:var(--particle-size); height:calc(var(--particle-size)*2.4); border-radius:999px; background:#e798ff; box-shadow:0 0 8px currentColor; animation:game-card-particle 1.05s cubic-bezier(.1,.7,.28,1) var(--particle-delay) both; }.game-card-screen-effect.grade-s>i { background:#ffe05d; color:#ffc21c; animation-duration:1.65s; }
@keyframes game-card-deal { from { opacity:0; transform:translateY(-22px) scale(.82) rotateY(18deg) } to { opacity:1; transform:none } }
@keyframes game-card-back-shine { to { transform:rotate(360deg) } }
@keyframes game-card-front-shine { 0%,55% { transform:translateX(-55%) } 80%,100% { transform:translateX(55%) } }
@keyframes game-card-a-light-charge { 0% { opacity:0; transform:translate(-50%,-50%) scale(.08) } 28% { opacity:.85 } 58% { opacity:.48; transform:translate(-50%,-50%) scale(.78) } 82% { opacity:1; transform:translate(-50%,-50%) scale(1.14) } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.48) } }
@keyframes game-card-a-rays { 0% { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(0) } 35% { opacity:.72 } 78% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(125deg) } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.34) rotate(180deg) } }
@keyframes game-card-a-back-charge { 0% { filter:brightness(1); box-shadow:inset 0 0 0 4px #091122,inset 0 0 0 6px #5969a055,0 10px 26px #0008 } 48% { filter:brightness(1.55); box-shadow:inset 0 0 28px #d687ff7d,0 0 20px #bf62ff } 76% { filter:brightness(2); box-shadow:inset 0 0 45px #f1c5ffb0,0 0 46px #d272ff } 100% { filter:brightness(1.2); box-shadow:0 0 12px #bc57ff } }
@keyframes game-card-s-light-charge { 0% { opacity:0; transform:translate(-50%,-50%) scale(.06) } 22% { opacity:.75 } 45% { opacity:.38; transform:translate(-50%,-50%) scale(.55) } 67% { opacity:1; transform:translate(-50%,-50%) scale(1.08) } 82% { opacity:.62; transform:translate(-50%,-50%) scale(.78) } 92% { opacity:1; transform:translate(-50%,-50%) scale(1.48) } 100% { opacity:0; transform:translate(-50%,-50%) scale(2.05) } }
@keyframes game-card-s-rays { 0% { opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(0) } 28% { opacity:.52 } 66% { opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(190deg) } 84% { opacity:.68; transform:translate(-50%,-50%) scale(.84) rotate(260deg) } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.62) rotate(360deg) } }
@keyframes game-card-s-back-charge { 0% { filter:brightness(1); box-shadow:inset 0 0 0 4px #091122,inset 0 0 0 6px #5969a055,0 10px 26px #0008 } 34% { filter:brightness(1.5); box-shadow:inset 0 0 35px #ffd44f87,0 0 28px #ffbb1f } 62% { filter:brightness(2.15); box-shadow:inset 0 0 55px #fff1a9d1,0 0 64px #ffbd18 } 78% { filter:brightness(1.35); box-shadow:0 0 25px #ff9d00 } 92% { filter:brightness(2.5); box-shadow:inset 0 0 68px #fff,0 0 85px #ffe75e } 100% { filter:brightness(1.3); box-shadow:0 0 18px #ffc327 } }
@keyframes game-card-impact { 0% { transform:rotateY(180deg) scale(.92) } 45% { transform:rotateY(180deg) scale(1.07) } 100% { transform:rotateY(180deg) } }
@keyframes game-card-s-impact { 0% { transform:rotateY(180deg) scale(.82) } 34% { transform:rotateY(180deg) scale(1.18) rotate(-1deg) } 58% { transform:rotateY(180deg) scale(1.08) rotate(1deg) } 100% { transform:rotateY(180deg) } }
@keyframes game-card-screen-fade { 0% { opacity:0 } 18%,70% { opacity:1 } 100% { opacity:0 } }
@keyframes game-card-s-screen { 0% { opacity:0; backdrop-filter:brightness(1) } 12%,72% { opacity:1; backdrop-filter:brightness(1.3) } 100% { opacity:0; backdrop-filter:brightness(1) } }
@keyframes game-card-burst-in { from { opacity:0; transform:scale(.55) rotate(-4deg) } 55% { transform:scale(1.08) rotate(1deg) } to { opacity:1; transform:none } }
@keyframes game-card-s-burst { 0% { opacity:0; transform:scale(.35) rotateY(90deg) } 55% { opacity:1; transform:scale(1.13) rotateY(-8deg) } 75% { transform:scale(.98) rotateY(3deg) } 100% { transform:none } }
@keyframes game-card-particle { from { opacity:0; transform:translate(-50%,-50%) rotate(var(--particle-angle)) translateX(18px) scale(.4) } 20% { opacity:1 } to { opacity:0; transform:translate(-50%,-50%) rotate(var(--particle-angle)) translateX(var(--particle-distance)) scale(1) } }
.game-card-cores { display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid #ffffff10; border-radius:13px; background:#0d1726; }.game-card-cores>div { display:flex; flex-wrap:wrap; gap:6px; }.game-card-cores span { padding:5px 9px; border:1px solid currentColor; border-radius:999px; font-size:10px; font-weight:900; }
.game-card-list-head small { display:block; margin-top:3px; color:#8794a8; }.game-card-list-head label { display:flex; align-items:center; gap:7px; margin:0; }.game-card-list-head select { width:auto; margin:0; }
.game-card-list { display:grid; grid-template-columns:1fr; gap:11px; }
.game-card-ability-group { display:flex; flex-wrap:wrap; gap:8px; padding:11px; border:1px solid #ffffff12; border-radius:16px; background:linear-gradient(145deg,#101c2e,#091321); box-shadow:inset 0 1px 0 #ffffff08; }.game-card-ability-group>header { display:flex; flex:1 0 100%; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 8px; border-bottom:1px solid #ffffff10; }.game-card-ability-group>header>div { display:flex; align-items:center; gap:8px; }.game-card-ability-group>header i { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; background:#ffffff0b; font-style:normal; font-size:18px; }.game-card-ability-group>header b { font-size:14px; }.game-card-ability-group>header span { padding:4px 8px; border-radius:999px; color:#91a0b7; background:#ffffff08; font-size:9px; }.game-card-ability-group>.game-card { flex:1 1 172px; max-width:calc((100% - 32px)/5); min-width:0; }
.game-card { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:10px; min-height:122px; padding:13px; border:1px solid currentColor; border-radius:15px; color:#aeb9c8; background:linear-gradient(145deg,#142238,#0a1422); box-shadow:inset 0 0 22px #ffffff06; }
.game-card>i { display:grid; width:50px; height:58px; place-items:center; border:1px solid currentColor; border-radius:13px; background:#ffffff0a; font-style:normal; font-size:27px; }.game-card>div:first-of-type { display:grid; min-width:0; gap:4px; }.game-card>div>div { display:flex; justify-content:space-between; gap:8px; }.game-card p { min-height:31px; margin:0; color:#c8d1df; font-size:11px; line-height:1.4; }.game-card small { color:#7f8da2; }.game-card.equipped { box-shadow:0 0 0 2px currentColor,inset 0 0 30px #ffffff0a; }.game-card.undiscovered { opacity:.45; filter:saturate(.4); }
.game-card-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.game-card-actions button { min-height:32px; padding:6px 9px; font-size:10px; }.game-card-policy { color:#79879b; text-align:center; font-size:10px; }.game-card-empty { grid-column:1/-1; padding:40px; color:#7f8da2; text-align:center; }
.grade-d { color:#a8b0bd!important }.grade-c { color:#62d69b!important }.grade-b { color:#5aaeff!important }.grade-a { color:#b88aff!important }.grade-s { color:#ffd15b!important }
.card-room-settings { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 12px; margin:6px 0 0; padding:13px; border:1px solid #7568ff45; border-radius:13px; background:#11192b; }.card-room-settings legend { padding:0 7px; color:#bdb6ff; font-weight:900; }.card-room-settings>small { grid-column:1/-1; color:#78869a; }
#tetris-items button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; border-color:#7368df55; background:linear-gradient(135deg,#29254c,#18203a); }.tetris-card-icon { font-style:normal; font-size:20px; }.tetris-card-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-weight:900; }#tetris-items button.targeting { border-color:#ff5b75; box-shadow:0 0 18px #ff496a55; }
.tetris-opponent.card-target { cursor:crosshair; border-color:#ff5c76!important; box-shadow:0 0 0 2px #ff5c7644,0 0 20px #ff496a44; animation:tetris-card-target 1s infinite alternate; }@keyframes tetris-card-target { to { transform:translateY(-3px) } }
.hub-ranking-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:20px 24px 0; }
.hub-ranking-tabs button { min-height:48px; opacity:.65; }
.hub-ranking-list { min-height:310px; max-height:560px; margin:18px 24px 24px; padding:8px 8px 8px 44px; overflow:auto; border:1px solid #ffffff0d; border-radius:16px; background:#08111e99; }
.hub-ranking-list li { padding:13px 12px; border-bottom:1px solid #ffffff0b; color:#cdd7e8; }
.friends-dialog[open] { display:grid; width:min(980px,calc(100vw - 28px)); height:min(760px,calc(100dvh - 28px)); grid-template-rows:auto minmax(0,1fr); }
.friend-center { display:grid; min-height:0; grid-template-columns:320px minmax(0,1fr); overflow:hidden; }
.friend-sidebar { min-width:0; padding:18px; overflow:auto; border-right:1px solid #ffffff10; background:#091321aa; }
.friend-sidebar .friend-add-form { position:sticky; z-index:2; top:0; padding-bottom:10px; background:#091321; }
.friend-requests,.friend-outgoing { display:grid; gap:7px; margin:8px 0 16px; }
.friend-invitations { display:grid; gap:7px; margin:6px 0 14px; }
.friend-invite-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px; border:1px solid #8a76ff55; border-radius:12px; background:linear-gradient(135deg,#342c7055,#152036); }
.friend-invite-card div { display:grid; gap:2px; min-width:0; }
.friend-invite-card b { color:#eeeaff; font-size:12px; }
.friend-invite-card small { overflow:hidden; color:#938cac; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.friend-invite-card button { min-height:32px; padding:5px 8px; font-size:10px; }
.friend-request-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; padding:10px; border:1px solid #5bce9b33; border-radius:12px; background:#15302755; }
.friend-request-card div { display:grid; gap:2px; }
.friend-request-card small,.friend-outgoing small { color:#8190a5; font-size:10px; }
.friend-request-actions { display:flex; gap:4px; }
.friend-request-actions button { min-height:30px; padding:4px 7px; font-size:10px; }
.friend-list-head { display:flex; justify-content:space-between; margin:12px 2px 7px; color:#dfe7f4; font-size:12px; }
.friend-list-head small { color:#758399; }
.friend-list article { cursor:pointer; transition:.15s; }
.friend-list { overflow-x:hidden; }
.friend-list article:hover,.friend-list article.active { border-color:#776bff66; background:#17233a; transform:translateX(2px); }
.friend-list .unread-badge { min-width:20px; padding:3px 6px; border-radius:99px; color:white; background:#ff5266; font-size:9px; text-align:center; }
.admin-chat-section { margin:10px 0 15px; padding:10px; border:1px solid #51d9cd45; border-radius:14px; background:linear-gradient(145deg,#10333766,#17213b66); }
.admin-chat-section .friend-list-head { margin-top:0; color:#8ef3df; }
.admin-chat-list { display:grid; gap:6px; }
.admin-chat-list article.managed-contact { border-color:#58d8cb3d; background:#10252e; }
.admin-chat-list article.managed-contact:hover,.admin-chat-list article.managed-contact.active { border-color:#67ead6a3; background:#15313b; box-shadow:0 0 18px #4fe0cf20; }
.friend-outgoing { padding-top:12px; border-top:1px solid #ffffff0c; color:#9aa7ba; font-size:11px; }
.friend-chat-panel { min-width:0; min-height:0; overflow:hidden; background:radial-gradient(circle at 70% 10%,#493f9b22,transparent 42%),#0a1422; }
.friend-chat-empty { display:grid; height:100%; place-items:center; align-content:center; gap:8px; color:#8390a4; text-align:center; }
.friend-chat-empty span { font-size:46px; filter:grayscale(.2); }
.friend-chat-empty b { color:#cbd5e5; }
.friend-chat-empty small { font-size:11px; }
#friend-chat-active { display:grid; height:100%; min-height:0; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; }
#friend-chat-active > header { display:flex; align-items:center; justify-content:flex-start; gap:10px; min-height:70px; margin:0; padding:15px 18px; border-bottom:1px solid #ffffff10; background:#101c2d99; }
#friend-chat-active > header > div:nth-child(2) { display:grid; gap:2px; }
.follow-room-button { margin-left:auto; min-height:36px; padding:7px 11px; border-color:#6fdaaa66; color:#dffff1; background:#18382f; font-size:11px; }
.invite-room-button { margin-left:auto; border-color:#8d7cff77; color:#eeeaff; background:#292258; }
.invite-room-button:not([hidden]) ~ .follow-room-button { margin-left:0; }
#friend-chat-status { color:#8290a4; font-size:10px; }
.friend-chat-messages { display:flex; min-height:0; flex-direction:column; gap:7px; padding:18px; overflow:auto; }
.friend-chat-bubble { align-self:flex-start; max-width:min(78%,460px); padding:9px 11px; border-radius:5px 14px 14px 14px; color:#dce4f1; background:#1b293d; box-shadow:0 5px 16px #0003; }
.friend-chat-bubble.own { align-self:flex-end; border-radius:14px 5px 14px 14px; background:linear-gradient(135deg,#6657df,#4a43b7); }
.friend-chat-bubble small { display:block; margin-top:4px; color:#aab5c7; font-size:8px; text-align:right; }
.friend-chat-bubble.support-inquiry { border:1px solid #45dbc477; background:linear-gradient(145deg,#123d3a,#1a3040); }
.friend-chat-bubble.support-inquiry.own { border-color:#ab9aff77; background:linear-gradient(145deg,#5c50ca,#3c438d); }
.friend-chat-kind { display:block; margin-bottom:5px; color:#78f0d8; font-size:9px; letter-spacing:.08em; }
.friend-chat-bubble.own .friend-chat-kind { color:#e5e0ff; }
.friend-chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:13px 16px; border-top:1px solid #ffffff10; background:#0c1726; }
.friend-chat-form input { margin:0; }
.friend-chat-locked { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px 16px; border-top:1px solid #4ed9c83d; color:#dffff8; background:linear-gradient(90deg,#102b2c,#151b29); }
.friend-chat-locked[hidden] { display:none; }
.friend-chat-locked>span { font-size:21px; }
.friend-chat-locked>div { display:grid; gap:2px; }
.friend-chat-locked b { color:#dffff8; font-size:11px; }
.friend-chat-locked small { color:#85a9aa; font-size:9px; }
.friend-chat-locked button { min-height:34px; padding:6px 10px; border-color:#4bd7c26e; color:#eafffb; background:#17413e; font-size:10px; }
.room-friend-button { display:flex; align-items:center; gap:10px; width:100%; margin-top:10px; padding:10px 12px; border-color:#776bff55; text-align:left; background:linear-gradient(135deg,#242151,#151d34); box-shadow:0 8px 20px #070b1870; }
.room-friend-button > span:first-child { font-size:23px; }
.room-friend-button > span:last-child { display:grid; gap:1px; }
.room-friend-button b { font-size:12px; }
.room-friend-button small { color:#8f99ad; font-size:9px; }
.room-my-room-button { border-color:#4ccbd46b; background:linear-gradient(135deg,#123f4b,#24204b); }
.room-my-room-button:hover { border-color:#70e8e9a3; box-shadow:0 10px 24px #07171999,0 0 0 1px #6ce7e633 inset; }
.lobby-marketplace-button { position:relative; display:grid; width:100%; min-height:58px; margin:0 0 10px; padding:9px 12px; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; border-color:#45d9ba66; color:#e9fffa; background:radial-gradient(circle at 8% 20%,#38e4c02e,transparent 38%),linear-gradient(135deg,#11332f,#14223a 68%,#25204b); box-shadow:0 9px 24px #02071266,inset 0 1px #ffffff0b; text-align:left; }
.lobby-marketplace-button.has-card-market-alert { border-color:#ff506eaa; box-shadow:0 11px 28px #02071288,0 0 22px #ff355a30,inset 0 0 0 1px #ff476531; }
.lobby-marketplace-button.has-card-market-alert::after { position:absolute; z-index:2; top:7px; right:7px; width:11px; height:11px; border:2px solid #18223b; border-radius:50%; background:#ff3f60; box-shadow:0 0 0 3px #ff3f6028,0 0 13px #ff3f60; content:""; animation:lobby-market-alert-pulse 1.4s ease-in-out infinite; }
.lobby-marketplace-button:hover { border-color:#60ebcba8; box-shadow:0 11px 28px #02071288,0 0 22px #38dbba25; }
.lobby-marketplace-button>span:first-child { display:grid; width:38px; height:38px; place-items:center; border:1px solid #65e3c358; border-radius:11px; background:#1f5b5155; font-size:21px; }
.lobby-marketplace-button>span:nth-child(2) { display:grid; margin:0; gap:1px; }
.lobby-marketplace-button b { color:#f1fffc; font-size:13px; }
.lobby-marketplace-button small { color:#83a9aa; font-size:9px; }
.lobby-marketplace-button em { padding:5px 7px; border:1px solid #786dca55; border-radius:999px; color:#b9afe9; background:#29234a99; font-size:8px; font-style:normal; white-space:nowrap; }
@keyframes lobby-market-alert-pulse { 0%,100% { opacity:.58; transform:scale(.88); } 50% { opacity:1; transform:scale(1.12); } }
.room-invite-popup { position:fixed; z-index:1200; top:22px; right:22px; display:grid; width:min(390px,calc(100vw - 28px)); gap:14px; padding:19px; overflow:hidden; border:1px solid #9e8cff99; border-radius:20px; color:#eff4ff; background:linear-gradient(145deg,#172746f5,#171633f7 58%,#2b1c4bf5); box-shadow:0 24px 80px #000c,0 0 32px #7f6dff45; animation:room-invite-enter .32s cubic-bezier(.2,.9,.25,1.15) both; }
.room-invite-popup[hidden] { display:none; }
.room-invite-popup-glow { position:absolute; inset:-80% 35% 35% -35%; border-radius:50%; background:#7362ff33; filter:blur(28px); pointer-events:none; }
.room-invite-popup header { position:relative; display:flex; align-items:center; gap:11px; }
.room-invite-popup header>span { display:grid; width:47px; height:47px; place-items:center; border:1px solid #a99cff66; border-radius:15px; background:#6d5de733; font-size:24px; box-shadow:inset 0 0 18px #b6aaff22; }
.room-invite-popup header>div { display:grid; gap:2px; }
.room-invite-popup header small { color:#a99dff; font-size:9px; font-weight:900; letter-spacing:.16em; }
.room-invite-popup header strong { font-size:17px; }
.room-invite-popup>p { position:relative; margin:0; padding:11px 12px; border:1px solid #ffffff12; border-radius:12px; color:#cbd6ec; background:#08142199; font-size:12px; line-height:1.5; }
.room-invite-countdown { position:relative; height:31px; overflow:hidden; border:1px solid #ffffff12; border-radius:999px; background:#070f1d; }
.room-invite-countdown>i { position:absolute; inset:0 auto 0 0; width:100%; background:linear-gradient(90deg,#5bdbcd,#8d72ff); transition:width .25s linear; opacity:.48; }
.room-invite-countdown>span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3px; color:#f4f6ff; font-size:10px; font-weight:800; }
.room-invite-countdown b { color:#fff39a; font-size:13px; }
.room-invite-actions { position:relative; display:grid; grid-template-columns:.75fr 1.25fr; gap:8px; }
.room-invite-actions button { min-height:42px; }
.friend-request-popup { right:auto; left:22px; border-color:#63e5b899; background:linear-gradient(145deg,#102c30f5,#102038f7 58%,#183944f5); box-shadow:0 24px 80px #000c,0 0 32px #46d9b64a; }
.friend-request-popup .room-invite-popup-glow { background:#36d2a63b; }
.friend-request-popup header>span { border-color:#74eac477; background:#35cfa52b; box-shadow:inset 0 0 18px #8affdc22; }
.friend-request-popup header small { color:#75e9c6; }
.friend-request-popup .room-invite-countdown>i { background:linear-gradient(90deg,#21c99b,#69e6c2); }
.friend-remove-dialog { width:min(390px,calc(100vw - 28px)); min-width:0; padding:19px; overflow:hidden; border:1px solid #55d7b799; border-radius:20px; color:#effffb; background:linear-gradient(145deg,#123638f8,#102536fa 58%,#173348f8); box-shadow:0 24px 80px #000d,0 0 34px #35d1aa42; }
.friend-remove-dialog::backdrop { background:#020914b8; backdrop-filter:blur(5px); }
.friend-remove-dialog[open] { display:grid; gap:15px; animation:room-invite-enter .25s cubic-bezier(.2,.9,.25,1.12) both; }
.friend-remove-dialog .friend-remove-glow { position:absolute; inset:-70% 34% 45% -35%; border-radius:50%; background:#35d2aa32; filter:blur(28px); pointer-events:none; }
.friend-remove-dialog header { position:relative; display:flex; align-items:center; gap:11px; }
.friend-remove-dialog header>span { display:grid; width:47px; height:47px; place-items:center; border:1px solid #74eac477; border-radius:15px; background:#35cfa52b; font-size:24px; }
.friend-remove-dialog header>div { display:grid; gap:3px; }
.friend-remove-dialog header small { color:#75e9c6; font-size:9px; font-weight:900; letter-spacing:.14em; }
.friend-remove-dialog header strong { font-size:16px; }.friend-remove-dialog header strong b { color:#fff; }
.friend-remove-dialog>p { position:relative; margin:0; padding:12px; border:1px solid #ffffff12; border-radius:12px; color:#cbdedb; background:#081722b8; font-size:12px; line-height:1.55; }
.friend-remove-actions { position:relative; display:grid; grid-template-columns:1fr 1.3fr; gap:8px; }
.friend-remove-actions button { min-height:42px; }.friend-remove-actions .danger { border-color:#ff66757a; color:#fff; background:linear-gradient(135deg,#8e2032,#551323); }
.friend-alias-dialog form { display:grid; gap:15px; }
.friend-alias-dialog label { position:relative; display:grid; gap:7px; color:#a8c8c0; font-size:11px; font-weight:800; }
.friend-alias-dialog input { width:100%; min-height:43px; }
.friend-alias-dialog .error { min-height:15px; margin:0; }
.room-friend-invite-dialog { width:min(500px,calc(100vw - 28px)); min-width:0; padding:19px; overflow:hidden; border:1px solid #7368f199; border-radius:20px; color:#f4f6ff; background:linear-gradient(145deg,#172b42fa,#111b35fa 58%,#281d48fa); box-shadow:0 24px 80px #000d,0 0 36px #6959f24a; }
.room-friend-invite-dialog::backdrop { background:#020914b8; backdrop-filter:blur(5px); }
.room-friend-invite-dialog[open] { display:grid; gap:14px; animation:room-invite-enter .25s cubic-bezier(.2,.9,.25,1.12) both; }
.room-friend-invite-glow { position:absolute; inset:-70% 35% 48% -35%; border-radius:50%; background:#6e61ef35; filter:blur(30px); pointer-events:none; }
.room-friend-invite-dialog>header { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; }
.room-friend-invite-dialog>header>span { display:grid; width:47px; height:47px; place-items:center; border:1px solid #958af277; border-radius:15px; background:#7768ed2c; font-size:24px; }
.room-friend-invite-dialog>header>div { display:grid; gap:3px; }.room-friend-invite-dialog>header small { color:#9f95ff; font-size:9px; font-weight:900; letter-spacing:.14em; }.room-friend-invite-dialog>header strong { font-size:17px; }
.room-friend-invite-dialog>p { position:relative; margin:0; padding:11px 12px; border:1px solid #ffffff12; border-radius:12px; color:#cbd4e8; background:#081421a8; font-size:12px; line-height:1.5; }
.room-friend-invite-list { position:relative; display:grid; max-height:min(430px,52vh); gap:7px; overflow:auto; }
.room-friend-invite-list article { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 11px; border:1px solid #ffffff12; border-radius:13px; background:#0b1627d9; }
.room-friend-invite-list article>div { display:grid; min-width:0; gap:2px; }.room-friend-invite-list article b { overflow:hidden; color:#f2f6ff; text-overflow:ellipsis; white-space:nowrap; }.room-friend-invite-list article small { color:#7f8ca3; font-size:10px; }.room-friend-invite-list article small.online { color:#5de4bd; }
.room-friend-invite-list article button { min-width:86px; padding:8px 10px; }.room-friend-invite-list article button:disabled { opacity:.5; }
.admin-settings-button{color:#ffe69a;border-color:#d9b747;background:linear-gradient(135deg,#5c4514,#292039);box-shadow:0 0 14px #e7ba3a35}.settings-tetris-touch{display:grid;margin-top:12px;padding:13px 14px;grid-template-columns:minmax(0,1fr) minmax(210px,.9fr);align-items:center;gap:12px;border:1px solid #314762;border-radius:13px;background:linear-gradient(145deg,#101d31,#0a1625)}.settings-tetris-touch>div{display:grid;gap:3px}.settings-tetris-touch b{color:#eaf4ff;font-size:13px}.settings-tetris-touch small{color:#8091a8;font-size:9px;line-height:1.45}.settings-tetris-touch select{width:100%;margin:0}.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-actions button{min-height:42px}.settings-actions button small{margin-left:5px;color:#77e3c0}.admin-dialog{width:min(1060px,calc(100vw - 26px))}.admin-tabs{display:flex;padding:14px 22px 0;gap:7px;overflow-x:auto}.admin-tabs button{min-width:128px}.admin-tabs button.active{color:white;border-color:#7c70ef;background:#574be0}.admin-panel{padding:18px 22px 24px}.admin-user-tools{display:flex;margin-bottom:12px;align-items:center;gap:10px}.admin-user-tools input{margin:0;flex:1}.admin-user-tools span{color:#8d9db1;font-size:11px}.admin-user-list{display:grid;max-height:540px;gap:8px;overflow:auto}.admin-user-row{display:grid;padding:12px 14px;grid-template-columns:minmax(190px,1fr) minmax(430px,1.55fr);align-items:center;gap:12px;border:1px solid #ffffff12;border-radius:13px;background:#0b1524}.admin-user-row>div:first-child{display:grid;gap:3px}.admin-user-row b{color:#edf5ff}.admin-user-row small{color:#8191a7}.admin-user-row strong{color:#6de9c0;font-size:13px}.admin-user-actions{display:grid;grid-template-columns:minmax(110px,1fr) auto auto auto;gap:6px}.admin-user-actions input{min-width:0;margin:0}.admin-user-actions button{padding:7px 9px;font-size:10px}.admin-reset-password{grid-column:3}.admin-delete-user{grid-column:4}.admin-patch-list{margin-top:12px;padding:18px;border:1px solid #ffffff10;border-radius:12px;color:#9cadbe;background:#0b1524}.admin-patch-list p{margin:0;line-height:1.6}
.admin-announcement-panel>div{width:min(720px,100%);margin:8px auto;padding:24px;border:1px solid #41d5cf55;border-radius:18px;background:radial-gradient(circle at 100% 0,#1b76754a,transparent 35%),linear-gradient(155deg,#10243a,#0a1523);box-shadow:0 22px 52px #0007}.admin-announcement-panel h3{margin:5px 0 7px;color:#f4ffff;font-size:24px}.admin-announcement-panel p:not(.eyebrow){margin:0 0 16px;color:#9fb4c8;line-height:1.55}.admin-announcement-panel textarea{width:100%;margin:0;resize:vertical;color:#ecffff;border-color:#3e7f87;background:#071522;line-height:1.55}.admin-announcement-panel footer{display:flex;margin-top:12px;align-items:center;justify-content:flex-end;gap:12px}.admin-announcement-panel footer span{margin-right:auto;color:#7fded7;font-size:11px}.admin-confirm-dialog{width:min(470px,calc(100vw - 28px));padding:27px;border-color:#6f7b9a;border-radius:20px;background:radial-gradient(circle at 100% 0,#445b8b42,transparent 38%),linear-gradient(155deg,#17243a,#0b1422);box-shadow:0 30px 90px #000d}.admin-confirm-dialog h2{margin:5px 0 10px;color:#fff}.admin-confirm-dialog>p:not(.eyebrow){color:#aebdd0;line-height:1.6}.admin-confirm-dialog .admin-confirm-warning{margin:16px 0;padding:13px;border:1px solid #e7b84c52;border-radius:11px;color:#ffe9a3;background:#523b152e;font-size:11px;line-height:1.55}.admin-confirm-dialog.danger-zone{border-color:#da526b75;background:radial-gradient(circle at 100% 0,#8f213b42,transparent 38%),linear-gradient(155deg,#25182a,#0d1421)}.admin-confirm-dialog label{display:grid;margin:10px 0;gap:6px;color:#9fb0c6;font-size:11px}.admin-confirm-dialog code{padding:12px;border:1px solid #506783;border-radius:10px;color:#dffff8;background:#07131f;font-size:14px;letter-spacing:.06em;word-break:break-all}.admin-confirm-dialog menu{display:flex;margin:18px 0 0;padding:0;justify-content:flex-end;gap:8px}
.support-inquiry-dialog { width:min(620px,calc(100vw - 28px)); padding:0; overflow:hidden; border-color:#49d9c168; border-radius:22px; background:radial-gradient(circle at 100% 0,#1d716754,transparent 38%),linear-gradient(150deg,#14253a,#0b1522); }
.support-inquiry-dialog form { display:grid; gap:0; }
.support-inquiry-head { display:grid; min-height:96px; margin:0; padding:22px 24px 18px; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:14px; border-bottom:1px solid #ffffff10; background:linear-gradient(90deg,#48d7c31a,transparent); }
.support-inquiry-head>span { display:grid; width:52px; height:52px; margin:0; place-items:center; border:1px solid #63e5d077; border-radius:16px; color:white; background:#1b514c80; box-shadow:inset 0 0 18px #71f0de1f,0 8px 24px #0005; font-size:25px; }
.support-inquiry-head>div { display:grid; gap:3px; }
.support-inquiry-head .eyebrow { margin:0; color:#8cf0df; font-size:9px; letter-spacing:.16em; }
.support-inquiry-head h2 { margin:0; color:#f5ffff; font-size:24px; }
.support-inquiry-head .dialog-close { align-self:start; }
.support-inquiry-guide { margin:20px 24px 2px; padding:12px 14px; border:1px solid #4b6c7842; border-radius:12px; color:#aabbd0; background:#07152277; font-size:11px; line-height:1.65; }
.support-inquiry-field { display:grid!important; width:auto; margin:18px 24px 0!important; gap:8px; color:#dce7f4; }
.support-inquiry-field>span { margin:0; color:#dce7f4; font-size:12px; font-weight:900; }
.support-inquiry-dialog textarea { display:block; width:100%; min-height:180px; margin:0; padding:14px; resize:vertical; border:1px solid #39536b; border-radius:13px; color:#efffff; background:#071320; font:inherit; font-size:13px; line-height:1.6; box-shadow:inset 0 1px 8px #0005; }
.support-inquiry-dialog textarea:focus { border-color:#58ddc9; outline:none; box-shadow:0 0 0 3px #4ddcc425; }
.support-inquiry-meta { display:flex; margin:7px 25px 0; justify-content:flex-end; color:#71dcc9; font-size:10px; font-variant-numeric:tabular-nums; }
.support-inquiry-dialog .error { min-height:18px; margin:3px 24px 0; }
.support-inquiry-dialog menu { margin:0; padding:8px 24px 24px; }
.support-inquiry-dialog menu button { min-width:104px; min-height:42px; }
@media (max-width:560px) { .support-inquiry-head { padding:17px; grid-template-columns:44px minmax(0,1fr) auto; }.support-inquiry-head>span { width:44px; height:44px; font-size:21px; }.support-inquiry-head h2 { font-size:20px; }.support-inquiry-guide { margin:15px 17px 0; }.support-inquiry-field { margin:15px 17px 0!important; }.support-inquiry-meta { margin-inline:18px; }.support-inquiry-dialog menu { padding:6px 17px 18px; } }
.admin-nameplate { display:inline-flex; margin-left:6px; padding:2px 6px 2px 5px; align-items:center; gap:3px; border:1px solid #ffd86f9c; border-radius:999px; color:#fff1b4; background:linear-gradient(135deg,#7e1828,#3a162d 60%,#1c2947); box-shadow:0 0 10px #ffca4845,inset 0 0 8px #ffd75f1f; font-size:8px; font-style:normal; font-weight:1000; letter-spacing:.08em; line-height:1.2; text-shadow:0 1px 2px #000; vertical-align:middle; white-space:nowrap; }
.admin-nameplate::before { content:"🛡"; font-size:9px; letter-spacing:0; }.admin-player:not(.ace-player) { border-color:#e7ba5470 !important; box-shadow:inset 0 0 22px #b21f3a16,0 0 18px #e7ba3420; }
@keyframes room-invite-enter { from{opacity:0;transform:translateY(-16px) scale(.95)} to{opacity:1;transform:none} }
@media(max-width:600px){.room-invite-popup{top:12px;right:14px;left:14px;width:auto}.friend-request-popup{top:auto;bottom:12px}}
.empty-state { margin:20px 0; color:#7f8da2; text-align:center; font-size:11px; }
@media (max-width:700px) {
  .lobby-shortcuts { gap:6px; }
  .lobby-shortcuts button { min-height:78px; }
  .lobby-shortcuts small { display:none; }
  .hub-dialog { width:calc(100vw - 14px); max-height:calc(100dvh - 14px); }
  .hub-dialog-head { padding:18px; }
  .friend-center { grid-template-columns:1fr; height:min(690px,76dvh); }
  .friend-sidebar { max-height:280px; border-right:0; border-bottom:1px solid #ffffff10; }
  .friend-chat-panel { min-height:320px; }
  .hub-ranking-tabs { grid-template-columns:1fr 1fr; padding:14px 14px 0; }
  .hub-ranking-list { margin:14px; }
  .hub-shop-items { grid-template-columns:1fr; padding:14px; }
  .settings-tetris-touch{grid-template-columns:1fr}.settings-actions{grid-template-columns:1fr}.admin-panel{padding:12px}.admin-user-row{grid-template-columns:1fr}.admin-user-actions{grid-template-columns:1fr 1fr}.admin-user-actions input{grid-column:1/-1}.admin-reset-password,.admin-delete-user{grid-column:auto}.admin-tabs{padding:10px 12px 0}.admin-tabs button{min-width:105px;flex:1}
}
.room-actions { display:flex; align-items:center; gap:7px; }
.lobby-title-actions { display:flex; align-items:center; gap:7px; }
.pause-tetris-settings { display:grid; gap:8px; padding:11px; border:1px solid #4d6484; border-radius:13px; background:#081522b8; }
.pause-tetris-settings[hidden] { display:none!important; }
.pause-tetris-settings label { display:grid; gap:6px; color:#aebdd0; font-size:10px; font-weight:900; }
.pause-tetris-settings select { width:100%; margin:0; }
.pause-tetris-settings button { min-height:42px!important; }
.keybind-guide { max-width:520px; color:#687386; font-size:13px; }
.keybind-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; min-width:500px; }
.keybind-grid label { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:8px; margin:0; }
.keybind-grid label span { font-size:13px; font-weight:700; }
.keybind-grid input { margin:0; cursor:pointer; text-align:center; background:#f7f9fc; }
.keybind-grid input:focus { border-color:#594be8; outline:3px solid #594be822; background:white; }
#lobby-chat { height:190px; }

/* 관리자 방 프리셋 */
.admin-tabs:has([data-admin-tab="wordchain"].active)~#admin-users-panel,.admin-tabs:has([data-admin-tab="wordchain"].active)~#admin-announcements-panel,.admin-tabs:has([data-admin-tab="wordchain"].active)~#admin-patches-panel,.admin-tabs:has([data-admin-tab="wordchain"].active)~#admin-rooms-panel{display:none!important}.admin-tabs:has([data-admin-tab="wordchain"].active)~#admin-wordchain-panel{display:block!important}
.admin-room-policy{padding:14px 18px 20px}.admin-room-policy-layout{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:570px;border:1px solid #263952;border-radius:17px;overflow:hidden;background:#081321}.admin-room-game-list{display:flex;padding:12px;flex-direction:column;gap:7px;border-right:1px solid #263952;background:linear-gradient(180deg,#0f2035,#091522)}.admin-room-game-list button{display:grid;padding:11px 12px;grid-template-columns:30px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;border-color:transparent;background:#101d2e}.admin-room-game-list button span{grid-row:1/3;font-size:20px}.admin-room-game-list button b{font-size:12px}.admin-room-game-list button small{color:#71829a;font-size:9px}.admin-room-game-list button.active{border-color:#45e5db;color:#fff;background:linear-gradient(135deg,#126c73,#214177);box-shadow:0 0 18px #35dbd334}.admin-room-game-list button.disabled-game{opacity:.58}.admin-room-policy-editor{display:flex;min-width:0;flex-direction:column}.admin-room-policy-editor>header{display:flex;padding:20px 22px;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #20324a;background:#0d1a2b}.admin-room-policy-editor h3{margin:3px 0 4px;font-size:19px}.admin-room-policy-editor header small{color:#8192aa}.admin-game-enabled{display:flex;padding:10px 13px;align-items:center;gap:8px;border:1px solid #36cba071;border-radius:11px;color:#bff9e8;background:#12302d;white-space:nowrap}.admin-room-setting-list{display:grid;padding:16px 20px;gap:8px;overflow:auto;max-height:465px}.admin-room-setting-row{display:grid;padding:11px 13px;grid-template-columns:minmax(170px,1fr) minmax(170px,.8fr) 145px;align-items:center;gap:12px;border:1px solid #21344b;border-radius:12px;background:#0d1928}.admin-room-setting-row>div{display:grid;gap:3px}.admin-room-setting-row>div small{color:#73859e;font-size:9px}.admin-room-default{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px}.admin-room-default>span{color:#7f90a7;font-size:9px}.admin-room-default input,.admin-room-default select{width:100%;min-width:0;margin:0;padding:8px 9px}.admin-room-default input[type=checkbox]{width:18px}.admin-room-visible{margin:0!important;padding:8px 10px!important;border-radius:9px;background:#101f31}.admin-room-visible span{font-size:10px}.admin-room-setting-row.dependency-locked{opacity:.43}.admin-room-policy-editor>footer{display:flex;margin-top:auto;padding:13px 20px;align-items:center;justify-content:flex-end;gap:12px;border-top:1px solid #20324a}.admin-room-policy-editor>footer span{margin-right:auto;color:#77d9c0;font-size:10px}.policy-setting-grid{grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px}.policy-setting-row,.policy-toggle-setting{position:relative;padding:11px 12px!important;border:1px solid #253b56;border-radius:12px;background:#0d1a2a}.policy-setting-row>span{display:block;margin-bottom:6px;color:#9badc2;font-size:10px}.policy-setting-row input,.policy-setting-row select{width:100%;margin:0}.policy-toggle-setting{align-content:center;min-height:51px}.policy-toggle-setting small{display:block;grid-column:1/-1;margin-top:4px;color:#6e8199}.policy-item-note{grid-column:1/-1;margin:0!important}.room-policy-empty{display:grid;margin:8px 0;padding:22px;text-align:center;border:1px dashed #38516f;border-radius:14px;color:#dbe9f8;background:#0b1725}.room-policy-empty small{margin-top:5px;color:#8294aa}
.admin-wordchain-panel{padding:14px 18px 20px}.admin-wordchain-layout{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:570px;border:1px solid #2d3d5b;border-radius:18px;overflow:hidden;background:#071321}.admin-wordchain-nav{display:flex;padding:18px 14px;flex-direction:column;gap:8px;border-right:1px solid #2d3d5b;background:radial-gradient(circle at 20% 0,#694cbe33,transparent 35%),linear-gradient(180deg,#111d34,#091522)}.admin-wordchain-nav h3{margin:2px 0 0;color:#f2efff;font-size:20px}.admin-wordchain-nav>p:not(.eyebrow){margin:0 0 12px;color:#8393aa;font-size:10px;line-height:1.55}.admin-wordchain-nav button{display:grid;padding:12px;grid-template-columns:32px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;border-color:#ffffff0e;background:#101c2e}.admin-wordchain-nav button>span{grid-row:1/3;font-size:20px}.admin-wordchain-nav button b{font-size:12px}.admin-wordchain-nav button small{color:#74859c;font-size:9px}.admin-wordchain-nav button.active{border-color:#8e7dff;color:#fff;background:linear-gradient(135deg,#493b9e,#214874);box-shadow:0 0 18px #7765f43d}.admin-wordchain-nav button.active small{color:#d8d1ff}.admin-wordchain-content{min-width:0;background:linear-gradient(160deg,#0c1829,#07111e)}.admin-wordchain-content>section{height:100%}.admin-wordchain-content>section[hidden]{display:none!important}#admin-wordchain-review{display:flex;min-height:570px;flex-direction:column}#admin-wordchain-review>header{display:flex;padding:19px 21px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #23344d;background:#0d1a2b}#admin-wordchain-review h3,#admin-wordchain-register h3{margin:3px 0 4px;color:#f1f5ff;font-size:19px}#admin-wordchain-review header small{color:#8091a9}.admin-wordchain-stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.admin-wordchain-stats span{padding:6px 9px;border:1px solid #5d63a863;border-radius:999px;color:#c7c8ff;background:#27274e80;font-size:9px;font-weight:900}.admin-wordchain-tools{display:grid;padding:12px 18px;grid-template-columns:150px minmax(180px,1fr) auto;gap:8px;border-bottom:1px solid #203148}.admin-wordchain-tools select,.admin-wordchain-tools input{width:100%;margin:0}.admin-wordchain-suggestions{display:grid;max-height:420px;padding:13px 18px 18px;align-content:start;gap:8px;overflow:auto}.admin-wordchain-suggestion{display:grid;padding:12px 13px;gap:8px;border:1px solid #293c56;border-radius:13px;background:linear-gradient(145deg,#111f31,#0b1726)}.admin-wordchain-suggestion.status-approved{border-color:#2fab795a;background:linear-gradient(145deg,#102b2a,#0b1924)}.admin-wordchain-suggestion.status-rejected{opacity:.76;border-color:#8c46535c;background:linear-gradient(145deg,#2a1823,#101621)}.admin-wordchain-suggestion>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.admin-wordchain-suggestion>header>div{display:flex;min-width:0;align-items:center;gap:8px}.admin-wordchain-suggestion>header b{color:#f4f6ff;font-size:17px;letter-spacing:.04em}.admin-wordchain-suggestion>header>div:last-child{justify-content:flex-end;flex-wrap:wrap}.admin-wordchain-suggestion>header strong{color:#8ce8cf;font-size:10px}.admin-wordchain-suggestion>header small{color:#6f8199;font-size:9px}.admin-wordchain-status-chip{padding:4px 7px;border:1px solid #d9b84d66;border-radius:999px;color:#ffe694;background:#4c3b163d;font-size:8px;font-weight:900}.status-approved .admin-wordchain-status-chip{border-color:#51daa478;color:#a9f3d2;background:#163c2f}.status-rejected .admin-wordchain-status-chip{border-color:#de68786b;color:#ffacb8;background:#48202a}.admin-wordchain-suggestion>p{margin:0;color:#8495ab;font-size:10px;line-height:1.5}.admin-wordchain-review-actions{display:grid;grid-template-columns:minmax(160px,1fr) auto auto;gap:7px}.admin-wordchain-review-actions input{min-width:0;margin:0}.admin-wordchain-review-actions button{min-width:66px}.admin-wordchain-empty{display:grid;margin:30px auto;padding:28px;place-items:center;gap:6px;color:#d9e5f4;text-align:center}.admin-wordchain-empty span{display:grid;width:48px;height:48px;place-items:center;border:1px solid #4bd4ae65;border-radius:50%;color:#73e6c2;background:#163d35;font-size:22px}.admin-wordchain-empty small{color:#74869d}.admin-wordchain-content #admin-wordchain-register{display:grid;padding:20px;grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);align-content:start;gap:14px}.admin-wordchain-register-card,.admin-wordchain-recent{padding:20px;border:1px solid #303f5e;border-radius:16px;background:radial-gradient(circle at 100% 0,#6247bd2e,transparent 35%),linear-gradient(150deg,#111e32,#0a1625);box-shadow:0 18px 38px #0004}.admin-wordchain-register-card>p:not(.eyebrow){margin:7px 0 18px;color:#8fa0b8;font-size:11px;line-height:1.6}.admin-wordchain-register-card form{display:grid;gap:12px}.admin-wordchain-register-card label{display:grid;gap:6px;color:#aebbd0;font-size:10px}.admin-wordchain-register-card label small{color:#6f8097}.admin-wordchain-register-card input,.admin-wordchain-register-card textarea{width:100%;margin:0}.admin-wordchain-register-card textarea{resize:vertical}.admin-wordchain-register-card footer{display:flex;min-height:38px;align-items:center;justify-content:flex-end;gap:10px}.admin-wordchain-register-card footer span{margin-right:auto;color:#7edcc1;font-size:9px}.admin-wordchain-recent>div:first-child{margin-bottom:12px}.admin-wordchain-recent-list,#admin-wordchain-recent-list{display:grid;max-height:390px;gap:6px;overflow:auto}#admin-wordchain-recent-list article{display:grid;padding:10px 11px;gap:3px;border:1px solid #253951;border-radius:10px;background:#0b1725}#admin-wordchain-recent-list b{color:#eef4ff;font-size:13px}#admin-wordchain-recent-list small{color:#75879e;font-size:9px}.admin-wordchain-recent-empty{color:#7e8ea4;font-size:10px;line-height:1.5}
.policy-setting-grid .policy-toggle-setting{display:flex;grid-column:1/-1;min-height:0;padding:5px 1px!important;align-items:center;flex-wrap:wrap;gap:9px;border:0;border-radius:0;background:transparent}.policy-setting-grid .policy-toggle-setting>input[type=checkbox]{display:inline-block;width:14px;height:14px;min-height:14px;margin:0;accent-color:#6b5cff}.policy-setting-grid .policy-toggle-setting>span{color:#b3bfd0;font-size:12px}.policy-setting-grid .policy-toggle-setting>small{width:100%;margin:0;padding-left:23px;color:#718198;font-size:9px}.policy-setting-grid>[hidden]{display:none!important}
.admin-game-enabled input[type=checkbox]{display:inline-block;width:16px;height:16px;min-height:16px;margin:0;accent-color:#45d8ad}
@media(max-width:700px){.admin-room-policy-layout{grid-template-columns:1fr}.admin-room-game-list{display:grid;grid-template-columns:repeat(2,1fr);border-right:0;border-bottom:1px solid #263952}.admin-room-setting-row{grid-template-columns:1fr}.admin-room-policy-editor>header{align-items:flex-start;flex-direction:column}.policy-setting-grid{grid-template-columns:1fr}.admin-wordchain-layout{grid-template-columns:1fr}.admin-wordchain-nav{display:grid;grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid #2d3d5b}.admin-wordchain-nav>.eyebrow,.admin-wordchain-nav>h3,.admin-wordchain-nav>p{grid-column:1/-1}.admin-wordchain-content #admin-wordchain-register{grid-template-columns:1fr}.admin-wordchain-tools{grid-template-columns:1fr}.admin-wordchain-suggestion>header{align-items:flex-start;flex-direction:column}.admin-wordchain-review-actions{grid-template-columns:1fr 1fr}.admin-wordchain-review-actions input{grid-column:1/-1}}
#room-chat { height:280px; max-height:42vh; }
#recovery-code { display:block; margin:18px 0; padding:16px; border-radius:10px; background:#171b2c; color:#8fffb0; font-size:22px; letter-spacing:.12em; text-align:center; user-select:all; }

@media (min-width: 851px) {
  body.game-active {
    height: 100dvh;
    overflow: hidden;
  }

  body.game-active .shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1520px;
    height: 100dvh;
    padding: 8px 16px;
    overflow: hidden;
  }

  body.game-active .shell>header {
    flex: 0 0 42px;
    min-height: 42px;
    margin-bottom: 6px;
  }

  body.game-active .shell>header b { font-size: 20px; }
  body.game-active .shell>header span { font-size: 13px; }
  body.game-active .shell>header button { padding: 7px 10px; }
  body.game-active #app { flex: 1; min-height: 0; }

  body.game-active #room {
    height: 100%;
    gap: 12px;
  }

  body.game-active #room > .panel.grow {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
  }

  body.game-active #room > .panel.grow > .section-title {
    flex: 0 0 42px;
    min-height: 42px;
  }

  body.game-active #room .section-title .eyebrow { font-size: 10px; }
  body.game-active #room .section-title h2 { margin: 2px 0 0; font-size: 20px; }
  body.game-active #room .section-title button { padding: 7px 10px; }

  body.game-active #game {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }

  body.game-active #game > .game-head {
    flex: 0 0 28px;
    min-height: 28px;
  }

  body.game-active #room > aside {
    height: 100%;
  }

  body.game-active #room > aside > .panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 12px;
  }

  body.game-active #room > aside h3 { margin: 4px 0 10px; }
  body.game-active #room-chat { flex:0 1 48%; height:auto; min-height:140px; max-height:48vh; }

  body.apple-active #apple-play-area {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2px 8px 6px;
  }

  body.apple-active #apple-drag-info {
    flex: 0 0 auto;
    margin: 2px auto 7px;
    padding: 6px 16px;
    font-size: 14px;
  }

  body.apple-active .apple-board {
    margin: 0 auto;
  }

  body.tetris-active #tetris-play-area {
    position: relative;
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    margin: 2px auto 0;
    padding: 7px 10px;
    flex-direction: column;
    overflow: hidden;
  }

  body.tetris-active .tetris-stage {
    flex: 0 0 auto;
    min-height: 0;
    grid-template-columns: 104px minmax(180px, 360px) 104px;
    gap: 10px;
  }

  body.tetris-active #tetris-board {
    width: auto;
    height: min(720px, calc(100dvh - 145px));
    max-width: 100%;
    aspect-ratio: 1 / 2;
    margin: 0 auto;
  }

  body.tetris-active .tetris-box { padding: 7px 5px; }
  body.tetris-active .tetris-box canvas { width: 80px; }
  body.tetris-active #tetris-controls { flex: 0 0 auto; margin-top: 5px; }
  body.tetris-active #tetris-controls button { padding: 6px 9px; }
  body.tetris-active .tetris-help { flex: 0 0 auto; margin: 4px 0 0; font-size: 10px; }

  body.tetris-active #tetris-opponents:not(:empty) {
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    z-index: 4;
    display: flex;
    width: 92px;
    margin: 0;
    padding: 5px 0 0 6px;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid #ffffff12;
    background: linear-gradient(90deg, transparent, #0b1122dd 18%);
  }

  body.tetris-active .tetris-opponent {
    flex: 0 0 auto;
    width: 78px;
    padding: 5px;
  }

  body.tetris-active .tetris-opponent canvas { width: 54px; margin: 4px auto; }
  body.tetris-active .tetris-opponent small { font-size: 8px; }
}

#apple-play-area {
  position: relative;
  overflow: visible;
  padding: 12px;
  overscroll-behavior: none;
}

#apple-drag-info {
  width: fit-content;
  min-width: 260px;
  margin: 4px auto 12px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff4e8;
  border: 1px solid #ffc590;
  color: #9a4b12;
  font-weight: 800;
  text-align: center;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

#apple-drag-info.active {
  transform: scale(1.05);
  box-shadow: 0 8px 24px #ff7b3050;
}

#apple-drag-info.success {
  color: #075f2c;
  background: #d8ffe8;
  border-color: #38c778;
  box-shadow: 0 0 0 5px #38c77826, 0 8px 25px #38c77844;
}

.apple-board {
  position: relative;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter .15s ease, transform .15s ease;
}

.apple-board.dragging {
  filter: none;
}

.apple {
  position: relative;
  overflow: visible;
  transition: transform .1s ease, background .1s ease, box-shadow .1s ease;
  box-shadow: inset -5px -7px 10px #d94d2850, inset 4px 4px 7px #fff7, 0 4px 8px #b83a2630;
}

.apple::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 10px;
  top: -5px;
  left: 54%;
  border-radius: 8px 1px;
  background: #42a94f;
  transform: rotate(35deg);
}

.apple.selected {
  z-index: 2;
  transform: scale(1.07);
  background: #ff5f3f;
  color: white;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ff914d77;
}

.apple.cleared {
  visibility: visible;
  pointer-events: auto;
  animation: apple-pop .3s cubic-bezier(.2,.8,.25,1) forwards;
}

#apple-selection-box {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  border: 2px solid #ff6b35;
  border-radius: 12px;
  background: #ff8a3d1c;
  box-shadow: 0 0 0 3px #ffffff99, inset 0 0 16px #ff7b3033;
  will-change: left, top, width, height;
}

#apple-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.apple-particle {
  position: absolute;
  font-size: 18px;
  animation: particle-burst .45s ease-out forwards;
}

.apple-score-pop {
  position: absolute;
  color: #ff3d24;
  font-size: 28px;
  font-weight: 1000;
  text-shadow: 0 2px 0 white, 0 0 12px #ffcb57;
  animation: score-float .8s ease-out forwards;
}

@keyframes apple-pop {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  45% { opacity: 1; transform: scale(1.5) rotate(8deg); filter: brightness(1.55); }
  100% { opacity: 0; transform: scale(.05) rotate(25deg); filter: brightness(2); }
}

@keyframes particle-burst {
  from { opacity: 1; transform: translate(-50%,-50%) scale(.5); }
  to { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.25); }
}

@keyframes score-float {
  from { opacity: 0; transform: translate(-50%,5px) scale(.6); }
  20% { opacity: 1; transform: translate(-50%,-8px) scale(1.18); }
  to { opacity: 0; transform: translate(-50%,-70px) scale(1); }
}

#tetris-play-area {
  max-width: 900px;
  margin: 12px auto 0;
  padding: 14px;
  border-radius: 18px;
  color: #edf4ff;
  background: radial-gradient(circle at 50% 15%, #29345c, #111827 58%, #090e1b);
  box-shadow: inset 0 0 0 1px #ffffff12, 0 15px 40px #17203335;
}

.tetris-stage {
  display: grid;
  grid-template-columns: 112px minmax(220px, 300px) 112px;
  justify-content: center;
  align-items: start;
  gap: 12px;
}

.tetris-main {
  position: relative;
  transform-origin: center center;
}

#tetris-line-effects, #tetris-combat-effects {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

#tetris-combat-effects { z-index: 8; overflow: visible; }

.tetris-line-flash {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5%;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, #ffffffee 35%, #a6f4ff 50%, #ffffffee 65%, transparent);
  box-shadow: 0 0 14px #8cecff, inset 0 0 8px white;
  animation: tetris-line-flash .58s ease-out forwards;
}

.tetris-line-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 35%, white 50%, transparent 65%);
  animation: tetris-line-sweep .42s ease-out forwards;
}

.tetris-line-flash i {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 8px #86ecff;
  animation: tetris-spark .42s var(--spark-delay) ease-out forwards;
}

.tetris-combat-text {
  position: relative;
  width: max-content;
  max-width: 95%;
  margin: 8px auto;
  padding: 7px 12px;
  border: 1px solid #ffffff88;
  border-radius: 999px;
  color: white;
  background: #172033e8;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 4px #0008;
  box-shadow: 0 7px 20px #0006;
  animation: tetris-combat-pop .95s ease-out forwards;
}

.tetris-combat-text.attack { color:#a8ffef; border-color:#4ef0c0; background:#075746eb; }
.tetris-combat-text.clear { color:#c7f5ff; border-color:#7be3ff; }
.tetris-combat-text.warning { color:#fff0b3; border-color:#ffbd3d; background:#8a481deb; }
.tetris-combat-text.danger { color:#fff; border-color:#ff5364; background:#aa1735ed; font-size:22px; }

.garbage-impact { animation: tetris-garbage-shake .4s cubic-bezier(.36,.07,.19,.97); }
.gameover-impact { animation: tetris-gameover-shake .72s cubic-bezier(.36,.07,.19,.97); }
.opponent-line-pop { animation: opponent-line-pop .38s ease-out; }
.opponent-garbage-impact { animation: tetris-garbage-shake .4s ease-out; }
.opponent-gameover-impact { animation: tetris-gameover-shake .62s ease-out; }

#tetris-board {
  width: min(300px, 100%);
  margin: 0 auto;
  border: 2px solid #7888b7;
  border-radius: 5px;
  background: #111827;
  box-shadow: 0 0 28px #5d72ff25;
}

.tetris-box {
  width: auto;
  padding: 10px 8px;
  border: 1px solid #ffffff18;
  border-radius: 10px;
  background: #0b1122bb;
  text-align: center;
}

.tetris-box b {
  display: block;
  margin-bottom: 7px;
  color: #9fb1ff;
  font-size: 11px;
  letter-spacing: .12em;
}

.tetris-box canvas {
  width: 96px;
  margin: 0 auto 8px;
  border-radius: 4px;
  background: #111827;
}

#tetris-status, #tetris-stats {
  color: #dce5ff;
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-line;
}

.tetris-garbage-meter {
  position: absolute;
  right: -10px;
  bottom: 2px;
  width: 7px;
  height: calc(100% - 4px);
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff14;
}

#tetris-garbage-fill {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0;
  background: linear-gradient(#ffd43b, #ff3b55 65%);
  transition: height .16s ease;
}

#tetris-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

#tetris-controls button {
  min-width: 48px;
  padding: 8px 11px;
  border-color: #ffffff24;
  color: #eef3ff;
  background: #26304e;
  touch-action: manipulation;
}

#tetris-controls button.primary {
  background: #6256e8;
}

.tetris-help {
  margin: 9px 0 0;
  color: #aab5d2;
  font-size: 12px;
  text-align: center;
}

#tetris-opponents {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  overflow-x: auto;
  border-top: 1px solid #ffffff12;
}

.tetris-opponent {
  flex: 0 0 132px;
  padding: 7px;
  border: 1px solid #ffffff16;
  border-radius: 9px;
  background: #0b1122a8;
  text-align: center;
}
#tetris-items { display:flex; justify-content:center; margin-top:7px; }
#tetris-items button { min-height:34px; padding:6px 12px; color:#cbf8e5; border-color:#43c79466; background:#12352d; font-size:11px; }
#tetris-items button strong { color:#fff; }
.tetris-opponent.watchable { cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.tetris-opponent.watchable:hover { transform:translateY(-3px); border-color:#8174ff; box-shadow:0 9px 24px #5747d233; }
.tetris-opponent.watchable:active { transform:translateY(-1px) scale(.98); }

.tetris-opponent b, .tetris-opponent small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tetris-opponent canvas {
  width: 100px;
  margin: 6px auto;
  border-radius: 3px;
}

.tetris-opponent small {
  color: #aeb9d7;
  font-size: 10px;
}

@keyframes tetris-line-flash {
  0% { opacity:0; transform:scaleX(.1); filter:brightness(2.4); }
  28% { opacity:1; transform:scaleX(1); }
  100% { opacity:0; transform:scaleX(1.08); filter:brightness(1); }
}

@keyframes tetris-line-sweep {
  from { transform:translateX(-100%); }
  to { transform:translateX(100%); }
}

@keyframes tetris-spark {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  30% { opacity:1; transform:translate(-50%,-50%) scale(1.8); }
  100% { opacity:0; transform:translate(-50%,-140%) scale(.4); }
}

@keyframes tetris-combat-pop {
  0% { opacity:0; transform:translateY(18px) scale(.72); }
  18% { opacity:1; transform:translateY(8px) scale(1.08); }
  68% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(-20px) scale(.92); }
}

@keyframes tetris-garbage-shake {
  0%,100% { transform:translate(0,0); }
  16% { transform:translate(-4px,2px) rotate(-.35deg); }
  32% { transform:translate(4px,-2px) rotate(.35deg); }
  48% { transform:translate(-3px,1px); }
  64% { transform:translate(3px,-1px); }
  80% { transform:translate(-1px,1px); }
}

@keyframes tetris-gameover-shake {
  0%,100% { transform:translate(0,0) rotate(0); filter:brightness(1); }
  10% { transform:translate(-13px,5px) rotate(-1deg); filter:brightness(1.7) saturate(1.4); }
  20% { transform:translate(13px,-6px) rotate(1deg); }
  32% { transform:translate(-10px,4px) rotate(-.7deg); }
  44% { transform:translate(9px,-4px) rotate(.7deg); }
  58% { transform:translate(-6px,2px); }
  72% { transform:translate(5px,-2px); }
  86% { transform:translate(-2px,1px); }
}

@keyframes opponent-line-pop {
  0%,100% { transform:scale(1); filter:brightness(1); }
  45% { transform:scale(1.06); filter:brightness(1.8); box-shadow:0 0 18px #79e9ff; }
}

@media (max-width: 620px) {
  .tetris-stage { grid-template-columns: 68px minmax(180px, 1fr) 68px; gap: 5px; }
  .tetris-box { padding: 7px 3px; }
  .tetris-box canvas { width: 58px; height: auto; }
  #tetris-controls button { flex: 1 0 42px; min-width: 42px; padding: 8px 5px; }
  .tetris-help { font-size: 10px; }
}

@media (max-width: 620px) {
  .keybind-grid { grid-template-columns:1fr; min-width:0; }
  #tetris-keys-dialog { min-width:min(360px,calc(100vw - 24px)); }
}

/* Unified dark arcade surfaces */
.ranking-tabs button { border-color:#34435a; color:#9ba7b9; background:#111a29; }
.ranking-tabs button.active { color:white; border-color:#776bff; background:linear-gradient(135deg,#776bff,#5548d8); box-shadow:0 5px 16px #5548d844; }
.ranking-panel #ranking { color:#cbd4e3; scrollbar-color:#3d4b63 transparent; }
.ranking-panel #ranking li::marker { color:#8d83ff; font-weight:800; }
.keybind-guide { color:#95a2b5; }
.keybind-grid input { color:#e8edf7; border-color:#34435a; background:#101a29; }
.keybind-grid input:focus { border-color:#8176ff; outline:3px solid #7568ff26; background:#162135; }

@media (max-width:720px) {
  .game-card-panel { padding:13px; }
  .shop-dialog #game-card-panel { max-height:calc(100dvh - 142px); padding:12px; overflow:auto; }
  .game-card-ability-group>.game-card { flex-basis:100%; max-width:none; }
  .game-card-ability-select>header { align-items:start; flex-direction:column; }
  .game-card-ability-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-card-operation-tabs { grid-template-columns:repeat(2,1fr); }
  .my-room-dialog { height:calc(100dvh - 14px); }
  .my-room-shell { grid-template-columns:1fr; grid-template-rows:auto minmax(620px,1fr); overflow:auto; }
  .my-room-sidebar { display:grid; grid-template-columns:1fr 1fr; padding:14px; border-right:0; border-bottom:1px solid #ffffff12; }
  .my-room-sidebar>header { grid-column:1/-1; }.my-room-avatar-card { min-height:210px; }.my-room-avatar-card #my-room-avatar { width:140px; height:150px; }.my-room-equipped { margin-top:0; }
  .my-room-card-trait { right:0; bottom:calc(100% + 7px); left:auto; width:min(260px,80vw); }.my-room-card-trait::before { display:none; }
  .my-room-topbar { align-items:stretch; flex-direction:column; }.my-room-topbar>div:last-child { justify-content:space-between; }.my-room-main-tabs { flex:1; }.my-room-main-tabs button { flex:1; min-width:0; }
  .my-room-card-filters { grid-template-columns:1fr; top:auto; }
  .game-card-toolbar,.game-card-pack,.game-card-list-head { align-items:stretch; flex-direction:column; }
  .game-card-draw-actions { display:grid; grid-template-columns:1fr 1fr; }
  .game-card-draw-result>header { align-items:stretch; flex-direction:column; }
  .game-card-reveal-all { width:100%; }
  .game-card-reveal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .game-card-reveal-card { height:190px; }
  .game-card-screen-burst,.game-card-screen-effect.grade-s .game-card-screen-burst { min-width:0; width:calc(100vw - 48px); padding:24px 18px; }
  .game-card-screen-effect.grade-s .game-card-screen-burst strong { font-size:66px; }
  .game-card-list { grid-template-columns:1fr; }
  .card-room-settings { grid-template-columns:1fr; }
  .card-room-settings>small { grid-column:auto; }
}

.my-room-card-filters:has(#game-card-appraisal-filter) { grid-template-columns:minmax(180px,1fr) minmax(125px,.5fr) minmax(145px,.58fr); }
.game-card-hover-trait { position:absolute; z-index:12; right:8px; bottom:42px; left:8px; display:grid; gap:3px; padding:9px 10px; visibility:hidden; border:1px solid currentColor; border-radius:10px; color:#f6f0df; background:#07101bea; box-shadow:0 9px 28px #000c,0 0 14px currentColor; opacity:0; transform:translateY(6px); transition:.15s; pointer-events:none; backdrop-filter:blur(8px); }
.game-card-hover-trait small { color:#b7c2d2; font-size:7px; letter-spacing:.1em; }.game-card-hover-trait b { font-size:12px; }.game-card-hover-trait em { color:#aeb9ca; font-size:8px; font-style:normal; }
.game-card-hover-effect { padding-top:5px; border-top:1px solid #ffffff1c; color:#eef3fb; font-size:8px; line-height:1.45; }
.game-card-art-tile:hover .game-card-hover-trait,.game-card-art-tile:focus-visible .game-card-hover-trait { visibility:visible; opacity:1; transform:none; }
@media (max-width:720px) { .my-room-card-filters:has(#game-card-appraisal-filter) { grid-template-columns:1fr; } }
#lobby-chat { border-color:#ffffff0b; background:#09111de0; }
#recovery-code { border:1px solid #8fffb030; background:#070c15; color:#8fffb0; box-shadow:inset 0 0 22px #2cff6b0b; }

.game-head {
  position:relative;
  min-height:38px;
  margin-bottom:8px;
  padding:6px 10px;
  border:1px solid #ffffff10;
  border-radius:10px;
  color:#b8c3d5;
  background:#09111dbd;
}
.game-head #timer { color:#a79fff; font-family:Consolas,"Courier New",monospace; letter-spacing:.04em; }
.game-head #scores { overflow:hidden; color:#aeb9cb; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.game-spectator-count { min-height:26px; cursor:pointer; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease; }
.game-spectator-count:hover,.game-spectator-count[aria-expanded="true"] { border-color:#63e8f6b8; color:#ddfcff!important; background:#17404d; box-shadow:0 0 0 3px #4bd7e612,0 8px 22px #0007; }
.game-spectator-count:focus-visible { outline:2px solid #75edf7; outline-offset:2px; }
.game-spectator-popover {
  position:absolute;
  z-index:85;
  top:calc(100% + 8px);
  right:8px;
  width:min(286px,calc(100vw - 32px));
  padding:10px;
  border:1px solid #53d5e26e;
  border-radius:15px;
  background:linear-gradient(155deg,#10253a 0%,#091522 70%);
  box-shadow:0 22px 54px #000b,0 0 0 1px #ffffff0a inset,0 0 30px #45d8e014;
  backdrop-filter:blur(16px);
  animation:game-spectator-pop .16s ease-out;
}
.game-spectator-popover[hidden] { display:none!important; }
.game-spectator-popover::before { content:""; position:absolute; top:-6px; right:27px; width:10px; height:10px; border-top:1px solid #53d5e26e; border-left:1px solid #53d5e26e; background:#10253a; transform:rotate(45deg); }
.game-spectator-popover-head { display:flex; min-height:42px; padding:2px 2px 9px; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #ffffff12; }
.game-spectator-popover-head>div { display:grid; gap:2px; }
.game-spectator-popover-head small { color:#53dce7; font-size:8px; font-weight:1000; letter-spacing:.17em; }
.game-spectator-popover-head b { color:#f0f7ff; font-size:14px; }
#close-game-spectators { display:grid; flex:0 0 30px; width:30px; min-height:30px; padding:0; place-items:center; border:1px solid #ffffff17; border-radius:9px; color:#9caec2; background:#17283b; font-size:19px; line-height:1; }
#close-game-spectators:hover { color:#fff; border-color:#70e5ee75; background:#203a4b; }
.game-spectator-list { display:grid; max-height:min(280px,50vh); padding-top:8px; gap:6px; overflow:auto; scrollbar-color:#3e8994 #0b1724; scrollbar-width:thin; }
.game-spectator-entry { display:flex; min-width:0; padding:8px 9px; align-items:center; gap:9px; border:1px solid #243f55; border-radius:11px; background:linear-gradient(135deg,#12263a,#0d1b2b); }
.game-spectator-entry.self { border-color:#6d67dd80; box-shadow:inset 3px 0 #756cff; }
.game-spectator-eye { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; border:1px solid #59dce66b; border-radius:10px; background:#173943; box-shadow:inset 0 0 12px #49dce711; }
.game-spectator-entry>div { display:grid; min-width:0; gap:2px; }
.game-spectator-entry b { display:flex; min-width:0; align-items:center; overflow:hidden; color:#edf8ff; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.game-spectator-entry .admin-nameplate { flex:0 0 auto; }
.game-spectator-entry small { color:#718aa0; font-size:9px; }
.game-spectators-empty { margin:12px 4px; color:#708399; font-size:11px; line-height:1.5; text-align:center; }
@keyframes game-spectator-pop { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
.spectator-help { color:#73d9ee; }

/* Classic-modern Minesweeper cabinet */
#mine-play-area {
  position:relative;
  isolation:isolate;
  display:flex;
  flex:1;
  min-height:0;
  padding:8px 4px 4px;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
}

.mine-console {
  width:fit-content;
  max-width:100%;
  padding:12px;
  border:1px solid #536273;
  border-radius:14px;
  background:linear-gradient(145deg,#46515e,#2a333e 48%,#1d252f);
  box-shadow:0 18px 36px #0008,inset 1px 1px #ffffff36,inset -1px -1px #080b0f99;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.mine-hud {
  display:grid;
  min-height:62px;
  margin-bottom:10px;
  padding:7px 9px;
  grid-template-columns:1fr 56px 1fr;
  align-items:center;
  gap:12px;
  border:3px solid;
  border-color:#1a2028 #65717e #65717e #1a2028;
  background:#303944;
  box-shadow:inset 0 0 0 1px #111820;
}

.mine-led {
  display:flex;
  min-width:86px;
  padding:5px 8px 4px;
  flex-direction:column;
  border:1px solid #050608;
  border-radius:3px;
  background:radial-gradient(circle at 50% 20%,#21090d,#090607 70%);
  box-shadow:inset 0 0 12px #000,0 1px #ffffff1b;
}
.mine-led:last-child { align-items:flex-end; }
.mine-led span { color:#7b6267; font:700 8px/1.1 "Segoe UI",sans-serif; letter-spacing:.16em; }
.mine-led strong { color:#ff4e5c; font:900 25px/1 Consolas,"Courier New",monospace; letter-spacing:.07em; text-shadow:0 0 9px #ff203a80; }

.mine-face {
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border:3px solid;
  border-color:#e8edf1 #626c76 #626c76 #e8edf1;
  color:#15191e;
  background:#b8c0c7;
  font-size:23px;
  box-shadow:0 2px 4px #0007;
  user-select:none;
}

.mine-board-frame {
  display:flex;
  max-width:100%;
  padding:5px;
  overflow:auto;
  border:4px solid;
  border-color:#161c23 #6d7883 #6d7883 #161c23;
  background:#8f99a3;
  box-shadow:inset 0 0 0 1px #111820;
}

#mine-board {
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  flex:0 0 auto;
  margin:0;
  border:0;
  border-radius:0;
  background:#aeb7c1;
  box-shadow:none;
  image-rendering:auto;
  transform:translateZ(0);
}

.mine-legend {
  display:flex;
  margin-top:9px;
  justify-content:center;
  gap:14px;
  color:#c0cad4;
  font-size:10px;
  letter-spacing:.02em;
}
.mine-legend span::before { content:"·"; margin-right:5px; color:#ff5968; }
.mine-legend span:first-child::before { color:#68d4eb; }

#mine-play-area.cleared .mine-console { border-color:#65d6a0; box-shadow:0 18px 36px #0008,0 0 25px #43d49130,inset 1px 1px #ffffff36; }
#mine-play-area.failed .mine-console { border-color:#d65b67; box-shadow:0 18px 36px #0008,0 0 25px #ff405530,inset 1px 1px #ffffff36; }
#mine-play-area.spectating .mine-console { border-color:#57bdd8; box-shadow:0 18px 36px #0008,0 0 25px #4bc7e825,inset 1px 1px #ffffff36; }
#mine-play-area.cleared .mine-console { animation:mine-board-clear-pulse .72s cubic-bezier(.16,.8,.2,1) both; }
#mine-play-area.failed .mine-console { animation:mine-board-failure-impact .58s cubic-bezier(.2,.75,.25,1) both; }

.mine-finish-overlay {
  --mine-ending:#78e5ad;
  --mine-ending-soft:#37bd7a38;
  position:absolute;
  z-index:40;
  inset:4px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--mine-ending) 62%,transparent);
  border-radius:16px;
  background:radial-gradient(circle at 50% 42%,var(--mine-ending-soft),transparent 42%),#050b13d9;
  box-shadow:inset 0 0 70px #02050aa8,0 0 30px var(--mine-ending-soft);
  backdrop-filter:blur(2px);
}
.mine-finish-overlay[hidden] { display:none!important; }
.mine-finish-overlay.failure { --mine-ending:#ff6673; --mine-ending-soft:#df283f42; }
.mine-finish-overlay.podium { --mine-ending:#c4a6ff; --mine-ending-soft:#7459db42; }
.mine-finish-overlay article { position:relative; z-index:2; display:grid; width:min(470px,calc(100% - 30px)); justify-items:center; gap:8px; padding:28px 25px 24px; overflow:hidden; border:1px solid color-mix(in srgb,var(--mine-ending) 72%,#fff 10%); border-radius:20px; color:#edf6ff; background:linear-gradient(150deg,#132236f0,#09111ef5); box-shadow:0 24px 60px #000c,0 0 42px var(--mine-ending-soft),inset 0 0 28px #ffffff08; text-align:center; }
.mine-finish-overlay article::before { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(115deg,transparent 25%,color-mix(in srgb,var(--mine-ending) 20%,transparent) 48%,transparent 68%); transform:translateX(-120%); }
.mine-finish-overlay.play article::before { animation:mine-ending-sweep 1.2s .18s ease-out both; }
.mine-finish-icon { display:grid; width:76px; height:76px; place-items:center; border:2px solid var(--mine-ending); border-radius:50%; color:#07131d; background:var(--mine-ending); box-shadow:0 0 0 8px color-mix(in srgb,var(--mine-ending) 12%,transparent),0 0 34px var(--mine-ending); font-size:38px; font-weight:1000; }
.mine-finish-overlay small { color:var(--mine-ending); font-size:10px; font-weight:1000; letter-spacing:.2em; }
.mine-finish-overlay h2 { margin:0; color:#fff; font-size:clamp(25px,4vw,40px); line-height:1.08; text-shadow:0 0 22px var(--mine-ending-soft); }
.mine-finish-overlay p { margin:2px 0 0; color:#c0cedd; font-size:14px; line-height:1.5; }
.mine-finish-overlay strong { min-height:40px; padding:9px 13px; color:#e7f2ff; border:1px solid #ffffff16; border-radius:11px; background:#060d18a8; font-size:12px; line-height:1.55; }
.mine-finish-overlay button { min-width:180px; margin-top:4px; border-color:color-mix(in srgb,var(--mine-ending) 70%,#fff 20%); background:linear-gradient(135deg,color-mix(in srgb,var(--mine-ending) 65%,#334156),color-mix(in srgb,var(--mine-ending) 28%,#151d31)); box-shadow:0 8px 22px #0008,0 0 18px var(--mine-ending-soft); }
.mine-finish-overlay.play article { animation:mine-ending-card-in .62s cubic-bezier(.14,.84,.2,1.15) both; }
.mine-finish-overlay.play .mine-finish-icon { animation:mine-ending-icon-in .72s .08s cubic-bezier(.12,.84,.18,1.2) both; }
.mine-finish-burst { position:absolute; z-index:1; inset:0; pointer-events:none; }
.mine-finish-burst i { position:absolute; top:50%; left:50%; width:9px; height:9px; border-radius:50%; background:var(--mine-ending); box-shadow:0 0 10px var(--mine-ending); opacity:0; }
.mine-finish-overlay.play .mine-finish-burst i { animation:mine-ending-particle 1.15s .16s ease-out both; }
.mine-finish-burst i:nth-child(1) { --mx:-260px; --my:-150px; }.mine-finish-burst i:nth-child(2) { --mx:-185px; --my:-225px; }.mine-finish-burst i:nth-child(3) { --mx:-70px; --my:-250px; }.mine-finish-burst i:nth-child(4) { --mx:90px; --my:-245px; }.mine-finish-burst i:nth-child(5) { --mx:225px; --my:-165px; }.mine-finish-burst i:nth-child(6) { --mx:260px; --my:65px; }.mine-finish-burst i:nth-child(7) { --mx:165px; --my:210px; }.mine-finish-burst i:nth-child(8) { --mx:5px; --my:245px; }.mine-finish-burst i:nth-child(9) { --mx:-175px; --my:205px; }.mine-finish-burst i:nth-child(10) { --mx:-265px; --my:70px; }

@keyframes mine-board-clear-pulse { 0% { filter:brightness(1); transform:scale(1); } 42% { filter:brightness(1.65); transform:scale(1.018); } 100% { filter:brightness(1); transform:scale(1); } }
@keyframes mine-board-failure-impact { 0%,100% { transform:translateX(0); filter:brightness(1); } 18% { transform:translateX(-9px) rotate(-.5deg); filter:brightness(1.8); } 38% { transform:translateX(8px) rotate(.4deg); } 58% { transform:translateX(-5px); } 78% { transform:translateX(3px); } }
@keyframes mine-ending-card-in { from { opacity:0; filter:brightness(1.8) blur(4px); transform:translateY(25px) scale(.82); } to { opacity:1; filter:none; transform:none; } }
@keyframes mine-ending-icon-in { 0% { opacity:0; transform:scale(.15) rotate(-22deg); } 58% { opacity:1; transform:scale(1.18) rotate(4deg); } 100% { opacity:1; transform:scale(1); } }
@keyframes mine-ending-sweep { from { transform:translateX(-120%); } to { transform:translateX(120%); } }
@keyframes mine-ending-particle { 0% { opacity:0; transform:translate(0,0) scale(.3); } 18% { opacity:1; } 100% { opacity:0; transform:translate(var(--mx),var(--my)) scale(1.35); } }

@media (min-width:851px) {
  body.mines-active #mine-play-area { padding-top:4px; overflow:hidden; }
  body.mines-active .mine-console { max-height:100%; }
  body.mines-active .game-head #timer { display:none; }
}

@media (max-width:620px) {
  .mine-console { padding:8px; }
  .mine-hud { min-height:52px; grid-template-columns:1fr 44px 1fr; gap:7px; padding:5px; }
  .mine-face { width:38px; height:38px; font-size:19px; }
  .mine-led { min-width:68px; }
  .mine-led strong { font-size:20px; }
  .mine-legend { flex-wrap:wrap; gap:4px 10px; }
  .mine-finish-overlay { inset:0; border-radius:12px; }
  .mine-finish-overlay article { width:calc(100% - 20px); gap:6px; padding:22px 16px 18px; }
  .mine-finish-icon { width:62px; height:62px; font-size:30px; }
  .mine-finish-overlay strong { min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  #mine-play-area.cleared .mine-console,#mine-play-area.failed .mine-console,.mine-finish-overlay * { animation-duration:.01ms!important; animation-delay:0ms!important; }
}

/* Readability and play-space pass */
.apple-board { gap:3px; }
.apple {
  color:#28141a;
  background:radial-gradient(circle at 34% 27%,#ffc080 0,#ff965b 38%,#f27342 72%,#d84c35 100%);
  font-size:clamp(15px,1.3vw,20px);
  font-weight:950;
  text-shadow:0 1px 0 #ffd1a6,0 0 2px #fff3;
  box-shadow:inset -6px -8px 11px #a92e2f66,inset 4px 4px 8px #fff8,0 4px 9px #0005;
}
.apple::before { background:#3fbe62; box-shadow:0 1px 2px #0c5628aa; }
.apple.selected { color:white; background:#ec543a; text-shadow:0 1px 3px #6b1717; }

@media (min-width:851px) {
  body.game-active .shell>header { display:none; }

  body.game-active .shell {
    padding:6px 10px;
  }

  body.game-active #room { gap:10px; }

  body.game-active #room > .panel.grow {
    padding:7px 10px;
  }

  body.game-active #room > .panel.grow > .section-title {
    flex:0 0 32px;
    min-height:32px;
    padding:0 7px;
    border:1px solid #ffffff0d;
    border-radius:9px;
    background:#09111d9c;
  }

  body.game-active #room .section-title > div {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }

  body.game-active #room .section-title .eyebrow {
    flex:0 0 auto;
    font-size:9px;
  }

  body.game-active #room .section-title h2 {
    overflow:hidden;
    margin:0;
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.game-active #room .section-title button {
    min-height:27px;
    padding:4px 8px;
    font-size:12px;
  }

  body.game-active #game > .game-head {
    flex:0 0 24px;
    min-height:24px;
    margin-bottom:3px;
    padding:2px 8px;
    font-size:12px;
  }

  body.game-active #room > aside {
    flex:0 0 290px;
    width:290px;
  }

  body.game-active #room > aside > .panel { padding:9px; }
  body.game-active #room > aside h3 { margin:2px 0 7px; font-size:15px; }

  body.apple-active #apple-play-area {
    padding:0 4px 3px;
  }

  body.apple-active #apple-drag-info {
    margin:0 auto 4px;
    padding:4px 14px;
    font-size:12px;
  }

  body.tetris-active #tetris-play-area {
    max-width:1040px;
    margin:0 auto;
    padding:3px 8px;
  }

  body.tetris-active .tetris-stage {
    grid-template-columns:104px minmax(180px,360px) 104px;
    gap:9px;
  }

  body.tetris-active #tetris-board {
    height:min(720px,calc(100dvh - 145px));
  }

  body.tetris-active #tetris-controls { margin-top:3px; }
  body.tetris-active #tetris-controls button { min-height:32px; padding:5px 8px; }
  body.tetris-active .tetris-help { margin-top:2px; }
}

/* Modern Minesweeper and stable Apple drag layout */
.mine-console {
  padding:10px;
  border:1px solid #34465e;
  border-radius:16px;
  background:linear-gradient(145deg,#182536,#101a28);
  box-shadow:0 18px 40px #0007,inset 0 1px #ffffff12;
}

.mine-hud {
  min-height:58px;
  margin-bottom:9px;
  padding:7px;
  border:1px solid #2f4157;
  border-radius:11px;
  background:linear-gradient(180deg,#111d2c,#0c1521);
  box-shadow:inset 0 1px #ffffff0d;
}

.mine-led {
  padding:6px 9px 5px;
  border:1px solid #25364a;
  border-radius:8px;
  background:#09111c;
  box-shadow:inset 0 0 14px #0008;
}
.mine-led span { color:#65758b; }
.mine-led strong { color:#73d7ff; text-shadow:0 0 10px #45c8ff55; }

.mine-face {
  border:1px solid #41546c;
  border-radius:10px;
  background:linear-gradient(145deg,#31425a,#202e41);
  box-shadow:0 6px 14px #0005,inset 0 1px #ffffff1a;
}

.mine-board-frame {
  padding:6px;
  border:1px solid #31445b;
  border-radius:11px;
  background:#263548;
  box-shadow:inset 0 0 0 1px #07101b,0 8px 24px #0004;
}

#mine-board { cursor:pointer; background:#d9e1e7; }
.mine-legend { color:#8796aa; }
.mine-legend span::before { color:#70829a; }
.mine-legend span:first-child::before { color:#69d4ff; }

#apple-drag-info {
  display:flex;
  width:min(370px,calc(100% - 16px));
  min-width:0;
  height:34px;
  min-height:34px;
  padding:0 16px;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
  transition:color .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease;
}

#apple-drag-info.active { transform:none; box-shadow:0 5px 18px #ff7b3035; }

@media (min-width:851px) {
  body.apple-active #apple-drag-info {
    flex:0 0 30px;
    width:min(370px,calc(100% - 16px));
    height:30px;
    min-height:30px;
    margin:0 auto 4px;
    padding:0 14px;
  }

  body.poker-active #poker-play-area {
    display:flex;
    flex:1;
    min-height:0;
    align-items:center;
  }

  body.poker-active .poker-table {
    width:100%;
    min-height:0;
    max-height:calc(100dvh - 170px);
    padding:14px 22px;
  }

  body.poker-active .poker-cards { margin:12px 0; }
  body.poker-active .poker-players { margin-bottom:10px; }
  body.poker-active .poker-action-info { margin-top:7px; }
}

/* Refined Minesweeper typography and mobile controls */
.mine-console {
  font-family:"Bahnschrift","Segoe UI Variable","Pretendard",system-ui,sans-serif;
}

.mine-led span {
  font-family:"Bahnschrift SemiCondensed","Segoe UI Variable","Pretendard",sans-serif;
  font-size:8px;
  font-weight:600;
  letter-spacing:.18em;
}

.mine-led strong {
  font-family:"Bahnschrift SemiCondensed","Segoe UI Variable","Pretendard",sans-serif;
  font-variant-numeric:tabular-nums;
  font-weight:650;
  letter-spacing:.09em;
}

.mine-legend {
  font-family:"Segoe UI Variable","Pretendard",system-ui,sans-serif;
  font-weight:500;
  letter-spacing:.01em;
}

#mine-board {
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}

.mine-mobile-tip { display:none; }
#mine-mobile-scroll { display:none; }

@media (max-width:850px) {
  .mine-desktop-tip { display:none; }
  .mine-mobile-tip { display:inline; }
  .mine-legend { font-size:11px; }
  body.mines-active #mine-mobile-scroll:not([hidden]) { display:grid; width:min(280px,calc(100% - 12px)); min-height:32px; margin:0 auto 6px; grid-template-columns:42px 1fr 42px; align-items:center; gap:5px; }
  body.mines-active #mine-mobile-scroll button { min-height:30px; padding:2px 8px; color:#bfeeff; border-color:#365c73; background:#14283a; font-size:24px; line-height:1; }
  body.mines-active #mine-mobile-scroll span { color:#b9c5d7; font-size:11px; font-weight:700; text-align:center; }
  body.mines-active .mine-board-frame { overscroll-behavior-x:contain; scrollbar-color:#57768b #152333; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  body.mines-active #mine-board { touch-action:pan-x pan-y; }
  html.ios-touch body.mines-active #mine-board { touch-action:none; }
}

/* Mobile play layouts: keep controls reachable without shrinking the games to dots. */
#apple-board-viewport { width:100%; min-width:0; overflow:visible; }
#apple-mobile-scroll { display:none; }

/* Keyboard is the desktop control surface; touch buttons are mobile-only. */
#tetris-controls { display:none; }

@media (max-width:850px) {
  body.game-active { overflow-x:hidden; }
  body.game-active .shell>header { display:none; }
  body.game-active .shell { width:100%; padding:6px; overflow-x:hidden; }
  body.game-active #room > .panel.grow { margin-bottom:10px; padding:8px; overflow:hidden; }
  body.game-active #room > .panel.grow > .section-title { min-height:40px; gap:6px; }
  body.game-active #room .section-title > div { min-width:0; }
  body.game-active #room .section-title .eyebrow { font-size:9px; }
  body.game-active #room .section-title h2 { overflow:hidden; margin:2px 0 0; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
  body.game-active #room .section-title button { min-height:34px; padding:6px 9px; font-size:12px; }
  body.game-active #game > .game-head { min-height:32px; margin:5px 0 7px; padding:4px 8px; }
  body.game-active #room > aside > .panel { margin-bottom:8px; }

  body.apple-active #apple-play-area { padding:2px 0 6px; overflow:hidden; }
  body.apple-active #apple-drag-info { width:calc(100% - 12px); height:32px; min-height:32px; margin:2px auto 5px; padding:0 8px; font-size:12px; }
  body.apple-active #apple-mobile-scroll { display:grid; width:min(300px,calc(100% - 16px)); min-height:32px; margin:0 auto 4px; grid-template-columns:42px 1fr 42px; align-items:center; gap:5px; }
  body.apple-active #apple-mobile-scroll button { min-height:30px; padding:2px 8px; color:#ffd1b1; border-color:#874b37; background:#3b211d; font-size:24px; line-height:1; }
  body.apple-active #apple-mobile-scroll span { color:#b9c5d7; font-size:11px; font-weight:700; text-align:center; }
  body.apple-active #apple-board-viewport { width:100%; padding:7px 2px 11px; overflow-x:auto; overflow-y:visible; touch-action:none; overscroll-behavior:none; -webkit-overflow-scrolling:auto; scrollbar-color:#735e57 #0a121e; scrollbar-width:thin; }
  body.apple-active .apple-board { max-width:none; margin:0; }
  body.apple-active .apple { min-width:34px; font-size:16px; }

  body.tetris-active #tetris-play-area { width:100%; max-width:430px; margin:4px auto 0; padding:8px; overflow:visible; }
  body.tetris-active .tetris-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"hold next" "board board"; align-items:stretch; gap:7px; }
  body.tetris-active .tetris-stage > .tetris-box:first-child { grid-area:hold; }
  body.tetris-active .tetris-stage > .tetris-box:last-child { grid-area:next; }
  body.tetris-active .tetris-main { grid-area:board; width:min(76vw,280px); max-width:100%; margin:0 auto; }
  body.tetris-active #tetris-board { width:100%; height:auto; max-width:none; }
  body.tetris-active .tetris-box { display:flex; min-width:0; min-height:106px; padding:6px; flex-direction:column; align-items:center; justify-content:flex-start; }
  body.tetris-active .tetris-box b { margin-bottom:3px; }
  body.tetris-active .tetris-box canvas { width:auto; max-width:100%; height:64px; margin:0 auto 3px; object-fit:contain; }
  body.tetris-active #tetris-next { width:100%; }
  body.tetris-active #tetris-status, body.tetris-active #tetris-stats { overflow:hidden; font-size:9px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
  body.tetris-active .tetris-garbage-meter { right:-9px; }
  body.tetris-active .tetris-help { display:none; }
  body.tetris-active #tetris-opponents { margin-top:8px; padding-top:8px; }
}

html.touch-device body.tetris-active #tetris-controls { display:grid; margin-top:8px; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-areas:"hold ccw r180 cw" "left down right drop"; gap:6px; }
html.touch-device body.tetris-active #tetris-controls button { min-width:0; min-height:46px; padding:7px 3px; font-size:16px; -webkit-user-select:none; user-select:none; }
html.touch-device body.tetris-active #tetris-controls button.pressed { border-color:#a9f8ff; background:#17727d; box-shadow:0 0 0 2px #69e9f94a,0 0 24px #4ee5f36b; transform:scale(.96); }
html.touch-device body.tetris-active #tetris-controls [data-tetris-action="hold"] { grid-area:hold; }
html.touch-device body.tetris-active #tetris-controls [data-tetris-action="rotateCCW"] { grid-area:ccw; }
html.touch-device body.tetris-active #tetris-controls [data-tetris-action="rotate180"] { grid-area:r180; }
html.touch-device body.tetris-active #tetris-controls [data-tetris-action="rotateCW"] { grid-area:cw; }
html.touch-device body.tetris-active #tetris-controls [data-tetris-action="left"] { grid-area:left; }
html.touch-device body.tetris-active #tetris-controls [data-tetris-action="softDrop"] { grid-area:down; }
html.touch-device body.tetris-active #tetris-controls [data-tetris-action="right"] { grid-area:right; }
html.touch-device body.tetris-active #tetris-controls [data-tetris-action="hardDrop"] { grid-area:drop; }

/* Hold'em desktop layout: the hand guide stays beside the felt without
   hiding the mode, blinds, or street information. */
@media (min-width:851px) {
  body.poker-active { overflow-x:hidden; }
  body.poker-active #poker-play-area { display:grid; grid-template-columns:minmax(0,1fr) 206px; gap:14px; align-items:center; width:min(1150px,100%); max-width:100%; }
  body.poker-active #poker-play-area .poker-table { grid-column:1; }
  body.poker-active #poker-hand-guide { grid-column:2; max-width:100%; max-height:none; overflow:hidden; }
  body.poker-active .poker-table-head { display:grid; width:min(760px,calc(100% - 250px)); min-width:0; margin:0 auto; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:9px; align-items:center; }
  body.poker-active #poker-mode { min-width:0; justify-self:start; overflow:hidden; text-overflow:ellipsis; }
  body.poker-active #poker-pot { margin:0; }
  body.poker-active #poker-round-hud { min-width:0; justify-self:end; }
  body.poker-active #poker-blinds, body.poker-active #poker-street { margin:0; }
}

/* My Room workbench and wallet strip. */
.my-room-dialog[open] { position:fixed; overflow:visible; }
.my-room-dialog .my-room-shell { overflow:hidden; border-radius:inherit; }
.my-room-dialog .game-card-cores { display:none; }
.my-room-dialog .game-card-actions { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.my-room-dialog .game-card-actions button { width:100%; min-width:0; }
.my-room-main-tabs button { min-width:96px; }
.my-room-workbench { min-height:0; align-content:start; justify-items:stretch; gap:12px; padding:22px 14px; }
.my-room-workbench>small { color:#8e82ef; font-size:9px; font-weight:900; letter-spacing:.12em; }
.my-room-workbench>strong,.my-room-workbench>b { font-size:17px; }
.my-room-work-slot { display:grid; min-height:178px; place-items:center; align-content:center; gap:7px; padding:15px; border:1px dashed #687893; border-radius:17px; color:#8390a6; background:radial-gradient(circle,#4d60832b,transparent 65%),#091321; text-align:center; }
.my-room-work-slot>i { display:grid; width:72px; height:82px; place-items:center; border:1px dashed currentColor; border-radius:17px; font-style:normal; font-size:38px; }
.my-room-work-slot>strong { color:#e9edf7; font-size:14px; }
.my-room-work-slot>small { color:#8593a9; font-size:9px; line-height:1.55; }
.my-room-work-slot.filled { border-style:solid; border-color:#8a76ff70; color:#c3baff; background:radial-gradient(circle,#7767e53d,transparent 66%),#10172a; box-shadow:inset 0 0 30px #6e5bd21c; }
.my-room-upgrade-slots { display:grid; grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr); align-items:center; gap:7px; }
.my-room-upgrade-connector { color:#7e8ba0; text-align:center; font-size:21px; font-weight:900; }
.my-room-upgrade-slot { display:grid; min-width:0; min-height:184px; place-items:center; align-content:center; gap:8px; padding:12px 8px; border:1px dashed #61718c; border-radius:16px; color:#8491a7; background:radial-gradient(circle,#4d60832b,transparent 66%),#091321; text-align:center; }
.my-room-upgrade-slot>i { display:grid; width:58px; height:68px; place-items:center; border:1px dashed currentColor; border-radius:14px; font-style:normal; font-size:31px; }
.my-room-upgrade-slot>strong { max-width:100%; overflow:hidden; color:#dfe5f1; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.my-room-upgrade-slot>small { color:#7d8ba1; font-size:8px; line-height:1.5; }
.my-room-upgrade-slot.active { border-color:#7eebdf; color:#bafff8; background:radial-gradient(circle,#43d9ca2c,transparent 68%),#0d1b27; box-shadow:0 0 0 2px #50e3d529,0 0 20px #3cd4c02d; }
.my-room-upgrade-slot.filled { border-style:solid; border-color:#8b78ff; color:#c7beff; background:radial-gradient(circle,#7767e542,transparent 68%),#11182b; }
.my-room-upgrade-slot:disabled { cursor:not-allowed; opacity:.42; }
.my-room-workbench>p { min-height:44px; margin:0; color:#8a97aa; font-size:10px; line-height:1.55; }
.my-room-work-selection { display:flex; max-height:116px; flex-wrap:wrap; gap:6px; overflow:auto; }
.my-room-work-selection>button { min-height:32px; padding:6px 8px; font-size:9px; }
.my-room-workbench.dismantle .my-room-work-selection { display:grid; width:100%; max-height:292px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding-right:3px; scrollbar-color:#5f55ad transparent; scrollbar-width:thin; }
.my-room-dismantle-summary { position:sticky; z-index:2; top:0; display:grid; width:100%; grid-column:1 / -1; gap:8px; padding:11px 12px; border:1px solid #544b8c; border-radius:13px; background:linear-gradient(135deg,#171d35f5,#0c1728f5); box-shadow:0 8px 22px #0006,inset 0 1px #ffffff0b; }
.my-room-dismantle-summary header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.my-room-dismantle-summary header span { color:#8f83ed; font-size:8px; font-weight:900; letter-spacing:.12em; }
.my-room-dismantle-summary header strong { color:#f2efff; font-size:12px; }
.my-room-dismantle-rewards { display:flex; flex-wrap:wrap; gap:5px; }
.my-room-dismantle-rewards>span { display:grid; min-width:48px; grid-template-columns:auto auto; align-items:center; gap:0 5px; padding:6px 8px; border:1px solid currentColor; border-radius:9px; background:#091321; }
.my-room-dismantle-rewards i { grid-row:1 / span 2; opacity:.75; font-size:8px; font-style:normal; }
.my-room-dismantle-rewards small { font-size:8px; font-weight:900; }
.my-room-dismantle-rewards b { color:#f4f7ff; font-size:11px; }
.my-room-dismantle-selection { display:grid; width:100%; min-height:42px!important; grid-template-columns:28px minmax(0,1fr) auto!important; grid-template-rows:auto auto; align-items:center; gap:0 8px; padding:6px 8px!important; color:#dfe8f5; border-color:#33465e!important; border-radius:11px; background:#101c2c!important; text-align:left; }
.my-room-dismantle-selection>span { display:grid; grid-row:1 / span 2; width:28px; height:28px; place-items:center; border-radius:8px; background:#233249; font-size:14px; }
.my-room-dismantle-selection>b { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.my-room-dismantle-selection>small { color:#778aa1; font-size:8px; }
.my-room-dismantle-selection>em { grid-column:3; grid-row:1 / span 2; color:#778aa1; font-size:15px; font-style:normal; }
.my-room-dismantle-selection:hover { border-color:#7668d4!important; background:#18253a!important; }
.my-room-dismantle-selected-count { position:absolute; z-index:12; right:9px; bottom:16%; left:9px; display:flex; min-width:0; align-items:center; justify-content:flex-start; gap:7px; padding:7px 8px; color:#07131a; border:2px solid #e9fffa; border-radius:13px; background:linear-gradient(135deg,#b9fff0,#61efd7); box-shadow:0 0 0 4px #4af2d940,0 7px 24px #000c,0 0 30px #4affddaa; font-weight:1000; pointer-events:none; }
.my-room-dismantle-selected-count>i { display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:#087e6c; box-shadow:0 0 0 3px #fff8; font-size:17px; font-style:normal; }
.my-room-dismantle-selected-count>span { display:grid; min-width:0; flex:1 1 auto; gap:1px; text-align:left; }
.my-room-dismantle-selected-count b { font-size:11px; letter-spacing:.04em; white-space:nowrap; }
.my-room-dismantle-selected-count small { color:#0b5b50; font-size:9px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.my-room-dismantle-selected-count>button { display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; padding:0; border:1px solid #0b6d60; border-radius:50%; color:#eafffb; background:#075f54; box-shadow:0 3px 10px #07594e66; font-size:18px; font-weight:900; line-height:1; pointer-events:auto; }
.my-room-dismantle-selected-count>button:hover,.my-room-dismantle-selected-count>button:focus-visible { outline:0; color:#fff; border-color:#fff; background:#b93654; box-shadow:0 0 0 3px #fff8,0 4px 13px #8b183b80; }
.my-room-workbench.dismantle .my-room-work-action { white-space:nowrap; font-size:12px; }
.my-room-work-selection.grade-picker { display:grid; max-height:none; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:visible; }
.my-room-work-selection.grade-picker>button { display:grid; min-width:0; gap:2px; padding:8px 2px; border-color:currentColor; background:#101a29; }
.my-room-work-selection.grade-picker>button b { font-size:10px; }
.my-room-work-selection.grade-picker>button small { font-size:7px; white-space:nowrap; }
.my-room-work-selection.grade-picker>button.active { color:#fff; background:#5446b8; box-shadow:0 0 0 2px #9184ff44,0 0 18px #7967f34d; }
.my-room-work-selection.level-picker { display:grid; max-height:none; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; }
.my-room-work-selection.level-picker>button { display:grid; min-width:0; gap:2px; border-color:#52637d; background:#101a29; }
.my-room-work-selection.level-picker>button.active { border-color:#75e4df; color:#eaffff; background:#17434a; box-shadow:0 0 0 2px #62e0d22b; }
.my-room-synthesis-games { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.my-room-synthesis-games button { min-height:44px; border-color:#40516b; color:#91a0b5; background:#101a29; }
.my-room-synthesis-games button.active { border-color:#60e3df; color:#ecffff; background:linear-gradient(135deg,#17646b,#183a50); box-shadow:0 0 18px #36dcd33c; }
.my-room-work-action { width:100%; min-height:48px; margin-top:auto; }
.my-room-selectable { cursor:pointer; transition:transform .16s,border-color .16s,box-shadow .16s; }
.my-room-selectable:hover,.my-room-selectable:focus-visible { border-color:#8d80ff; outline:0; transform:translateY(-2px); box-shadow:0 8px 24px #0007,0 0 0 2px #796cff2f; }
.my-room-selectable.selected { border-color:#ffd454; background:radial-gradient(circle at 18% 20%,#ffc9472d,transparent 45%),#111a29; box-shadow:0 0 0 2px #ffd45438,0 0 24px #f3bd3040; }
.my-room-dialog .game-card-art-tile.dismantle-selected { z-index:2; border-color:#73ffe5!important; transform:translateY(-5px) scale(.985); box-shadow:0 0 0 5px #47eacf55,0 0 24px #55ffe0,0 18px 38px #000d,inset 0 0 0 3px #eafffb!important; }
.my-room-dialog .game-card-art-tile.dismantle-selected>.game-card-artwork { filter:brightness(.58) saturate(.68); }
.my-room-dialog .game-card-art-tile.dismantle-selected::before { z-index:9; inset:5px; border:3px solid #bafff3; box-shadow:inset 0 0 30px #22ddbd73,0 0 16px #5effe3; }
.my-room-dialog .game-card.upgrade-compatible:not(.selected) { border-color:#59d8ca; box-shadow:inset 0 0 0 1px #52ddce2b,0 0 16px #38bbaa20; }
.my-room-dialog .game-card.upgrade-incompatible { opacity:.3; filter:saturate(.45); cursor:not-allowed; }
.my-room-dialog .game-card.appraised { position:relative; }
.game-card-appraised-badge { position:absolute; z-index:7; top:9px; left:9px; display:grid; width:27px; height:27px; place-items:center; border:1px solid #dcf8ff; border-radius:50%; color:#09121f; background:linear-gradient(145deg,#f7fdff,#92e9f1); box-shadow:0 4px 12px #0008,0 0 14px #63e7f477; }
.game-card-appraised-badge svg { width:17px; height:17px; fill:currentColor; transform:rotate(-42deg); }
.my-room-dialog .game-card-ability-group>.game-card.game-card-art-tile { position:relative; display:block; flex:1 1 145px; max-width:calc((100% - 32px)/5); min-width:118px; min-height:0; aspect-ratio:3/4.25; padding:0; overflow:hidden; border-width:2px; border-radius:16px; background:#09111e; box-shadow:0 12px 27px #0008,inset 0 0 0 3px #07101a; cursor:pointer; isolation:isolate; }
.my-room-dialog .game-card-art-tile:hover,.my-room-dialog .game-card-art-tile:focus-visible { outline:0; border-color:currentColor; transform:translateY(-4px); box-shadow:0 17px 34px #000b,0 0 0 2px currentColor; }
.game-card-artwork { position:absolute; inset:0; overflow:hidden; border-radius:13px; background:#0c1625; }
.game-card-artwork img { display:block; width:100%; height:100%; object-fit:cover; user-select:none; }
.game-card-artwork.placeholder { background:radial-gradient(circle at 35% 27%,hsl(var(--art-hue) 86% 64% / .7),transparent 24%),radial-gradient(circle at 75% 76%,hsl(calc(var(--art-hue) + 85) 82% 55% / .45),transparent 31%),linear-gradient(145deg,hsl(var(--art-hue) 58% 31%),#07101c 70%); }
.game-card-artwork.placeholder::before { content:""; position:absolute; inset:-40%; border:1px solid #ffffff16; border-radius:43%; background:repeating-conic-gradient(from 15deg,transparent 0 12deg,#ffffff0b 13deg 14deg,transparent 15deg 28deg); animation:game-card-placeholder-drift 12s linear infinite; }
.game-card-artwork.placeholder::after { content:""; position:absolute; inset:8px; border:1px solid #ffffff20; border-radius:10px; box-shadow:inset 0 0 35px #ffffff0d; }
@keyframes game-card-placeholder-drift { to { transform:rotate(360deg); } }
.game-card-raw-quantity { position:absolute; z-index:7; top:8px; left:8px; display:grid; min-width:44px; height:28px; place-items:center; padding:0 9px; border:1px solid #fff1bd; border-radius:999px; color:#1a1103; background:linear-gradient(145deg,#fff6c6,#ffc84f); box-shadow:0 5px 15px #0009,0 0 18px #ffc74066; font-size:13px; font-weight:1000; font-variant-numeric:tabular-nums; }
.game-card-grade-badge { position:absolute; z-index:7; top:8px; right:8px; display:grid; min-width:34px; height:30px; place-items:center; padding:0 9px; border:1px solid currentColor; border-radius:999px; background:#08111de8; box-shadow:0 5px 15px #0009,0 0 13px currentColor; font-size:15px; font-weight:1000; backdrop-filter:blur(7px); }
.game-card-level-badge { position:absolute; z-index:7; right:9px; bottom:9px; display:grid; min-width:48px; height:27px; place-items:center; padding:0 9px; border:1px solid #d8e5ff5c; border-radius:8px; color:#edf4ff; background:#08111de8; box-shadow:0 5px 15px #0009; font-size:11px; font-weight:1000; letter-spacing:.04em; backdrop-filter:blur(7px); }
.my-room-dialog .game-card-art-tile .game-card-actions { position:absolute; z-index:8; right:10px; bottom:10px; left:10px; display:grid; width:auto; grid-template-columns:1fr; opacity:0; transform:translateY(10px); transition:opacity .18s ease,transform .18s ease; pointer-events:none; }
.my-room-dialog .game-card-art-tile:hover .game-card-actions,.my-room-dialog .game-card-art-tile:focus-within .game-card-actions { opacity:1; transform:none; pointer-events:auto; }
.my-room-dialog .game-card-art-tile .game-card-actions button { min-height:40px; border-color:#ffffff70; color:#fff; background:linear-gradient(135deg,#6956eced,#4435aae8); box-shadow:0 8px 20px #0009,0 0 15px #735fff55; backdrop-filter:blur(8px); }
.my-room-dialog .game-card-art-tile.equipped::after { content:""; position:absolute; z-index:3; inset:5px; border:2px solid #77fff0; border-radius:11px; box-shadow:inset 0 0 20px #51e7d13d,0 0 17px #4ce1d7; pointer-events:none; }

.game-card-detail[hidden] { display:none!important; }
.game-card-detail { position:absolute; z-index:70; inset:0; display:grid; place-items:center; overflow:hidden; border-radius:18px; }
.game-card-detail-backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; border-radius:18px; background:#020711df; backdrop-filter:blur(12px); }
.game-card-detail-window { position:relative; display:grid; width:min(440px,calc(100% - 30px)); max-height:calc(100% - 22px); place-items:center; overflow:auto; padding:24px; }
.game-card-detail-window>.dialog-close { position:absolute; z-index:5; top:6px; right:6px; }
.game-card-detail-card { position:relative; display:grid; width:min(360px,100%); grid-template-rows:auto minmax(290px,1fr) auto auto; gap:9px; padding:14px; border:5px solid currentColor; border-radius:18px; color:#a8b0bd; background:linear-gradient(145deg,#c7b686,#897649); box-shadow:0 35px 90px #000e,0 0 35px currentColor,inset 0 0 0 3px #241d0b99; }
.game-card-detail-card>header { display:flex; min-height:0; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:8px 9px; border:1px solid #201a0d66; border-radius:7px; color:#161106; background:#efe3bd; }
.game-card-detail-card>header b { overflow:hidden; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }.game-card-detail-card>header span { flex:0 0 auto; font-size:10px; font-weight:900; }
.game-card-detail-card>.game-card-artwork { position:relative; inset:auto; min-height:300px; border:4px solid #2a2418; border-radius:4px; box-shadow:inset 0 0 0 1px #ffffff35,0 8px 18px #0008; }
.game-card-detail-card>section { display:grid; gap:6px; min-height:115px; padding:11px 12px; border:2px solid #4a3a20; border-radius:3px; color:#18130b; background:linear-gradient(#f3e9ca,#d9c99d); box-shadow:inset 0 0 10px #7b603833; }
.game-card-detail-card>section small { color:#684f21; font-size:8px; font-weight:1000; letter-spacing:.12em; }.game-card-detail-card>section b { font-size:12px; line-height:1.45; }.game-card-detail-card>section p { margin:0; color:#4d402b; font-size:9px; line-height:1.45; }
.game-card-detail-card>footer { padding:1px 4px; color:#2b2417; font-size:8px; font-weight:900; text-align:right; }
.game-card-detail-card.grade-c { background:linear-gradient(145deg,#a8d5bb,#46725a); }.game-card-detail-card.grade-b { background:linear-gradient(145deg,#9ecbec,#355f83); }.game-card-detail-card.grade-a { background:linear-gradient(145deg,#d4b2ed,#69448a); }.game-card-detail-card.grade-s { background:linear-gradient(145deg,#ffef9f,#b77b12); }
.game-card-detail-card.raw { filter:saturate(.55); }
.my-room-dialog .my-room-topbar.no-brand { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; justify-content:stretch; gap:9px; }
.my-room-dialog .my-room-topbar.no-brand>div:last-child { justify-content:flex-end; }
.my-room-currency-bar { position:static; z-index:auto; display:flex; width:100%; min-width:0; min-height:44px; align-items:center; justify-content:center; gap:9px; padding:6px 11px; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid #40516b; border-radius:13px; background:linear-gradient(180deg,#111c2d,#080f19); box-shadow:0 8px 24px #0008,inset 0 1px #ffffff0d; transform:none; }
.my-room-currency-bar>span { display:grid; min-width:106px; flex:1 1 0; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:7px; padding:4px 10px; border:1px solid currentColor; border-radius:9px; background:#ffffff07; }
.my-room-currency-bar>span>i { grid-row:1/3; align-self:center; color:inherit; font-style:normal; }
.my-room-currency-bar>span>small { color:#a0acc0; font-size:8.5px; font-weight:900; letter-spacing:.06em; }
.my-room-currency-bar>span>b { font-size:13px; font-variant-numeric:tabular-nums; }
.my-room-currency-bar .my-room-currency-coin { min-width:158px; flex-grow:1.35; color:#ffd15f; }

.my-room-dialog.synthesis-mode .my-room-shell { position:relative; display:block; }
.my-room-dialog.synthesis-mode .my-room-workspace { width:100%; height:100%; }
.my-room-dialog.synthesis-mode .my-room-sidebar { position:absolute; z-index:5; top:142px; left:50%; display:block; width:min(470px,calc(100% - 40px)); height:auto; padding:0; border:0; background:transparent; box-shadow:none; transform:translateX(-50%); }
.my-room-dialog.synthesis-mode .my-room-sidebar>header,
.my-room-dialog.synthesis-mode .my-room-equipped { display:none!important; }
.my-room-dialog.synthesis-mode .my-room-workbench.synthesis { min-height:570px; padding:26px; border-color:#7669ff65; background:radial-gradient(circle at 50% 32%,#6e61dc2f,transparent 52%),linear-gradient(160deg,#121d31,#090f1b); box-shadow:0 22px 55px #0009,inset 0 1px #ffffff10; }
.my-room-dialog.synthesis-mode .my-room-work-slot { min-height:210px; }
.my-room-dialog.synthesis-mode .my-room-work-slot>i { width:88px; height:100px; font-size:48px; }
.my-room-dialog.synthesis-mode .my-room-work-slot>strong { font-size:19px; }
.my-room-dialog.synthesis-mode .my-room-work-slot>small { font-size:11px; }

.my-room-dialog.upgrade-mode .my-room-shell { position:relative; display:block; }
.my-room-dialog.upgrade-mode .my-room-workspace { width:100%; height:100%; }
.my-room-dialog.upgrade-mode .my-room-sidebar { position:absolute; z-index:5; top:142px; left:50%; display:block; width:min(790px,calc(100% - 48px)); height:auto; padding:0; border:0; background:transparent; box-shadow:none; transform:translateX(-50%); }
.my-room-dialog.upgrade-mode .my-room-sidebar>header,
.my-room-dialog.upgrade-mode .my-room-equipped { display:none!important; }
.my-room-dialog.upgrade-mode .my-room-workbench.upgrade { min-height:620px; padding:30px 34px; border-color:#6ceade55; background:radial-gradient(circle at 50% 35%,#42d7cb22,transparent 52%),radial-gradient(circle at 50% 100%,#7563e429,transparent 48%),linear-gradient(160deg,#121f32,#090f1b); box-shadow:0 25px 65px #000a,inset 0 1px #ffffff11; }
.my-room-dialog.upgrade-mode .my-room-workbench.upgrade>small { font-size:11px; }
.my-room-dialog.upgrade-mode .my-room-workbench.upgrade>b { font-size:24px; }
.my-room-dialog.upgrade-mode .my-room-synthesis-games { width:min(440px,100%); justify-self:center; }
.my-room-dialog.upgrade-mode .my-room-upgrade-slots { width:100%; grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr); gap:16px; }
.my-room-dialog.upgrade-mode .my-room-upgrade-connector { font-size:32px; }
.my-room-dialog.upgrade-mode .my-room-upgrade-slot { min-height:290px; padding:22px; }
.my-room-dialog.upgrade-mode .my-room-upgrade-slot>i { width:100px; height:116px; border-radius:22px; font-size:52px; }
.my-room-dialog.upgrade-mode .my-room-upgrade-slot>strong { font-size:18px; }
.my-room-dialog.upgrade-mode .my-room-upgrade-slot>small { font-size:11px; }
.my-room-dialog.upgrade-mode .my-room-workbench>p { min-height:34px; text-align:center; font-size:11px; }
.my-room-dialog.upgrade-mode .my-room-work-action { width:min(470px,100%); justify-self:center; min-height:58px; font-size:15px; }

.my-room-upgrade-picker[hidden] { display:none!important; }
.my-room-upgrade-picker { position:fixed; z-index:100100; inset:6px; display:grid; place-items:center; }
.my-room-upgrade-picker-backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; border-radius:18px; background:#020711c9; backdrop-filter:blur(9px); }
.my-room-upgrade-picker-window { position:relative; display:grid; width:min(980px,calc(100% - 24px)); height:min(860px,calc(100dvh - 18px)); max-height:calc(100dvh - 18px); grid-template-rows:auto auto auto minmax(0,1fr); gap:12px; overflow:hidden; padding:22px; border:1px solid #756aff70; border-radius:22px; background:radial-gradient(circle at 50% 0,#6656d930,transparent 40%),linear-gradient(155deg,#152238,#090f1b); box-shadow:0 30px 90px #000e,inset 0 1px #ffffff17; }
.my-room-upgrade-picker-window>header { display:flex; min-height:0; align-items:center; justify-content:space-between; gap:14px; margin:0; padding:0 0 13px; border-bottom:1px solid #ffffff12; }
.my-room-upgrade-picker-window>header>div { display:grid; gap:4px; }
.my-room-upgrade-picker-window>header small { color:#8f82ff; font-size:9px; font-weight:900; letter-spacing:.14em; }
.my-room-upgrade-picker-window>header b { font-size:22px; }
.my-room-upgrade-picker-window>p { margin:0; color:#96a4b9; font-size:11px; }
.my-room-upgrade-picker-list { display:grid; min-height:0; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:10px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:4px 8px 12px 4px; }
.my-room-upgrade-picker-card { position:relative; display:grid; min-width:0; min-height:146px; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:12px; padding:14px; border-color:currentColor; color:#aeb9c8; background:linear-gradient(145deg,#17253a,#0a1321); text-align:left; }
.my-room-upgrade-picker-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px #0009,0 0 0 2px #7b6fff33; }
.my-room-upgrade-picker-card>em { position:absolute; top:8px; right:9px; font-size:13px; font-style:normal; }
.my-room-upgrade-picker-card>i { display:grid; width:58px; height:68px; place-items:center; border:1px solid currentColor; border-radius:14px; background:#ffffff08; font-style:normal; font-size:31px; }
.my-room-upgrade-picker-card>span { display:grid; min-width:0; gap:5px; }
.my-room-upgrade-picker-card b { overflow:hidden; color:#eef1f8; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.my-room-upgrade-picker-card small { color:#9aa8bc; font-size:9px; }
.my-room-upgrade-picker-card p { margin:0; color:#aab4c4; font-size:9px; line-height:1.45; }
.my-room-upgrade-filters { display:grid; grid-template-columns:minmax(170px,1.2fr) repeat(3,minmax(105px,.7fr)); gap:8px; padding:10px; border:1px solid #ffffff14; border-radius:13px; background:#09111de8; }
.my-room-upgrade-filters label { display:grid; gap:4px; color:#8695aa; font-size:8px; }.my-room-upgrade-filters select { min-width:0; margin:0; }

@media (max-width:720px) {
  .my-room-currency-bar { gap:3px; padding:4px; justify-content:flex-start; }
  .my-room-currency-bar>span { min-width:62px; padding:3px 5px; }
  .my-room-currency-bar .my-room-currency-coin { min-width:98px; }
  .my-room-work-selection.grade-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .my-room-upgrade-picker { inset:3px; }
  .my-room-upgrade-picker-window { width:calc(100% - 6px); height:calc(100dvh - 6px); max-height:calc(100dvh - 6px); padding:14px; }
  .my-room-upgrade-picker-list { grid-template-columns:1fr; }
  .my-room-upgrade-filters { grid-template-columns:1fr 1fr; }
  .my-room-dialog .game-card-ability-group>.game-card.game-card-art-tile { flex-basis:calc(50% - 4px); max-width:calc(50% - 4px); min-width:0; }
  .game-card-detail-window { padding:12px; }
  .game-card-detail-card { width:min(340px,100%); grid-template-rows:auto minmax(230px,1fr) auto auto; }
  .game-card-detail-card>.game-card-artwork { min-height:240px; }
}

@media (max-width:980px) {
  .game-card-storefront { grid-template-columns:1fr; }
  .game-card-pack-product { min-height:300px; grid-template-columns:190px minmax(0,1fr); }
}

@media (max-width:620px) {
  .game-card-store-toolbar { align-items:start; flex-direction:column; }
  .game-card-store-toolbar>div:last-child { width:100%; text-align:left; }
  .game-card-pack-product { grid-template-columns:1fr; padding:17px; }
  .game-card-pack-art { width:168px; height:226px; justify-self:center; }
  .game-card-pack-copy { text-align:center; }
  .game-card-pack-copy p { min-height:0; }
  .game-card-draw-result.single-reveal { min-height:430px; }
  .game-card-draw-result.single-reveal .game-card-reveal-card { height:290px; }
  .game-card-pack-opening-burst { width:290px; height:370px; }
  .game-card-opening-pack { width:184px; height:270px; }
}

/* 등급마다 카드 실루엣이 즉시 구분되도록 두께와 광택이 다른 프레임을 사용한다. */
.my-room-dialog .game-card-ability-group>.game-card.game-card-art-tile {
  border-width:3px;
}
.my-room-dialog .game-card-ability-group>.game-card.game-card-art-tile::before {
  content:"";
  position:absolute;
  z-index:6;
  inset:3px;
  border:1px solid #ffffff4d;
  border-radius:11px;
  pointer-events:none;
}
.my-room-dialog .game-card-art-tile.grade-d {
  border-color:#aab4c3;
  box-shadow:0 12px 27px #0008,inset 0 0 0 2px #495362;
}
.my-room-dialog .game-card-art-tile.grade-c {
  border-color:#42df9a;
  box-shadow:0 12px 27px #0008,0 0 9px #22c98659,inset 0 0 0 2px #116745;
}
.my-room-dialog .game-card-art-tile.grade-b {
  border-color:#44a8ff;
  box-shadow:0 12px 27px #0008,0 0 11px #218cff73,inset 0 0 0 2px #155ea0;
}
.my-room-dialog .game-card-art-tile.grade-a {
  border-color:#c477ff;
  box-shadow:0 12px 27px #0008,0 0 14px #b454ff91,inset 0 0 0 2px #7133aa;
}
.my-room-dialog .game-card-art-tile.grade-s {
  border-width:4px;
  border-color:#ffd44f;
  box-shadow:0 12px 27px #0009,0 0 10px #fff1a6,0 0 21px #ffae278f,inset 0 0 0 2px #9c6700;
}
.my-room-dialog .game-card-art-tile.grade-s::before {
  inset:3px;
  border:2px solid #fff3a6b8;
  box-shadow:inset 0 0 13px #ffbb3596;
}

.game-card-reveal-front { padding:0; }
.game-card-reveal-art {
  position:absolute!important;
  inset:0;
  z-index:0!important;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.game-card-reveal-front::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:42% 0 0;
  background:linear-gradient(transparent,#050a13d9 56%,#050a13f5);
  pointer-events:none;
}
.game-card-reveal-front>.game-card-reveal-grade {
  position:absolute;
  top:8px;
  right:8px;
  align-self:auto;
  min-width:29px;
  height:27px;
  display:grid;
  place-items:center;
  padding:0 8px;
  color:inherit;
  background:#07101ce8;
  box-shadow:0 4px 14px #000a;
  font-size:14px;
}
.game-card-reveal-front>strong {
  position:absolute;
  right:8px;
  bottom:25px;
  left:8px;
  max-width:none;
  color:#fff;
  text-shadow:0 2px 7px #000,0 0 10px #000;
}
.game-card-reveal-front>em {
  position:absolute;
  right:8px;
  bottom:7px;
  left:8px;
  width:auto;
  margin:0;
  padding:4px 0 0;
  color:#d5deef;
  text-shadow:0 2px 5px #000;
}
.game-card-reveal-card.grade-d .game-card-reveal-front { border:3px solid #aab4c3; box-shadow:inset 0 0 0 2px #495362,0 10px 26px #0008; }
.game-card-reveal-card.grade-c .game-card-reveal-front { border:3px solid #42df9a; box-shadow:inset 0 0 0 2px #116745,0 0 10px #22c98670,0 10px 26px #0008; }
.game-card-reveal-card.grade-b .game-card-reveal-front { border:3px solid #44a8ff; box-shadow:inset 0 0 0 2px #155ea0,0 0 12px #218cff85,0 10px 28px #0008; }
.game-card-reveal-card.grade-a .game-card-reveal-front { border:3px solid #c477ff; box-shadow:inset 0 0 0 2px #7133aa,0 0 16px #b454ffb3,0 14px 36px #000a; }
.game-card-reveal-card.grade-s .game-card-reveal-front { border:4px solid #ffd44f; box-shadow:inset 0 0 0 2px #9c6700,0 0 12px #fff1a6,0 0 28px #ffae27b8,0 16px 48px #000c; }

.game-card-reveal-grid { grid-template-columns:repeat(5,minmax(128px,168px)); }
.game-card-reveal-card { height:205px; }
.game-card-reveal-front.game-card-reveal-complete {
  display:grid;
  grid-template-rows:27px minmax(0,1fr) 42px 16px;
  gap:4px;
  padding:7px;
  color:#342b19;
  background:linear-gradient(145deg,#e9ddb6,#ae9865);
}
.game-card-reveal-front.game-card-reveal-complete::after { display:none; }
.game-card-reveal-complete>header {
  position:relative;
  z-index:2;
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  padding:3px 5px;
  border:1px solid #4a3b1e80;
  border-radius:4px;
  background:#f1e7c8;
}
.game-card-reveal-complete>header b { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.game-card-reveal-complete>header small { flex:0 0 auto; color:currentColor; font-size:7px; font-weight:1000; }
.game-card-reveal-complete>.game-card-reveal-art {
  position:relative!important;
  inset:auto;
  z-index:1!important;
  min-height:0;
  border:2px solid #292216;
  border-radius:2px;
  object-fit:cover;
}
.game-card-reveal-complete>.game-card-reveal-fallback { display:grid; min-height:0; margin:0; place-items:center; border:2px solid #292216; background:#152034; }
.game-card-reveal-complete>section {
  position:relative;
  z-index:2;
  display:grid;
  min-height:0;
  align-content:center;
  gap:3px;
  padding:5px 6px;
  border:1px solid #4a3b1e80;
  border-radius:3px;
  background:#eee3c3;
  text-align:left;
}
.game-card-reveal-complete>section small { color:#735c2f; font-size:5px; font-weight:1000; letter-spacing:.11em; }
.game-card-reveal-complete>section b { display:-webkit-box; overflow:hidden; color:#322814; font-size:7px; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.game-card-reveal-complete>footer { position:relative; z-index:2; color:#43371f; font-size:6px; font-weight:900; text-align:right; }
.game-card-reveal-card.grade-c .game-card-reveal-complete { background:linear-gradient(145deg,#c8e3d2,#6e9b7f); }
.game-card-reveal-card.grade-b .game-card-reveal-complete { background:linear-gradient(145deg,#bad9ee,#5f88a8); }
.game-card-reveal-card.grade-a .game-card-reveal-complete { background:linear-gradient(145deg,#dec6ef,#895ea9); }
.game-card-reveal-card.grade-s .game-card-reveal-complete { background:linear-gradient(145deg,#fff1ab,#c68a1a); }
.game-card-draw-result.single-reveal .game-card-reveal-grid { grid-template-columns:minmax(270px,320px); }
.game-card-draw-result.single-reveal .game-card-reveal-card { height:455px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete { grid-template-rows:42px minmax(0,1fr) 90px 22px; gap:8px; padding:11px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>header { padding:7px 9px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>header b { font-size:16px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>header small { font-size:10px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>section { padding:10px 11px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>section small { font-size:7px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>section b { font-size:11px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>footer { font-size:8px; }

@media (max-width:720px) {
  .game-card-reveal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-card-reveal-card { height:235px; }
  .game-card-draw-result.single-reveal .game-card-reveal-card { height:410px; }
}

.game-card-screen-burst.game-card-screen-card-burst {
  min-width:0;
  width:min(310px,calc(100vw - 44px));
  padding:13px;
  gap:7px;
  background:#0b0d18ed;
}
.game-card-screen-effect.grade-s .game-card-screen-card-burst { min-width:0; width:min(340px,calc(100vw - 44px)); padding:15px; }
.game-card-screen-card-burst>small { font-size:9px; }
.game-card-cinematic-preview {
  display:grid;
  width:100%;
  height:min(480px,72vh);
  grid-template-rows:42px minmax(0,1fr) 78px 20px;
  gap:7px;
  padding:11px;
  border:5px solid currentColor;
  border-radius:17px;
  color:#b88aff;
  background:linear-gradient(145deg,#dec6ef,#895ea9);
  box-shadow:0 20px 60px #000d,0 0 25px currentColor,inset 0 0 0 3px #241d0b99;
}
.game-card-cinematic-preview.grade-s { color:#ffd15b; background:linear-gradient(145deg,#fff1ab,#c68a1a); }
.game-card-cinematic-preview>header { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border:1px solid #33281780; border-radius:6px; color:#211807; background:#f2e7c7; }
.game-card-cinematic-preview>header b { overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.game-card-cinematic-preview>header em { flex:0 0 auto; display:grid; width:30px; height:27px; place-items:center; border:2px solid currentColor; border-radius:999px; font-size:15px; font-style:normal; font-weight:1000; }
.game-card-cinematic-preview>img,.game-card-cinematic-preview>i { min-height:0; width:100%; height:100%; border:3px solid #2a2418; border-radius:4px; object-fit:cover; }
.game-card-cinematic-preview>i { display:grid; place-items:center; background:#111c2d; font-size:54px; font-style:normal; }
.game-card-cinematic-preview>section { display:grid; align-content:center; gap:5px; padding:9px 10px; border:2px solid #4a3a20; border-radius:3px; color:#18130b; background:linear-gradient(#f3e9ca,#d9c99d); text-align:left; }
.game-card-cinematic-preview>section small { color:#684f21; font-size:7px; font-weight:1000; letter-spacing:.12em; }
.game-card-cinematic-preview>section b { display:-webkit-box; overflow:hidden; font-size:10px; line-height:1.4; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.game-card-cinematic-preview>footer { color:#2b2417; font-size:8px; font-weight:900; text-align:right; }

/* 카드팩 공개 결과: 모든 카드의 외곽 크기를 통일하고 가로형 일러스트 크롭을 자연스럽게 마감한다. */
.game-card-reveal-grid {
  width:min(100%,900px);
  margin-inline:auto;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  gap:12px;
}
.game-card-reveal-card {
  width:100%;
  height:218px;
  min-width:0;
  border-radius:17px;
}
.game-card-reveal-front.game-card-reveal-complete {
  display:grid;
  grid-template-rows:30px minmax(0,1fr) 47px 15px;
  gap:5px;
  padding:8px;
  overflow:hidden;
  border-width:4px;
  border-radius:17px;
}
.game-card-reveal-complete>header {
  grid-row:1;
  height:30px;
  padding:4px 6px;
  border-radius:5px;
}
.game-card-reveal-complete>header b { font-size:9px; line-height:1; }
.game-card-reveal-complete>header small { font-size:7px; line-height:1; }
.game-card-reveal-complete>.game-card-reveal-artwork {
  position:relative;
  z-index:1;
  grid-row:2;
  align-self:stretch;
  width:100%;
  height:100%;
  min-width:0;
  min-height:82px;
  margin:0;
  overflow:hidden;
  border:2px solid #292216;
  border-radius:5px;
  background:#111827;
  box-shadow:inset 0 0 0 1px #ffffff35,0 4px 10px #261d0c66;
  isolation:isolate;
}
.game-card-reveal-artwork::before {
  content:"";
  position:absolute;
  inset:-12px;
  z-index:0;
  background-image:var(--reveal-art);
  background-position:var(--card-art-focus,50% 46%);
  background-size:cover;
  filter:blur(10px) saturate(1.18) brightness(.7);
  transform:scale(1.12);
  opacity:.68;
}
.game-card-reveal-artwork::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:3px;
  background:linear-gradient(90deg,#06101b8c 0,transparent 8%,transparent 92%,#06101b8c 100%),linear-gradient(180deg,#050a132b,transparent 18%,transparent 76%,#050a1380);
  box-shadow:inset 0 0 12px #02050b99;
  pointer-events:none;
}
.game-card-reveal-artwork>.game-card-reveal-art {
  position:absolute!important;
  inset:0;
  z-index:1!important;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--card-art-focus,50% 46%);
  filter:saturate(1.06) contrast(1.02);
  transform:scale(1.015);
}
.game-card-reveal-artwork>.game-card-reveal-fallback {
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  margin:0;
  place-items:center;
  background:#152034;
  font-size:36px;
}
.game-card-reveal-artwork>.game-card-reveal-fallback[hidden] { display:none; }
.game-card-reveal-card[data-card-ability="gravity_disruption"] { --card-art-focus:50% 67%; }
.game-card-reveal-card[data-card-ability="piece_discard"] { --card-art-focus:50% 26%; }
.game-card-reveal-card[data-card-ability="garbage_barrage"] { --card-art-focus:50% 45%; }
.game-card-reveal-card[data-card-ability="line_cleaner"] { --card-art-focus:50% 51%; }
.game-card-reveal-complete>section { grid-row:3; height:47px; padding:5px 6px; }
.game-card-reveal-complete>footer { grid-row:4; height:15px; line-height:15px; }
.game-card-reveal-card.grade-d .game-card-reveal-front { border-width:4px; box-shadow:inset 0 0 0 2px #495362,0 0 11px #aab4c34f,0 12px 28px #0009; }
.game-card-reveal-card.grade-c .game-card-reveal-front { border-width:4px; box-shadow:inset 0 0 0 2px #116745,0 0 11px #22c98670,0 12px 28px #0009; }
.game-card-reveal-card.grade-b .game-card-reveal-front { border-width:4px; box-shadow:inset 0 0 0 2px #155ea0,0 0 11px #218cff70,0 12px 28px #0009; }
.game-card-reveal-card.grade-a .game-card-reveal-front { border-width:4px; box-shadow:inset 0 0 0 2px #7133aa,0 0 14px #b454ff96,0 12px 28px #0009; }
.game-card-reveal-card.grade-s .game-card-reveal-front { border-width:4px; }
.game-card-draw-result.single-reveal .game-card-reveal-card { height:455px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete { grid-template-rows:42px minmax(0,1fr) 90px 22px; gap:8px; padding:11px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>header { height:42px; }
.game-card-draw-result.single-reveal .game-card-reveal-artwork { min-height:220px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>section { height:90px; }
.game-card-draw-result.single-reveal .game-card-reveal-complete>footer { height:22px; line-height:22px; }

@media (max-width:720px) {
  .game-card-reveal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .game-card-reveal-card { height:235px; }
  .game-card-draw-result.single-reveal .game-card-reveal-card { height:410px; }
}

/* A/S급 전체 화면 연출의 큰 타이포가 카드 내부까지 상속되지 않도록 분리한다. */
.game-card-screen-effect .game-card-cinematic-preview>header b,
.game-card-screen-effect.grade-s .game-card-cinematic-preview>header b {
  min-width:0;
  color:#211807;
  font-size:15px;
  line-height:1.15;
  text-shadow:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.game-card-screen-effect .game-card-cinematic-preview>section,
.game-card-screen-effect.grade-s .game-card-cinematic-preview>section {
  min-width:0;
  overflow:hidden;
}
.game-card-screen-effect .game-card-cinematic-preview>section b,
.game-card-screen-effect.grade-s .game-card-cinematic-preview>section b {
  display:-webkit-box;
  max-width:100%;
  overflow:hidden;
  color:#18130b;
  font-size:10px;
  line-height:1.4;
  text-shadow:none;
  overflow-wrap:anywhere;
  word-break:keep-all;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.game-card-screen-effect .game-card-cinematic-preview>footer,
.game-card-screen-effect.grade-s .game-card-cinematic-preview>footer {
  overflow:hidden;
  color:#2b2417;
  font-size:8px;
  line-height:20px;
  text-overflow:ellipsis;
  text-shadow:none;
  white-space:nowrap;
}

/* 10장 공개에서도 원본 일러스트가 잘린 티 없이 보이도록 흐린 배경 위에 전체 그림을 얹는다. */
.game-card-reveal-artwork>.game-card-reveal-art {
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:drop-shadow(0 3px 7px #0009) saturate(1.08) contrast(1.03);
}
.game-card-reveal-artwork::before {
  filter:blur(8px) saturate(1.28) brightness(.68);
  opacity:.92;
}
.game-card-reveal-artwork::after {
  background:linear-gradient(90deg,#06101b99 0,transparent 18%,transparent 82%,#06101b99 100%),linear-gradient(180deg,#ffffff14,transparent 20%,transparent 78%,#050a136b);
  box-shadow:inset 0 0 0 1px #ffffff2b,inset 0 0 13px #02050ba8;
}
.game-card-draw-result>header { min-width:0; flex-wrap:wrap; }
.game-card-draw-result>header>div { min-width:150px; flex:1 1 220px; }
.game-card-reveal-back-store { max-width:100%; min-width:0; white-space:normal; }

/* 게임 흐름을 막지 않는 공통 카드 발동 알림 */
.game-card-activation-feed { position:fixed; z-index:2600; top:72px; left:50%; display:grid; width:min(390px,calc(100vw - 28px)); gap:7px; pointer-events:none; transform:translateX(-50%); }
.game-card-activation-notice { display:grid; min-height:50px; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:10px; padding:8px 12px; border:1px solid #57e4d88c; border-radius:13px; color:#eafffb; background:linear-gradient(110deg,#071521f2,#102c36ed); box-shadow:0 9px 24px #0008,inset 3px 0 #4ae4d4; backdrop-filter:blur(8px); animation:gameCardNoticeIn .24s cubic-bezier(.18,.86,.3,1.15) both; }
.game-card-activation-notice>i { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#ffffff10; box-shadow:inset 0 0 0 1px #ffffff17; font-size:21px; font-style:normal; }
.game-card-activation-notice>span { display:grid; min-width:0; gap:2px; }.game-card-activation-notice b { overflow:hidden; color:#fff; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.game-card-activation-notice small { overflow:hidden; color:#a8c7cf; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.game-card-activation-notice.observe { border-color:#68bfff80; box-shadow:0 9px 24px #0008,inset 3px 0 #57aefa; }.game-card-activation-notice.danger { border-color:#ff6e7e8f; box-shadow:0 9px 24px #0008,inset 3px 0 #ff5368; }.game-card-activation-notice.failed { opacity:.82; border-color:#8d98a980; color:#d8e0ea; filter:saturate(.55); box-shadow:0 9px 24px #0008,inset 3px 0 #7f8b9b; }
.game-card-activation-notice.leaving { animation:gameCardNoticeOut .28s ease-in both; }
.tetris-opponent.opponent-card-activation { animation:tetrisOpponentCardActivation .65s ease-out; }
@keyframes gameCardNoticeIn { from { opacity:0; transform:translateY(-12px) scale(.96) } to { opacity:1; transform:none } }
@keyframes gameCardNoticeOut { to { opacity:0; transform:translateY(-8px) scale(.98) } }
@keyframes tetrisOpponentCardActivation { 0%,100% { box-shadow:var(--opponent-shadow,0 8px 22px #0005) } 35% { box-shadow:0 0 0 2px #63eee1,0 0 22px #35d8cb99 } }
@media (max-width:620px) { .game-card-activation-feed { top:52px; width:min(340px,calc(100vw - 18px)); }.game-card-activation-notice { min-height:44px; padding:6px 9px; }.game-card-activation-notice>i { width:30px; height:30px; font-size:18px; } }

/* 마이룸 강화 비용표와 강화·합성 카드 공개 연출 */
.my-room-upgrade-terms { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.my-room-upgrade-terms>span { display:grid; gap:3px; padding:9px 7px; border:1px solid #ffffff12; border-radius:11px; background:#07111ee0; text-align:center; }
.my-room-upgrade-terms small { color:#7f8da3; font-size:8px; }
.my-room-upgrade-terms b { color:#f3f6fb; font-size:10px; }
.my-room-upgrade-terms>span:nth-child(1) b { color:#ffd766; }
.my-room-upgrade-terms>span:nth-child(2) b { color:#7fffe6; font-size:15px; }
.my-room-upgrade-terms>span:nth-child(3) b { color:#a9d3ff; }

.my-room-card-cinematic { position:fixed; z-index:300000; inset:0; display:grid; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; place-items:center; overflow:hidden; padding:18px; border:0; color:#f7fbff; background:radial-gradient(circle at 50% 46%,#3459a24d 0,transparent 35%),#01040bef; backdrop-filter:blur(13px); }
.my-room-card-cinematic::backdrop { background:#01040bef; backdrop-filter:blur(13px); }
.my-room-card-cinematic::before,.my-room-card-cinematic::after { position:absolute; inset:-40%; content:""; pointer-events:none; }
.my-room-card-cinematic::before { background:conic-gradient(from 0deg,transparent 0 12%,#3fffe459 18%,transparent 25% 43%,#8c7dff70 50%,transparent 58% 74%,#ffe38a54 82%,transparent 90%); filter:blur(35px); opacity:.36; animation:my-room-cinematic-sky 4.8s linear infinite; }
.my-room-card-cinematic::after { background-image:radial-gradient(circle,#fff 0 1px,transparent 1.7px); background-size:38px 38px; opacity:.12; animation:my-room-cinematic-stars 2.8s ease-in-out infinite alternate; }
.my-room-card-cinematic-stage { position:relative; z-index:2; display:grid; width:min(780px,96vw); min-height:min(690px,92vh); place-items:center; align-content:center; gap:24px; }
.my-room-card-cinematic-stage>header { display:grid; place-items:center; gap:7px; text-align:center; }
.my-room-card-cinematic-stage>header>small { color:#78f5e8; font-size:10px; font-weight:1000; letter-spacing:.3em; }
.my-room-card-cinematic-stage>header>b { font-size:clamp(24px,4vw,42px); text-shadow:0 0 22px #7b8dff; }
.my-room-card-cinematic-stage>header>p { min-height:20px; margin:0; color:#aebbd0; font-size:13px; }
.my-room-cinematic-flash { position:absolute; z-index:10; width:20px; height:20px; border-radius:50%; pointer-events:none; background:#fff; opacity:0; box-shadow:0 0 30px 20px #fff,0 0 100px 60px #8fffea,0 0 230px 120px #8d7cff; }
.my-room-card-cinematic.dismiss-ready { cursor:pointer; }
.my-room-cinematic-dismiss { position:absolute; z-index:60; right:50%; bottom:0; min-width:210px; padding:10px 18px; border:1px solid #d9fdf7a3; border-radius:999px; color:#f4fffd; background:#08121bd9; box-shadow:0 8px 26px #000b,0 0 24px #66ffe16b; font-size:11px; font-weight:1000; letter-spacing:.04em; transform:translateX(50%); animation:my-room-dismiss-prompt .45s ease-out both; backdrop-filter:blur(10px); }
.my-room-cinematic-dismiss:hover,.my-room-cinematic-dismiss:focus-visible { outline:0; border-color:#fff; background:#12302fef; box-shadow:0 8px 26px #000b,0 0 30px #7dffe9; }
.my-room-cinematic-pair { position:relative; display:grid; width:min(650px,92vw); grid-template-columns:minmax(0,1fr) 55px minmax(0,1fr); align-items:center; gap:15px; perspective:1100px; }
.my-room-cinematic-card { position:relative; display:grid; min-width:0; height:350px; grid-template-rows:auto minmax(0,1fr) auto auto; place-items:center; gap:8px; padding:14px; border:2px solid #8d7cff; border-radius:23px; background:radial-gradient(circle at 50% 35%,#6256c34f,transparent 42%),linear-gradient(155deg,#17233a,#080e1a); box-shadow:0 18px 50px #000c,inset 0 0 30px #7969df21; transform:translateY(30px) scale(.88); opacity:0; }
.my-room-cinematic-card::before,.my-room-cinematic-card::after { position:absolute; inset:-4px; border:2px solid #65f7e6; border-radius:26px; content:""; opacity:0; filter:drop-shadow(0 0 12px #53ffea); }
.my-room-cinematic-card::after { inset:-12px; border-color:#a78dff; animation-delay:-.8s; }
.my-room-cinematic-card>em { padding:5px 10px; border:1px solid #ffffff23; border-radius:999px; color:#9bfbed; background:#07121bcf; font-size:9px; font-style:normal; font-weight:900; }
.my-room-cinematic-card>.game-card-artwork { position:relative; inset:auto; width:100%; height:100%; min-height:0; border:2px solid #ffffff38; border-radius:15px; background-color:#101a2b; box-shadow:inset 0 0 18px #0008,0 8px 22px #0008; }
.my-room-cinematic-card>b { max-width:100%; overflow:hidden; font-size:19px; text-overflow:ellipsis; white-space:nowrap; }
.my-room-cinematic-card>small { color:#aeb8c9; font-size:11px; }
.my-room-cinematic-plus { color:#9bffe9; font-size:42px; font-weight:1000; text-align:center; text-shadow:0 0 17px #52ffe5; transform:scale(.5); opacity:0; }
.my-room-cinematic-orbit { position:absolute; z-index:4; inset:-35px; border:1px solid #72ffe232; border-radius:50%; pointer-events:none; opacity:0; }
.my-room-cinematic-orbit>i { position:absolute; top:50%; left:50%; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 0 12px 6px #7fffea,0 0 35px 12px #8c70ff; animation:my-room-upgrade-orbit 1.45s linear infinite; animation-delay:calc(var(--orbit-index) * -.36s); }
.my-room-card-cinematic.charging .my-room-cinematic-card { animation:my-room-upgrade-card-enter .6s cubic-bezier(.17,.9,.26,1.14) both; }
.my-room-card-cinematic.charging .my-room-cinematic-card:nth-of-type(2) { animation-delay:.12s; }
.my-room-card-cinematic.charging .my-room-cinematic-card::before,.my-room-card-cinematic.charging .my-room-cinematic-card::after { opacity:.8; animation:my-room-upgrade-border 1.25s linear infinite; }
.my-room-card-cinematic.charging .my-room-cinematic-plus { animation:my-room-upgrade-plus .7s .35s ease-out both; }
.my-room-card-cinematic.charging .my-room-cinematic-orbit { animation:my-room-upgrade-orbit-in .45s .4s ease-out both; }
.my-room-card-cinematic.resolve .my-room-cinematic-flash { animation:my-room-upgrade-flash .52s ease-in-out both; }
.my-room-card-cinematic.resolve .my-room-cinematic-pair { animation:my-room-upgrade-converge .52s ease-in both; }

.my-room-cinematic-result { position:absolute; z-index:20; inset:80px 0 0; display:grid; place-items:center; pointer-events:none; opacity:0; transform:scale(.3) rotateY(90deg); }
.my-room-card-cinematic.success { --cinematic-glow:#fff6bd88; --cinematic-mid:#ffb52f42; --cinematic-deep:#735eff2e; --cinematic-ray:#fff2acb5; --cinematic-ring:#ffca4e73; --card-light:#fff5bd; --card-dark:#cc8b18; --card-border:#ffe071; --card-edge:#5d481d; --card-panel:#fff1b8; --card-ink:#2c230d; --card-shadow:#ffc329; --card-shine:#fff9; background:radial-gradient(circle at 50% 46%,var(--cinematic-glow) 0,var(--cinematic-mid) 18%,var(--cinematic-deep) 38%,transparent 62%),#01040bf2; }
.my-room-card-cinematic.success.grade-d { --cinematic-glow:#e7eef58c; --cinematic-mid:#a9b6c54d; --cinematic-deep:#52627232; --cinematic-ray:#f3f7ffb8; --cinematic-ring:#aebdce7d; --card-light:#eef3f7; --card-dark:#778493; --card-border:#d9e2ec; --card-edge:#3c4754; --card-panel:#e6edf3; --card-ink:#18212a; --card-shadow:#afbdcc; --card-shine:#fff; }
.my-room-card-cinematic.success.grade-c { --cinematic-glow:#adffd48c; --cinematic-mid:#29d7894f; --cinematic-deep:#126d4638; --cinematic-ray:#b9ffdab8; --cinematic-ring:#35e99a82; --card-light:#c9f4da; --card-dark:#4b9d70; --card-border:#62e8a5; --card-edge:#1f6141; --card-panel:#d8f7e4; --card-ink:#103321; --card-shadow:#2bd98a; --card-shine:#eafff2d6; }
.my-room-card-cinematic.success.grade-b { --cinematic-glow:#b5e0ff91; --cinematic-mid:#329fff55; --cinematic-deep:#195fa43d; --cinematic-ray:#c3e8ffbd; --cinematic-ring:#48aaff8c; --card-light:#c9e8fb; --card-dark:#568fba; --card-border:#68baff; --card-edge:#245f8c; --card-panel:#d9effd; --card-ink:#102f49; --card-shadow:#349fff; --card-shine:#ecf9ffd9; }
.my-room-card-cinematic.success.grade-a { --cinematic-glow:#e7c2ff94; --cinematic-mid:#b85cff59; --cinematic-deep:#6d2c9d42; --cinematic-ray:#edcaffc2; --cinematic-ring:#c16aff94; --card-light:#e8cff7; --card-dark:#9360ae; --card-border:#d18cff; --card-edge:#63337e; --card-panel:#f0ddfa; --card-ink:#3e1953; --card-shadow:#bb61fa; --card-shine:#fbedffdf; }
.my-room-card-cinematic.success.grade-s { --cinematic-glow:#fff6bd88; --cinematic-mid:#ffb52f42; --cinematic-deep:#735eff2e; --cinematic-ray:#fff2acb5; --cinematic-ring:#ffca4e73; --card-light:#fff5bd; --card-dark:#cc8b18; --card-border:#ffe071; --card-edge:#5d481d; --card-panel:#fff1b8; --card-ink:#2c230d; --card-shadow:#ffc329; --card-shine:#fff9; }
.my-room-card-cinematic.success .my-room-cinematic-pair { visibility:hidden; }
.my-room-card-cinematic.success .my-room-cinematic-result,.my-room-card-cinematic.show-result .my-room-cinematic-result { animation:my-room-result-reveal .72s cubic-bezier(.15,.9,.22,1.15) both; }
.my-room-card-cinematic.success .my-room-cinematic-result::before,.my-room-card-cinematic.success .my-room-cinematic-result::after { position:absolute; width:540px; height:540px; border-radius:50%; content:""; background:repeating-conic-gradient(from 0deg,transparent 0 6deg,var(--cinematic-ray) 7deg,transparent 10deg 18deg); filter:blur(1px); opacity:.45; animation:my-room-result-rays 5s linear infinite; }
.my-room-card-cinematic.success .my-room-cinematic-result::after { width:430px; height:430px; background:radial-gradient(circle,transparent 43%,var(--cinematic-ray) 44% 45%,transparent 47% 54%,var(--cinematic-ring) 55% 57%,transparent 59%); animation-direction:reverse; }
.my-room-cinematic-result-card { position:relative; z-index:3; display:grid; width:min(310px,76vw); height:min(470px,68vh); grid-template-rows:48px minmax(0,1fr) 88px 20px; gap:8px; padding:12px; overflow:hidden; border:4px solid var(--card-border); border-radius:24px; color:var(--card-ink); background:linear-gradient(145deg,var(--card-light),var(--card-dark)); box-shadow:inset 0 0 0 2px var(--card-edge),0 0 18px #fff,0 0 48px var(--card-shadow),0 0 110px var(--cinematic-ring),0 28px 70px #000d; }
.my-room-cinematic-result-card::after { position:absolute; inset:-100% -35%; content:""; background:linear-gradient(100deg,transparent 42%,var(--card-shine) 49%,transparent 56%); animation:my-room-result-shine 1.4s .4s ease-in-out both; }
.my-room-cinematic-result-card>header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:2px solid var(--card-edge); border-radius:9px; background:var(--card-panel); }
.my-room-cinematic-result-card>header b { overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.my-room-cinematic-result-card>header small { flex:0 0 auto; font-size:9px; font-weight:1000; }
.my-room-cinematic-result-card>.game-card-artwork { position:relative; z-index:2; width:100%; height:100%; min-height:0; border:3px solid var(--card-edge); border-radius:13px; background-color:#182138; }
.my-room-cinematic-result-card>section { position:relative; z-index:2; display:grid; align-content:center; gap:6px; padding:9px 11px; border:2px solid var(--card-edge); border-radius:10px; background:var(--card-panel); }
.my-room-cinematic-result-card>section small { font-size:8px; font-weight:1000; letter-spacing:.13em; }
.my-room-cinematic-result-card>section b { display:-webkit-box; overflow:hidden; font-size:10px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.my-room-cinematic-result-card>footer { position:relative; z-index:2; font-size:7px; font-weight:1000; letter-spacing:.1em; text-align:right; }

.my-room-card-cinematic.failure { color:#d2d5da; background:radial-gradient(circle at 50% 45%,#7e848d38,transparent 38%),#030507f5; }
.my-room-card-cinematic.failure::before { background:conic-gradient(transparent,#858a9266,transparent,#3b3f466e,transparent); filter:grayscale(1) blur(36px); animation-duration:1.8s; }
.my-room-card-cinematic.failure .my-room-card-cinematic-stage>header { position:relative; z-index:45; min-height:48px; padding:11px 22px; border:1px solid #d6dbe35c; border-radius:14px; background:#080b10c7; opacity:1; transform:none; box-shadow:0 0 28px #c6d2df20; }
.my-room-card-cinematic.failure .my-room-card-cinematic-stage>header>small,.my-room-card-cinematic.failure .my-room-card-cinematic-stage>header>b { display:none; }
.my-room-card-cinematic.failure .my-room-card-cinematic-stage>header>p { min-height:0; color:#f0f2f5; font-size:clamp(15px,2.4vw,21px); font-weight:1000; letter-spacing:.02em; text-shadow:0 0 12px #fff8,0 2px 8px #000; animation:my-room-failure-message .42s .06s cubic-bezier(.2,.85,.25,1.2) both; }
.my-room-card-cinematic.failure .my-room-cinematic-flash { animation:none; opacity:0; }
.my-room-card-cinematic.failure .my-room-cinematic-pair { animation:none!important; opacity:1; filter:none; transform:none!important; }
.my-room-card-cinematic.failure .my-room-cinematic-orbit { opacity:.22; filter:grayscale(1); }
.my-room-card-cinematic.failure .my-room-cinematic-plus { color:#7b8087; text-shadow:none; }
.my-room-card-cinematic.failure .my-room-cinematic-card { filter:grayscale(.9) brightness(.5); }
.my-room-card-cinematic.failure .my-room-cinematic-card.survived { opacity:1; filter:grayscale(.55) brightness(.82); box-shadow:0 0 0 2px #b9c6d557,0 0 32px #8ea6c15c; animation:my-room-target-survives .65s ease-out both; }
.my-room-card-cinematic.failure .my-room-cinematic-card.tear-source { border-color:transparent; background:transparent; box-shadow:none; }
.my-room-card-cinematic.failure .my-room-cinematic-card.tear-source::before,.my-room-card-cinematic.failure .my-room-cinematic-card.tear-source::after { display:none; }
.my-room-card-cinematic.failure .my-room-cinematic-card.tear-source>em,.my-room-card-cinematic.failure .my-room-cinematic-card.tear-source>.game-card-grade-mark,.my-room-card-cinematic.failure .my-room-cinematic-card.tear-source>.game-card-artwork,.my-room-card-cinematic.failure .my-room-cinematic-card.tear-source>b,.my-room-card-cinematic.failure .my-room-cinematic-card.tear-source>small { animation:my-room-tear-source-fade .18s .18s ease-in both; }
.my-room-torn-pieces { position:absolute; z-index:30; inset:-2px; overflow:visible; border-radius:23px; pointer-events:none; }
.my-room-torn-half { position:absolute; top:0; bottom:0; width:50%; overflow:hidden; opacity:0; transform-origin:center; }
.my-room-torn-half.left { left:0; clip-path:polygon(0 0,100% 0,88% 8%,100% 16%,86% 25%,98% 34%,84% 43%,100% 52%,86% 62%,98% 71%,84% 82%,96% 91%,88% 100%,0 100%); animation:my-room-card-tear-left 1.55s .12s cubic-bezier(.3,.15,.7,1) both; }
.my-room-torn-half.right { right:0; clip-path:polygon(0 0,100% 0,100% 100%,12% 100%,4% 91%,16% 82%,2% 71%,14% 62%,0 52%,16% 43%,2% 34%,14% 25%,0 16%,12% 8%); animation:my-room-card-tear-right 1.55s .12s cubic-bezier(.3,.15,.7,1) both; }
.my-room-torn-half>.my-room-torn-copy { position:absolute!important; top:0; width:200%!important; height:100%!important; min-height:0!important; margin:0!important; opacity:1!important; transform:none!important; animation:none!important; }
.my-room-torn-half.left>.my-room-torn-copy { left:0; }
.my-room-torn-half.right>.my-room-torn-copy { right:0; }
.my-room-card-tear-crack { position:absolute; z-index:35; top:-3%; bottom:-3%; left:50%; width:19px; background:linear-gradient(90deg,transparent,#f1f4f7 38% 58%,transparent); clip-path:polygon(43% 0,67% 8%,35% 16%,70% 25%,37% 34%,65% 43%,31% 52%,68% 62%,35% 71%,73% 82%,39% 91%,56% 100%,44% 100%,27% 91%,61% 82%,32% 71%,65% 62%,29% 52%,63% 43%,33% 34%,66% 25%,31% 16%,57% 8%); filter:drop-shadow(0 0 7px #fff); transform:translateX(-50%); animation:my-room-card-tear-crack .58s ease-out both; }
.my-room-card-cinematic.request-error { animation:my-room-request-error .28s linear 2; }

@keyframes my-room-cinematic-sky { to { transform:rotate(360deg); } }
@keyframes my-room-cinematic-stars { to { opacity:.28; transform:scale(1.05); } }
@keyframes my-room-upgrade-card-enter { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes my-room-upgrade-border { to { transform:rotate(360deg); } }
@keyframes my-room-upgrade-plus { to { opacity:1; transform:scale(1); } }
@keyframes my-room-upgrade-orbit-in { to { opacity:1; transform:rotate(20deg); } }
@keyframes my-room-upgrade-orbit { from { transform:rotate(calc(var(--orbit-index) * 90deg)) translateX(min(330px,43vw)) rotate(calc(var(--orbit-index) * -90deg)); } to { transform:rotate(calc(360deg + var(--orbit-index) * 90deg)) translateX(min(330px,43vw)) rotate(calc(-360deg - var(--orbit-index) * 90deg)); } }
@keyframes my-room-upgrade-flash { 0% { opacity:0; transform:scale(.2); } 58% { opacity:1; transform:scale(4); } 100% { opacity:.35; transform:scale(24); } }
@keyframes my-room-upgrade-converge { to { opacity:.25; filter:brightness(4); transform:scale(.2); } }
@keyframes my-room-result-reveal { 0% { opacity:0; transform:scale(.3) rotateY(90deg); filter:brightness(5); } 65% { opacity:1; transform:scale(1.08) rotateY(0); filter:brightness(1.5); } 100% { opacity:1; transform:scale(1) rotateY(0); filter:brightness(1); } }
@keyframes my-room-result-rays { to { transform:rotate(360deg); } }
@keyframes my-room-result-shine { from { transform:translateX(-70%) rotate(8deg); } to { transform:translateX(70%) rotate(8deg); } }
@keyframes my-room-target-survives { 50% { transform:scale(.95); } 100% { transform:scale(1); } }
@keyframes my-room-tear-source-fade { to { opacity:0; } }
@keyframes my-room-card-tear-left { 0% { opacity:1; transform:translate(0,0) rotate(0); filter:brightness(1.8); } 23% { opacity:1; transform:translate(-8px,2px) rotate(-2deg); filter:brightness(.75); } 100% { opacity:0; transform:translate(-145px,125px) rotate(-24deg); filter:brightness(.22) blur(3px); } }
@keyframes my-room-card-tear-right { 0% { opacity:1; transform:translate(0,0) rotate(0); filter:brightness(1.8); } 23% { opacity:1; transform:translate(8px,2px) rotate(2deg); filter:brightness(.75); } 100% { opacity:0; transform:translate(145px,135px) rotate(26deg); filter:brightness(.22) blur(3px); } }
@keyframes my-room-card-tear-crack { 0% { opacity:0; filter:drop-shadow(0 0 4px #fff); transform:translateX(-50%) scaleY(.1); transform-origin:top; } 35% { opacity:1; filter:drop-shadow(0 0 13px #fff); transform:translateX(-50%) scaleY(1); } 100% { opacity:0; filter:drop-shadow(0 0 2px #777); transform:translateX(-50%) scaleY(1); } }
@keyframes my-room-failure-message { 0% { opacity:0; transform:translateY(-10px) scale(.94); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes my-room-dismiss-prompt { from { opacity:0; transform:translate(50%,12px); } to { opacity:1; transform:translate(50%,0); } }
@keyframes my-room-request-error { 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }

@media (max-width:620px) {
  .my-room-card-cinematic { padding:8px; }
  .my-room-card-cinematic-stage { min-height:96vh; gap:14px; }
  .my-room-cinematic-pair { grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:5px; }
  .my-room-cinematic-card { height:250px; padding:9px 6px; border-radius:16px; }
  .my-room-cinematic-card>.game-card-artwork { border-radius:10px; }
  .my-room-cinematic-card>b { font-size:12px; }
  .my-room-cinematic-card>small { font-size:8px; }
  .my-room-cinematic-plus { font-size:24px; }
  .my-room-cinematic-result { inset:72px 0 0; }
  .my-room-cinematic-result-card { width:min(285px,84vw); height:min(445px,74vh); }
  .my-room-upgrade-terms { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .my-room-card-cinematic *,.my-room-card-cinematic::before,.my-room-card-cinematic::after { animation-duration:.01ms!important; animation-delay:0ms!important; }
}

/* 관리자 사용자별 coin·카드 조각 조정 */
.admin-user-row { grid-template-columns:minmax(180px,.8fr) minmax(520px,1.8fr); align-items:start; }
.admin-user-fragments { display:flex!important; margin-top:4px; flex-wrap:wrap; gap:4px!important; }
.admin-user-fragments>span { padding:3px 6px; border:1px solid currentColor; border-radius:999px; background:#ffffff08; font-size:8px; font-weight:900; }
.admin-user-fragments .grade-d { color:#aab4c3; }.admin-user-fragments .grade-c { color:#42df9a; }.admin-user-fragments .grade-b { color:#44a8ff; }.admin-user-fragments .grade-a { color:#c477ff; }.admin-user-fragments .grade-s { color:#ffd44f; }

/* 마이룸·상점 카드에서 등급을 일러스트 위의 큰 한 글자로 통일한다. */
.game-card-grade-mark {
  position:absolute;
  z-index:9;
  top:12px;
  left:12px;
  display:block;
  width:max-content;
  color:#a8b0bd;
  line-height:.78;
  pointer-events:none;
  filter:drop-shadow(0 5px 7px #02060dd9);
}
.game-card-grade-mark>strong {
  display:block;
  font-family:Inter,"Arial Black","Noto Sans KR",sans-serif;
  font-size:56px;
  font-style:italic;
  font-weight:1000;
  letter-spacing:-.11em;
  line-height:.78;
  paint-order:stroke fill;
  -webkit-text-stroke:1.4px #07101dcc;
  text-shadow:0 2px 0 #fff4,0 0 16px currentColor,0 7px 12px #000c;
}
.my-room-dialog .game-card-art-tile>.game-card-grade-mark { top:15px; left:13px; }
.my-room-dialog .game-card-art-tile>.game-card-grade-mark>strong { font-size:50px; }
.my-room-dialog .game-card-art-tile>.game-card-raw-quantity,
.my-room-dialog .game-card-art-tile>.game-card-appraised-badge { right:9px; left:auto; }
.game-card-detail-card>.game-card-grade-mark { top:73px; left:27px; }
.game-card-detail-card>.game-card-grade-mark>strong { font-size:72px; }
.game-card-reveal-artwork>.game-card-grade-mark { top:8px; left:9px; }
.game-card-reveal-artwork>.game-card-grade-mark>strong { font-size:38px; }
.game-card-draw-result.single-reveal .game-card-reveal-artwork>.game-card-grade-mark { top:15px; left:17px; }
.game-card-draw-result.single-reveal .game-card-reveal-artwork>.game-card-grade-mark>strong { font-size:72px; }
.game-card-cinematic-preview { position:relative; }
.game-card-cinematic-preview>.game-card-grade-mark { top:67px; left:25px; }
.game-card-cinematic-preview>.game-card-grade-mark>strong { font-size:70px; }
.my-room-cinematic-card>.game-card-grade-mark { top:62px; left:24px; }
.my-room-cinematic-card>.game-card-grade-mark>strong { font-size:55px; }
.my-room-cinematic-result-card>.game-card-grade-mark { top:82px; left:28px; }
.my-room-cinematic-result-card>.game-card-grade-mark>strong { font-size:70px; }

@media (max-width:720px) {
  .my-room-dialog .game-card-art-tile>.game-card-grade-mark>strong { font-size:44px; }
  .my-room-cinematic-card>.game-card-grade-mark { top:47px; left:14px; }
  .my-room-cinematic-card>.game-card-grade-mark>strong { font-size:43px; }
}
.admin-user-actions { display:grid; grid-template-columns:1fr; gap:7px; }
.admin-resource-adjust { display:grid; grid-template-columns:72px minmax(105px,1fr) auto auto; align-items:center; gap:6px; }
.admin-resource-adjust.fragments { grid-template-columns:72px 76px minmax(90px,1fr) auto auto; }
.admin-resource-adjust>b { color:#8292a8; font-size:9px; letter-spacing:.08em; }
.admin-resource-adjust.coin>b { color:#ffd766; }
.admin-resource-adjust.fragments>b { color:#9bf0df; }
.admin-resource-adjust input,.admin-resource-adjust select { min-width:0; height:32px; margin:0; padding:5px 8px; font-size:10px; }
.admin-resource-adjust button,.admin-account-actions button { padding:7px 9px; font-size:10px; }
.admin-account-actions { display:flex; justify-content:flex-end; gap:6px; padding-top:2px; border-top:1px solid #ffffff0d; }
.admin-account-actions .admin-reset-password,.admin-account-actions .admin-delete-user { grid-column:auto; }
@media (max-width:760px) {
  .admin-user-row { grid-template-columns:1fr; }
  .admin-resource-adjust,.admin-resource-adjust.fragments { grid-template-columns:68px minmax(0,1fr) auto auto; }
  .admin-resource-adjust.fragments>select { grid-column:2; }
  .admin-resource-adjust.fragments>input { grid-column:1/3; grid-row:2; }
  .admin-resource-adjust.fragments>button { grid-row:2; }
  .admin-account-actions { flex-wrap:wrap; }
}

/* 끝말잇기 관리자 화면: 좁은 창에서도 메뉴와 내용이 서로 침범하지 않게 유지합니다. */
.admin-dialog { overflow:auto; }
.admin-wordchain-panel { container-type:inline-size; }
.admin-wordchain-layout>* { min-width:0; }
.admin-wordchain-nav { min-width:0; overflow:hidden; }
.admin-wordchain-nav button { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.admin-wordchain-nav button b,.admin-wordchain-nav button small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-wordchain-content { min-width:0; overflow:hidden; }
.admin-wordchain-content>section { min-width:0; }
.admin-wordchain-tools>* { min-width:0; }
.admin-wordchain-suggestion { min-width:0; overflow:hidden; }
.admin-wordchain-verification-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:7px; }
.admin-wordchain-verification-wrap>button { min-width:124px; padding:8px 10px; color:#b9c9db; border-color:#425675; background:#101d2d; font-size:9px; }
.admin-wordchain-verification { display:grid; min-width:0; padding:9px 11px; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px; border:1px solid #31465f; border-radius:11px; background:#0a1624; }
.admin-wordchain-verification>span { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; color:#9eacc0; background:#26364b; font-weight:900; }
.admin-wordchain-verification>div { display:grid; min-width:0; gap:2px; }
.admin-wordchain-verification b { overflow:hidden; color:#d9e3ef; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.admin-wordchain-verification small { overflow:hidden; color:#75879f; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.admin-wordchain-verification a { color:#aeb8ff; font-size:8px; font-weight:800; white-space:nowrap; }
.admin-wordchain-verification.found { border-color:#3bc69163; background:#0d2825; }
.admin-wordchain-verification.found>span { color:#baf9df; background:#157857; }
.admin-wordchain-verification.not_found { border-color:#d7ac4c66; background:#2b2412; }
.admin-wordchain-verification.not_found>span { color:#ffe9aa; background:#82641d; }
.admin-wordchain-verification.unavailable { border-color:#d2617266; background:#2a1921; }
.admin-wordchain-verification.unavailable>span { color:#ffc5ce; background:#7f3342; }
#admin-wordchain-approved { display:flex; min-height:570px; flex-direction:column; }
#admin-wordchain-approved[hidden] { display:none!important; }
.admin-wordchain-approved-head { display:flex; padding:19px 21px; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #23344d; background:#0d1a2b; }
.admin-wordchain-approved-head h3 { margin:3px 0 4px; color:#f1f5ff; font-size:19px; }
.admin-wordchain-approved-head small { color:#8091a9; }
.admin-wordchain-approved-list { display:grid; max-height:500px; padding:16px 18px; align-content:start; gap:8px; overflow:auto; }
.admin-wordchain-approved-list article { display:grid; padding:13px 14px; gap:5px; border:1px solid #38b68a55; border-radius:12px; background:linear-gradient(145deg,#112c29,#0a1924); }
.admin-wordchain-approved-list article>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.admin-wordchain-approved-list article b { color:#effff9; font-size:16px; }
.admin-wordchain-approved-list article span { padding:4px 7px; border-radius:999px; color:#abf3d5; background:#1c5946; font-size:8px; font-weight:900; }
.admin-wordchain-approved-actions { display:flex; align-items:center; gap:7px; }
.admin-wordchain-approved-actions .admin-wordchain-cancel-approval { padding:4px 8px; border-color:#d35d705e; color:#ffbec8; background:#411c28; font-size:8px; }
.admin-wordchain-approved-actions .admin-wordchain-cancel-approval:hover { border-color:#e37687; background:#5a2231; }
.admin-wordchain-approved-list article small { color:#768a9e; font-size:9px; }
.admin-wordchain-approved-list article p { margin:0; color:#a3b5c7; font-size:9px; line-height:1.5; }
#admin-wordchain-recent-list article>div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#admin-wordchain-recent-list article span { padding:3px 6px; border-radius:999px; color:#abf3d5; background:#1c5946; font-size:7px; }
#admin-wordchain-recent-list article p { margin:2px 0 0; color:#8fa0b5; font-size:8px; line-height:1.4; }

@container (max-width:760px) {
  .admin-wordchain-layout { grid-template-columns:minmax(0,1fr); }
  .admin-wordchain-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-right:0; border-bottom:1px solid #2d3d5b; }
  .admin-wordchain-nav>.eyebrow,.admin-wordchain-nav>h3,.admin-wordchain-nav>p { grid-column:1/-1; }
  .admin-wordchain-nav button { min-height:70px; }
  .admin-wordchain-content #admin-wordchain-register { grid-template-columns:minmax(0,1fr); }
  .admin-wordchain-tools { grid-template-columns:minmax(0,1fr); }
  .admin-wordchain-verification-wrap { grid-template-columns:minmax(0,1fr); }
  .admin-wordchain-verification-wrap>button { width:100%; }
  .admin-wordchain-review-actions { grid-template-columns:minmax(0,1fr) minmax(82px,.35fr) minmax(82px,.35fr); }
}

@container (max-width:520px) {
  .admin-wordchain-nav { grid-template-columns:minmax(0,1fr); }
  .admin-wordchain-nav>.eyebrow,.admin-wordchain-nav>h3,.admin-wordchain-nav>p { display:none; }
  .admin-wordchain-nav button { min-height:58px; }
  .admin-wordchain-verification { grid-template-columns:28px minmax(0,1fr); }
  .admin-wordchain-verification a { grid-column:2; }
  .admin-wordchain-review-actions { grid-template-columns:1fr 1fr; }
  .admin-wordchain-review-actions input { grid-column:1/-1; }
  .admin-wordchain-approved-head { align-items:flex-start; flex-direction:column; }
}

/* 공통 버튼 hover가 사전 메뉴의 크기를 바꾸거나 옆 패널로 번지지 않게 고정합니다. */
.admin-wordchain-nav { width:auto!important; min-width:0!important; max-width:100%!important; inline-size:auto!important; contain:paint; overflow:clip!important; }
.admin-wordchain-nav>button,.admin-wordchain-nav>button:hover:not(:disabled),.admin-wordchain-nav>button:focus-visible,.admin-wordchain-nav>button.active {
  width:100%!important; min-width:0!important; max-width:100%!important; inline-size:100%!important; max-inline-size:100%!important;
  align-self:stretch; justify-self:stretch; transform:none!important; box-sizing:border-box; overflow:hidden;
}
.admin-wordchain-suggestions { grid-auto-rows:max-content; }
.admin-wordchain-tools { grid-template-columns:150px minmax(180px,1fr) auto auto; }
.admin-wordchain-suggestion { height:auto!important; min-height:max-content; overflow:visible; grid-auto-rows:max-content; align-content:start; }
.admin-wordchain-review-actions { min-height:42px; align-items:stretch; }
.admin-wordchain-review-actions input,.admin-wordchain-review-actions button { min-height:42px; margin:0; box-sizing:border-box; }
.admin-wordchain-bulk-result { display:flex; padding:10px 18px; align-items:center; flex-wrap:wrap; gap:8px; border-bottom:1px solid #203148; background:#0a1725; }
.admin-wordchain-bulk-result[hidden] { display:none!important; }
.admin-wordchain-bulk-result>span { color:#92a5ba; font-size:9px; }
.admin-wordchain-bulk-result>span b { color:#eef5ff; }
.admin-wordchain-bulk-result .found { color:#8cebc9; }
.admin-wordchain-bulk-result .not-found { color:#f1cc6d; }
.admin-wordchain-bulk-result .unavailable { color:#ef91a0; }
.admin-wordchain-source-note { display:block; padding:7px 18px; color:#6f8198; border-bottom:1px solid #203148; background:#091522; font-size:8px; line-height:1.45; }
.admin-wordchain-bulk-actions { margin-left:auto; display:flex; flex-wrap:wrap; gap:8px; }
.admin-wordchain-bulk-actions>button { min-height:34px; padding:7px 10px; font-size:9px; }
@container (max-width:760px) {
  .admin-wordchain-tools { grid-template-columns:minmax(0,1fr); }
  .admin-wordchain-bulk-actions { width:100%; margin-left:0; }
  .admin-wordchain-bulk-actions>button { flex:1 1 180px; }
}

/* 방 만들기: 게임 선택을 로비의 맵 셀렉트처럼 보여주는 전용 화면 */
#create-dialog.room-create-dialog {
  width:min(1120px,calc(100vw - 28px));
  min-width:0;
  max-width:none;
  height:min(850px,calc(100dvh - 28px));
  max-height:calc(100dvh - 28px);
  padding:0;
  overflow:hidden;
  border-color:#7187aa66;
  border-radius:24px;
  background:#07111e;
  box-shadow:0 34px 120px #000e,0 0 0 1px #5b6d9422 inset;
}
#create-dialog.room-create-dialog::backdrop { background:#020610df; backdrop-filter:blur(9px) saturate(.75); }
.room-create-form { display:flex; height:100%; min-height:0; flex-direction:column; }
.room-create-head {
  position:relative;
  z-index:3;
  display:flex;
  flex:0 0 auto;
  min-height:104px;
  padding:22px 26px 19px 29px;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #33445f;
  background:radial-gradient(circle at 22% -90%,#705fff45,transparent 54%),linear-gradient(115deg,#13233b,#0b1627 62%,#12162e);
}
.room-create-head::after { content:""; position:absolute; right:92px; bottom:-1px; left:29px; height:1px; background:linear-gradient(90deg,#7b6cff99,transparent 60%); }
.room-create-head .eyebrow { margin:0 0 5px; color:#9a91ff; letter-spacing:.2em; font-size:9px; font-weight:1000; }
.room-create-head h2 { margin:0; color:#f5f8ff; font-size:27px; line-height:1.1; letter-spacing:-.03em; }
.room-create-head p:not(.eyebrow) { margin:6px 0 0; color:#8190a6; font-size:11px; }
.room-create-head .dialog-close { margin-top:2px; border-color:#3a4c68; color:#aebcd0; background:#17253a; }
.room-create-layout { display:grid; min-height:0; flex:1 1 auto; grid-template-columns:minmax(360px,.82fr) minmax(0,1.35fr); overflow:hidden; }
.room-game-picker {
  display:flex;
  min-width:0;
  min-height:0;
  padding:21px 20px 17px;
  flex-direction:column;
  border-right:1px solid #2a3b55;
  background:radial-gradient(circle at -5% 15%,#3c76b51f,transparent 37%),linear-gradient(165deg,#0e1d30,#08131f 67%);
}
.room-create-section-title { display:flex; min-width:0; margin:0 0 15px; align-items:center; gap:10px; }
.room-create-section-title>span { display:grid; width:31px; height:31px; flex:0 0 31px; place-items:center; border:1px solid #7468eb77; border-radius:9px; color:#b9b2ff; background:#25234d; font-size:9px; font-weight:1000; }
.room-create-section-title>div { display:grid; min-width:0; gap:1px; }
.room-create-section-title small { color:#687a93; font-size:7px; font-weight:1000; letter-spacing:.18em; }
.room-create-section-title h3 { margin:0; color:#edf3ff; font-size:16px; letter-spacing:-.03em; }
.room-create-section-title.compact { margin-bottom:12px; }
.room-create-section-title.compact>span { width:27px; height:27px; flex-basis:27px; border-radius:8px; }
.room-create-section-title.compact h3 { font-size:14px; }
.room-create-native-select { position:absolute!important; width:1px!important; height:1px!important; margin:0!important; padding:0!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; }
.room-create-native-select select { width:1px!important; height:1px!important; margin:0!important; padding:0!important; }
.room-game-map-list { display:grid; min-height:0; padding:2px; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:9px; overflow:auto; scrollbar-width:thin; scrollbar-color:#685add #101b2b; }
.room-game-map-card,.room-game-map-card:hover:not(:disabled) {
  position:relative;
  display:grid;
  min-width:0;
  min-height:104px;
  padding:12px 10px;
  grid-template-columns:39px minmax(0,1fr);
  align-items:center;
  gap:9px;
  overflow:hidden;
  text-align:left;
  transform:none;
  border:1px solid #30445f;
  border-radius:15px;
  color:#dce7f5;
  background:linear-gradient(145deg,#14253a,#0b1726);
  box-shadow:0 7px 18px #02081255,inset 0 1px #ffffff05;
  transition:border-color .18s,box-shadow .18s,filter .18s,background .18s;
}
.room-game-map-card::before { content:""; position:absolute; inset:auto -20% -55% 25%; height:90%; border-radius:50%; background:rgb(var(--game-rgb)); opacity:.08; filter:blur(16px); transition:.18s; }
.room-game-map-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,#ffffff0b,transparent 34%); }
.room-game-map-card:hover:not(:disabled) { border-color:rgba(var(--game-rgb),.55); filter:brightness(1.08); box-shadow:0 9px 24px #02081288,0 0 17px rgba(var(--game-rgb),.11); }
.room-game-map-card[aria-selected="true"],.room-game-map-card[aria-selected="true"]:hover:not(:disabled) { border-color:var(--game-accent); color:#fff; background:linear-gradient(145deg,rgba(var(--game-rgb),.22),#10192d 72%); box-shadow:0 0 0 1px rgba(var(--game-rgb),.35) inset,0 9px 25px #02081299,0 0 24px rgba(var(--game-rgb),.2); }
.room-game-map-card[aria-selected="true"]::before { opacity:.22; }
.room-game-map-icon { position:relative; z-index:1; display:grid; width:39px; height:39px; place-items:center; border:1px solid rgba(var(--game-rgb),.32); border-radius:12px; background:rgba(var(--game-rgb),.11); font-size:22px; box-shadow:inset 0 1px #ffffff12; }
.room-game-map-copy { position:relative; z-index:1; display:grid; min-width:0; grid-template-columns:auto 1fr; align-items:center; gap:2px 6px; }
.room-game-map-copy small { color:var(--game-accent); font-size:7px; font-weight:1000; }
.room-game-map-copy b { overflow:hidden; color:#eef5ff; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.room-game-map-copy em { grid-column:1/-1; overflow:hidden; color:#697c94; font-size:6px; font-style:normal; font-weight:900; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.room-game-map-marker { position:absolute; z-index:2; top:7px; right:7px; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#061019; background:var(--game-accent); box-shadow:0 0 13px rgba(var(--game-rgb),.7); font-size:9px; font-style:normal; font-weight:1000; opacity:0; transform:scale(.65); transition:.18s; }
.room-game-map-card[aria-selected="true"] .room-game-map-marker { opacity:1; transform:scale(1); }
.room-game-picker-help { display:flex; margin:12px 2px 0; align-items:center; gap:7px; color:#64768e; font-size:8px; line-height:1.45; }
.room-game-picker-help span { display:grid; width:20px; height:20px; flex:0 0 20px; place-items:center; border:1px solid #334862; border-radius:7px; color:#8e9db1; background:#111e2f; }
.room-create-config { min-width:0; min-height:0; padding:20px 21px 0; overflow:auto; scrollbar-width:thin; scrollbar-color:#685add #101b2b; background:radial-gradient(circle at 100% 0,#5f55bd18,transparent 38%),#091522; }
.room-game-preview {
  --game-accent:#42d7ff;
  --game-rgb:66,215,255;
  position:relative;
  display:grid;
  min-height:158px;
  padding:19px 20px;
  grid-template-columns:108px minmax(0,1fr);
  align-items:center;
  gap:19px;
  overflow:hidden;
  border:1px solid rgba(var(--game-rgb),.52);
  border-radius:19px;
  background:radial-gradient(circle at 12% 35%,rgba(var(--game-rgb),.25),transparent 28%),linear-gradient(125deg,rgba(var(--game-rgb),.13),#101a2c 58%,#0a1322);
  box-shadow:inset 0 1px #ffffff0e,0 14px 32px #02081272,0 0 24px rgba(var(--game-rgb),.09);
}
.room-game-preview::before { content:""; position:absolute; width:240px; height:240px; right:-85px; bottom:-165px; border:34px solid rgba(var(--game-rgb),.08); border-radius:50%; }
.room-game-preview-grid { position:absolute; inset:0; opacity:.23; background-image:linear-gradient(rgba(var(--game-rgb),.12) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--game-rgb),.12) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.room-game-preview-icon { position:relative; z-index:1; display:grid; width:100px; height:100px; place-items:center; border:1px solid rgba(var(--game-rgb),.57); border-radius:25px; background:linear-gradient(145deg,rgba(var(--game-rgb),.24),#101b2e); box-shadow:inset 0 1px #ffffff20,0 0 28px rgba(var(--game-rgb),.2); font-size:52px; }
.room-game-preview-copy { position:relative; z-index:1; display:grid; min-width:0; gap:3px; }
.room-game-preview-copy>small { color:var(--game-accent); font-size:8px; font-weight:1000; letter-spacing:.18em; }
.room-game-preview-copy h3 { margin:0; color:#f6f9ff; font-size:24px; letter-spacing:-.04em; }
.room-game-preview-copy p { max-width:520px; margin:3px 0 8px; color:#9aabc1; font-size:10px; line-height:1.5; }
.room-game-preview-tags { display:flex; flex-wrap:wrap; gap:6px; }
.room-game-preview-tags span { padding:5px 8px; border:1px solid rgba(var(--game-rgb),.27); border-radius:999px; color:#c7d3e2; background:rgba(var(--game-rgb),.08); font-size:8px; font-weight:800; }
.room-game-preview-selected { position:absolute; z-index:1; top:13px; right:14px; color:rgba(var(--game-rgb),.68); font-size:7px; font-weight:1000; letter-spacing:.16em; }
.room-create-settings { display:grid; padding:18px 2px 24px; }
.room-create-common-grid { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:11px; }
#create-dialog .room-create-field { display:grid; min-width:0; margin:0; gap:6px; color:#91a0b5; font-size:9px; font-weight:800; }
#create-dialog .room-create-field>span { padding-left:2px; }
#create-dialog .room-create-field input,#create-dialog .room-create-field select { width:100%; min-width:0; min-height:44px; margin:0; padding:10px 12px; border-color:#31455f; border-radius:11px; color:#eaf2ff; background:#0b1725; box-sizing:border-box; }
.room-create-input-unit { position:relative; }
#create-dialog .room-create-input-unit input { padding-right:34px; }
.room-create-input-unit em { position:absolute; top:50%; right:12px; color:#6e8097; font-size:9px; font-style:normal; transform:translateY(-50%); pointer-events:none; }
#create-dialog .room-create-lock-card { position:relative; display:grid; min-height:58px; margin:11px 0 0; padding:10px 13px; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid #2b405a; border-radius:13px; color:#e5edf8; background:linear-gradient(135deg,#0e1b2b,#0b1725); cursor:pointer; }
.room-create-lock-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#233047; font-size:16px; }
.room-create-lock-card>span:nth-child(2) { display:grid; gap:2px; }
.room-create-lock-card b { font-size:11px; }
.room-create-lock-card small { color:#73859c; font-size:8px; }
#create-dialog .room-create-lock-card input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.room-create-lock-card>i { position:relative; width:39px; height:22px; border:1px solid #3a4d66; border-radius:999px; background:#182538; transition:.18s; }
.room-create-lock-card>i::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#718098; box-shadow:0 2px 5px #0006; transition:.18s; }
.room-create-lock-card:has(input:checked) { border-color:#7066e880; background:linear-gradient(135deg,#24204b,#10192b); }
.room-create-lock-card:has(input:checked)>i { border-color:#8e82ff; background:#594ce0; }
.room-create-lock-card:has(input:checked)>i::after { left:20px; background:#fff; }
#create-dialog .room-create-password { margin-top:10px; padding:12px; border:1px solid #635ae45c; border-radius:13px; background:#171b35; }
#create-dialog .room-create-password small { color:#8075c9; font-size:8px; }
.room-rule-title { margin-top:18px; }
.room-create-options { min-width:0; }
#create-dialog .room-create-options .setting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
#create-dialog .room-create-options .setting-grid>label:not(.toggle-row):not(.policy-toggle-setting),#create-dialog .room-create-options>label { min-width:0; margin:0; padding:10px 11px; border:1px solid #2b3e56; border-radius:12px; color:#8fa0b6; background:#0c1827; font-size:9px; font-weight:800; }
#create-dialog .room-create-options label input,#create-dialog .room-create-options label select { width:100%; min-width:0; min-height:38px; margin:6px 0 0; padding:8px 9px; border-color:#334a65; border-radius:9px; color:#e7effa; background:#081522; box-sizing:border-box; }
#create-dialog .room-create-options .toggle-row { display:flex; min-height:42px; margin:0; padding:9px 11px; align-items:center; gap:8px; border:1px solid #2b3e56; border-radius:11px; color:#aab8ca; background:#0c1827; }
#create-dialog .room-create-options .toggle-row input { width:17px; min-height:17px; margin:0; }
#create-dialog .room-create-options .setting-grid>small,#create-dialog .room-create-options .setting-note { grid-column:1/-1; margin:0; padding:9px 11px; border-left:2px solid #5c52c9; color:#71839a; background:#101a2a; font-size:8px; line-height:1.5; }
#create-dialog .room-create-options .card-room-settings { grid-column:1/-1; margin:0; padding:11px; border-color:#4c4b8166; border-radius:13px; background:#0d1728; }
#create-dialog .room-create-options .card-room-settings legend { color:#a9a1ff; font-size:9px; }
.room-create-error { min-height:16px; margin:9px 2px 0; font-size:9px; }
.room-create-actions { display:flex; flex:0 0 auto; min-height:70px; margin:0; padding:13px 20px; align-items:center; justify-content:flex-end; gap:9px; border-top:1px solid #2c3d56; background:linear-gradient(90deg,#0c1929,#10172a); box-shadow:0 -12px 28px #02081255; }
.room-create-actions>span { display:flex; margin-right:auto; align-items:center; gap:7px; color:#687990; font-size:8px; }
.room-create-actions>span i { width:7px; height:7px; border-radius:50%; background:#4de2bd; box-shadow:0 0 9px #4de2bd; }
.room-create-actions button { min-width:92px; min-height:42px; border-radius:11px; font-weight:900; }
.room-create-actions #create-confirm { min-width:128px; border-color:#766dff; background:linear-gradient(135deg,#6658e8,#7762f6); box-shadow:0 8px 22px #5446cf55,inset 0 1px #ffffff27; }

@media(max-width:780px) {
  #create-dialog.room-create-dialog { width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); border-radius:18px; }
  .room-create-head { min-height:88px; padding:17px 17px 14px; }
  .room-create-head h2 { font-size:23px; }
  .room-create-head p:not(.eyebrow) { font-size:9px; }
  .room-create-layout { display:block; overflow:auto; }
  .room-game-picker { padding:17px 15px 15px; overflow:visible; border-right:0; border-bottom:1px solid #2a3b55; }
  .room-game-map-list { display:grid; margin:0 -1px; padding:2px 1px 8px; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(155px,45vw); gap:9px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; }
  .room-game-map-card { min-height:108px; scroll-snap-align:start; }
  .room-game-picker-help { margin-top:6px; }
  .room-game-picker-help span { transform:rotate(-90deg); }
  .room-create-config { padding:15px 14px 0; overflow:visible; }
  .room-game-preview { min-height:132px; padding:15px; grid-template-columns:78px minmax(0,1fr); gap:13px; border-radius:16px; }
  .room-game-preview-icon { width:72px; height:72px; border-radius:19px; font-size:38px; }
  .room-game-preview-copy h3 { font-size:20px; }
  .room-game-preview-copy p { font-size:9px; }
  .room-game-preview-selected { display:none; }
  .room-create-common-grid { grid-template-columns:minmax(0,1fr) 112px; }
  #create-dialog .room-create-options .setting-grid { grid-template-columns:minmax(0,1fr); }
  #create-dialog .room-create-options .setting-grid>small,#create-dialog .room-create-options .setting-note { grid-column:auto; }
  #create-dialog .room-create-options .card-room-settings { grid-column:auto; grid-template-columns:minmax(0,1fr); }
  #create-dialog .room-create-options .card-room-settings>small { grid-column:auto; }
  .room-create-actions { min-height:64px; padding:10px 13px; }
  .room-create-actions>span { display:none; }
  .room-create-actions button { min-width:78px; }
  .room-create-actions #create-confirm { min-width:116px; }
}
@media(max-width:440px) {
  .room-create-head p:not(.eyebrow) { max-width:245px; }
  .room-game-map-list { grid-auto-columns:minmax(150px,72vw); }
  .room-create-common-grid { grid-template-columns:minmax(0,1fr) 96px; }
  .room-game-preview { grid-template-columns:64px minmax(0,1fr); }
  .room-game-preview-icon { width:60px; height:60px; border-radius:16px; font-size:31px; }
  .room-game-preview-copy p { margin-bottom:6px; }
  .room-game-preview-tags span { padding:4px 6px; font-size:7px; }
}
@media(prefers-reduced-motion:reduce) {
  .room-game-map-card,.room-game-map-marker,.room-create-lock-card>i,.room-create-lock-card>i::after { transition:none; }
}

/* 마이룸 모바일: 사이드바와 작업 공간을 한 화면에 맞추고 한 곳에서만 세로 스크롤한다. */
@media (max-width:720px), (max-height:520px) and (pointer:coarse) {
  .my-room-dialog {
    inset:0;
    box-sizing:border-box;
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow:hidden;
    border:0;
    border-radius:0;
  }
  .my-room-dialog[open] { max-height:100dvh; }
  .my-room-dialog .my-room-shell {
    display:grid;
    height:100%;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
    border-radius:0;
  }
  .my-room-sidebar {
    display:grid;
    max-height:154px;
    grid-template-columns:minmax(104px,.72fr) minmax(0,1.28fr);
    gap:8px;
    padding:8px 10px;
    overflow:hidden;
    border-right:0;
    border-bottom:1px solid #ffffff12;
    box-shadow:0 8px 25px #0005;
  }
  .my-room-sidebar>header { display:none; }
  .my-room-avatar-card:not(.my-room-workbench) {
    display:grid;
    min-width:0;
    min-height:108px;
    grid-template-columns:72px minmax(0,1fr);
    grid-template-rows:1fr 1fr;
    align-items:end;
    justify-items:start;
    gap:0 7px;
    padding:7px;
    border-radius:15px;
  }
  .my-room-avatar-card:not(.my-room-workbench) #my-room-avatar {
    width:72px;
    height:92px;
    grid-row:1 / 3;
    align-self:center;
  }
  .my-room-avatar-card:not(.my-room-workbench)>b {
    max-width:100%;
    align-self:end;
    overflow:hidden;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .my-room-avatar-card:not(.my-room-workbench)>small { align-self:start; font-size:8px; }
  .my-room-equipped { min-width:0; gap:4px; margin:0; }
  .my-room-equipped>header { display:none; }
  .my-room-equipped-slots,#my-room-equipped-slots { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .my-room-equipped-slot {
    min-width:0;
    min-height:108px;
    gap:3px;
    padding:6px;
    overflow:hidden;
    border-radius:13px;
  }
  .my-room-equipped-slot>small { overflow:hidden; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
  .my-room-equipped-slot>span:not(.my-room-card-trait) { display:grid; gap:4px; }
  .my-room-equipped-slot>span>i { width:34px; height:38px; font-size:18px; }
  .my-room-equipped-slot>span b { font-size:8px; }
  .my-room-equipped-slot>span small { font-size:7px; }
  .my-room-card-trait { display:none; }

  .my-room-workspace { height:100%; grid-template-rows:auto auto minmax(0,1fr); }
  .my-room-topbar,.my-room-dialog .my-room-topbar.no-brand {
    position:relative;
    z-index:8;
    display:grid;
    min-width:0;
    gap:6px;
    padding:7px 8px;
    background:#0a1422f2;
  }
  .my-room-dialog .my-room-topbar.no-brand>div:last-child { min-width:0; gap:4px; justify-content:stretch; }
  .my-room-main-tabs { min-width:0; flex:1 1 auto; gap:3px; }
  .my-room-main-tabs button {
    min-width:0;
    min-height:40px;
    flex:1 1 0;
    padding:7px 4px;
    font-size:10px;
  }
  .my-room-topbar .dialog-close { width:40px; min-width:40px; height:40px; padding:0; }
  .my-room-currency-bar {
    min-height:42px;
    justify-content:flex-start;
    gap:4px;
    padding:4px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .my-room-currency-bar::-webkit-scrollbar { display:none; }
  .my-room-currency-bar>span { min-width:75px; flex:0 0 auto; padding:3px 6px; }
  .my-room-currency-bar .my-room-currency-coin { min-width:126px; }
  .my-room-currency-bar>span>small { font-size:7px; }
  .my-room-currency-bar>span>b { font-size:10px; }
  .my-room-sub-tabs { gap:2px; padding:5px 8px 0; }
  .my-room-sub-tabs button { min-width:0; min-height:38px; flex:1 1 0; padding:7px; }

  .my-room-content { min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
  .my-room-content>.game-card-vault-panel {
    width:100%;
    height:auto;
    min-height:100%;
    padding:9px 10px calc(18px + env(safe-area-inset-bottom));
    overflow:visible;
  }
  .my-room-content .vault-card-toolbar {
    position:relative;
    top:auto;
    padding:0 0 8px;
    background:transparent;
    backdrop-filter:none;
  }
  .vault-card-toolbar .game-card-game-tabs { display:grid; width:100%; grid-template-columns:1fr 1fr; gap:6px; }
  .vault-card-toolbar .game-card-game-tabs button { width:100%; min-width:0; min-height:42px; padding:7px; font-size:10px; }
  .my-room-card-filters,.my-room-card-filters:has(#game-card-appraisal-filter) {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px;
    padding:8px;
  }
  .my-room-card-filters label { grid-template-columns:minmax(0,1fr); gap:4px; }
  .my-room-card-filters label:last-child { grid-column:1 / -1; }
  .my-room-card-filters select { width:100%; height:38px; }
  .my-room-content .game-card-list-head { gap:4px; padding:10px 2px 7px; }
  .my-room-content .game-card-list-head small { font-size:8px; line-height:1.45; }
  .my-room-dialog .game-card-ability-group { gap:7px; padding:8px; border-radius:14px; }
  .my-room-dialog .game-card-ability-group>header { padding-bottom:7px; }
  .my-room-dialog .game-card-ability-group>header b { font-size:11px; }
  .my-room-dialog .game-card-ability-group>.game-card.game-card-art-tile {
    flex-basis:calc(50% - 4px);
    max-width:calc(50% - 4px);
    min-width:0;
    border-radius:14px;
  }
  .my-room-dialog.inventory-mode .game-card-art-tile .game-card-actions {
    right:7px;
    bottom:7px;
    left:7px;
    display:grid;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .my-room-dialog.inventory-mode .game-card-art-tile .game-card-actions button { min-height:34px; padding:6px; font-size:8px; }
  .my-room-dialog.inventory-mode .game-card-level-badge { bottom:48px; }
  .my-room-dialog .game-card-hover-trait { display:none; }
  .game-card-detail-window { width:100%; max-height:100%; padding:10px; }
  .game-card-detail-card { width:min(330px,100%); grid-template-rows:auto minmax(210px,1fr) auto auto; padding:10px; }
  .game-card-detail-card>.game-card-artwork { min-height:220px; }

  .my-room-dialog.dismantle-mode .my-room-sidebar {
    display:block;
    max-height:238px;
    padding:7px 9px;
    overflow-y:auto;
  }
  .my-room-dialog.dismantle-mode .my-room-workbench.dismantle {
    min-height:0;
    gap:6px;
    padding:9px;
    border-radius:15px;
  }
  .my-room-dialog.dismantle-mode .my-room-workbench.dismantle>small { font-size:7px; }
  .my-room-dialog.dismantle-mode .my-room-workbench.dismantle>b { font-size:13px; }
  .my-room-dialog.dismantle-mode .my-room-work-slot { min-height:68px; grid-template-columns:46px minmax(0,1fr); justify-items:start; text-align:left; padding:8px; }
  .my-room-dialog.dismantle-mode .my-room-work-slot>i { width:42px; height:48px; grid-row:1 / 3; font-size:23px; }
  .my-room-dialog.dismantle-mode .my-room-work-slot>strong { font-size:11px; }
  .my-room-dialog.dismantle-mode .my-room-work-slot>small { font-size:7px; }
  .my-room-dialog.dismantle-mode .my-room-workbench>p { display:none; }
  .my-room-dialog.dismantle-mode .my-room-work-selection { max-height:76px; grid-template-columns:1fr; }
  .my-room-dialog.dismantle-mode .my-room-dismantle-summary { position:relative; top:auto; }
  .my-room-dialog.dismantle-mode .my-room-work-action { min-height:40px; margin-top:0; font-size:10px; }
  .my-room-dialog.dismantle-mode .game-card-art-tile .game-card-actions { display:none; }

  .my-room-dialog.synthesis-mode .my-room-shell,
  .my-room-dialog.upgrade-mode .my-room-shell { display:grid; grid-template-rows:minmax(0,1fr); }
  .my-room-dialog.synthesis-mode .my-room-workspace,
  .my-room-dialog.upgrade-mode .my-room-workspace { width:100%; height:100%; }
  .my-room-dialog.synthesis-mode .my-room-sidebar,
  .my-room-dialog.upgrade-mode .my-room-sidebar {
    position:absolute;
    z-index:7;
    top:103px;
    right:0;
    bottom:0;
    left:0;
    display:block;
    width:auto;
    max-height:none;
    height:auto;
    padding:8px 10px calc(12px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    border:0;
    background:#09111d;
    box-shadow:none;
    transform:none;
  }
  .my-room-dialog.synthesis-mode .my-room-workbench.synthesis,
  .my-room-dialog.upgrade-mode .my-room-workbench.upgrade {
    width:100%;
    min-height:0;
    gap:10px;
    padding:14px 12px;
    border-radius:17px;
  }
  .my-room-dialog.synthesis-mode .my-room-work-slot { min-height:145px; }
  .my-room-dialog.synthesis-mode .my-room-work-slot>i { width:62px; height:72px; font-size:34px; }
  .my-room-dialog.synthesis-mode .my-room-work-selection.grade-picker { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .my-room-dialog.upgrade-mode .my-room-workbench.upgrade>b { font-size:18px; }
  .my-room-dialog.upgrade-mode .my-room-upgrade-slots { grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:5px; }
  .my-room-dialog.upgrade-mode .my-room-upgrade-connector { font-size:22px; }
  .my-room-dialog.upgrade-mode .my-room-upgrade-slot { min-height:175px; padding:10px 6px; }
  .my-room-dialog.upgrade-mode .my-room-upgrade-slot>i { width:62px; height:72px; border-radius:15px; font-size:32px; }
  .my-room-dialog.upgrade-mode .my-room-upgrade-slot>strong { font-size:11px; }
  .my-room-dialog.upgrade-mode .my-room-upgrade-slot>small { font-size:7px; }
  .my-room-dialog.upgrade-mode .my-room-upgrade-terms { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .my-room-dialog.upgrade-mode .my-room-work-action { min-height:46px; font-size:11px; }

  .my-room-upgrade-picker { inset:0; }
  .my-room-upgrade-picker-window {
    width:100%;
    height:100dvh;
    max-height:100dvh;
    padding:12px 10px calc(12px + env(safe-area-inset-bottom));
    border-radius:0;
  }
  .my-room-upgrade-picker-window>header b { font-size:17px; }
  .my-room-upgrade-picker-window>p { font-size:9px; }
  .my-room-upgrade-filters { grid-template-columns:1fr 1fr; gap:6px; padding:7px; }
  .my-room-upgrade-picker-list { grid-template-columns:1fr; padding:2px; }
}

.friend-mobile-menu,.friend-mobile-backdrop { display:none; }

/* 친구창 모바일: 대화 화면을 유지하고 목록은 ≡ 버튼으로 여는 서랍으로 사용한다. */
@media (max-width:700px) {
  .friends-dialog {
    inset:0;
    box-sizing:border-box;
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow:hidden;
    border:0;
    border-radius:0;
  }
  .friends-dialog[open] { display:grid; height:100dvh; max-height:100dvh; grid-template-rows:auto minmax(0,1fr); }
  .friends-dialog .hub-dialog-head { min-height:84px; padding:13px 14px; }
  .friends-dialog .hub-dialog-head h2 { font-size:20px; }
  .friends-dialog .hub-dialog-head p:not(.eyebrow) { display:none; }
  .friend-center {
    position:relative;
    display:grid;
    width:100%;
    height:100%;
    min-height:0;
    grid-template-columns:minmax(0,1fr);
    overflow:hidden;
  }
  .friend-mobile-menu {
    position:absolute;
    z-index:15;
    top:10px;
    left:10px;
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    padding:0;
    border:1px solid #756cff8f;
    border-radius:12px;
    color:#f2efff;
    background:#292354ed;
    box-shadow:0 8px 22px #0008,0 0 18px #6f60e54a;
    font-size:25px;
    font-weight:900;
    line-height:1;
  }
  .friend-mobile-backdrop {
    position:absolute;
    z-index:9;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:#020711b8;
    backdrop-filter:blur(3px);
  }
  .friend-mobile-backdrop[hidden] { display:none!important; }
  .friend-sidebar {
    position:absolute;
    z-index:12;
    top:0;
    bottom:0;
    left:0;
    width:min(86vw,340px);
    max-height:none;
    padding:62px 13px calc(16px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    border-right:1px solid #756cff4a;
    border-bottom:0;
    background:linear-gradient(160deg,#111d30,#07111d 72%);
    box-shadow:18px 0 48px #000c;
    transform:translateX(-105%);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .friends-dialog.mobile-friend-list-open .friend-sidebar { transform:translateX(0); }
  .friend-sidebar .friend-add-form { top:-62px; padding:9px 0 10px 48px; background:#101b2ce8; backdrop-filter:blur(9px); }
  .friend-chat-panel { width:100%; height:100%; min-height:0; }
  .friend-chat-empty { padding:70px 20px 20px; }
  #friend-chat-active { min-height:0; }
  #friend-chat-active>header {
    min-height:66px;
    flex-wrap:wrap;
    gap:7px;
    padding:11px 10px 10px 60px;
  }
  #friend-chat-active>header>div:nth-child(2) { min-width:0; flex:1 1 150px; }
  #friend-chat-name,#friend-chat-status { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .follow-room-button,.invite-room-button,.invite-room-button:not([hidden])~.follow-room-button {
    min-height:31px;
    margin-left:0;
    padding:5px 7px;
    font-size:8px;
  }
  .friend-chat-messages { gap:6px; padding:12px 10px; }
  .friend-chat-bubble { max-width:86%; padding:8px 10px; font-size:11px; }
  .friend-chat-form { gap:6px; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); }
  .friend-chat-form input { min-width:0; }
  .friend-chat-form button { padding-inline:12px; }
  .friend-chat-locked { grid-template-columns:minmax(0,1fr) auto; gap:7px; padding:9px 10px calc(9px + env(safe-area-inset-bottom)); }
  .friend-chat-locked>span { display:none; }
  .friend-chat-locked b { font-size:9px; }
  .friend-chat-locked small { font-size:7px; }
  .friend-chat-locked button { padding:5px 7px; font-size:8px; }
}

.my-room-mobile-menu,.my-room-mobile-backdrop { display:none; }

/* 마이룸 모바일: ≡에는 아바타·장착 정보만 두고 카드 작업은 메인 화면에 유지한다. */
@media (max-width:720px) {
  .my-room-dialog .my-room-shell { position:relative; grid-template-rows:minmax(0,1fr); }
  .my-room-dialog .my-room-sidebar,
  .my-room-dialog.dismantle-mode .my-room-sidebar,
  .my-room-dialog.synthesis-mode .my-room-sidebar,
  .my-room-dialog.upgrade-mode .my-room-sidebar {
    position:absolute;
    z-index:12;
    top:0;
    right:auto;
    bottom:0;
    left:0;
    display:block;
    width:min(87vw,350px);
    max-height:none;
    height:auto;
    padding:62px 12px calc(16px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    border-right:1px solid #756cff4a;
    border-bottom:0;
    background:radial-gradient(circle at 50% 16%,#30466c61,transparent 34%),linear-gradient(165deg,#15233a,#07111d 74%);
    box-shadow:18px 0 48px #000c;
    transform:translateX(-105%);
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .my-room-dialog.mobile-my-room-menu-open .my-room-sidebar { transform:translateX(0); }
  .my-room-mobile-menu {
    position:absolute;
    z-index:15;
    top:9px;
    left:8px;
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    padding:0;
    border:1px solid #756cff8f;
    border-radius:12px;
    color:#f2efff;
    background:#292354ed;
    box-shadow:0 8px 22px #0008,0 0 18px #6f60e54a;
    font-size:25px;
    font-weight:900;
    line-height:1;
  }
  .my-room-mobile-backdrop {
    position:absolute;
    z-index:9;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:#020711b8;
    backdrop-filter:blur(3px);
  }
  .my-room-mobile-backdrop[hidden] { display:none!important; }
  .my-room-dialog .my-room-topbar .my-room-currency-bar {
    width:calc(100% - 46px);
    margin-left:46px;
  }
  .my-room-sidebar>header { display:block; min-height:0; margin:0 0 10px; padding:0 4px; }
  .my-room-sidebar>header h2 { font-size:22px; }
  .my-room-avatar-card:not(.my-room-workbench) {
    display:grid;
    min-height:178px;
    grid-template-columns:116px minmax(0,1fr);
    grid-template-rows:1fr 1fr;
    align-items:end;
    justify-items:start;
    gap:0 10px;
    margin-bottom:10px;
    padding:10px;
    overflow:hidden;
  }
  .my-room-avatar-card:not(.my-room-workbench) #my-room-avatar {
    display:grid;
    width:116px;
    height:150px;
    grid-row:1 / 3;
    align-self:center;
    place-items:end center;
    overflow:hidden;
  }
  .my-room-avatar-card:not(.my-room-workbench) #my-room-avatar>.pg-avatar {
    width:104px;
    height:134px;
  }
  .my-room-avatar-card:not(.my-room-workbench)>b {
    width:100%;
    align-self:end;
    overflow:hidden;
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .my-room-avatar-card:not(.my-room-workbench)>small { align-self:start; font-size:9px; }
  .my-room-equipped { gap:7px; }
  .my-room-equipped>header { display:grid; }
  .my-room-equipped-slots,#my-room-equipped-slots { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .my-room-equipped-slot { min-height:118px; padding:8px; }
  .my-room-equipped-slot>small { display:block; }
  .my-room-main-workbench[hidden] { display:none!important; }
  .my-room-main-workbench:not([hidden]) {
    display:grid;
    width:calc(100% - 20px)!important;
    height:auto;
    min-height:0;
    margin:10px;
    padding:14px 12px;
    border-radius:17px;
  }
  .my-room-dialog.upgrade-mode .my-room-content,
  .my-room-dialog.synthesis-mode .my-room-content { overflow-y:auto; }
  .my-room-dialog.upgrade-mode .my-room-main-workbench.upgrade,
  .my-room-dialog.synthesis-mode .my-room-main-workbench.synthesis { position:relative; inset:auto; transform:none; }
  .my-room-dialog.dismantle-mode .my-room-workbench.dismantle,
  .my-room-dialog.synthesis-mode .my-room-workbench.synthesis,
  .my-room-dialog.upgrade-mode .my-room-workbench.upgrade {
    width:100%;
    min-height:0;
    margin:0;
  }
  .my-room-dialog.dismantle-mode .my-room-workbench.dismantle { padding:12px; }
  .my-room-dialog.dismantle-mode .my-room-work-selection { max-height:180px; }
  .my-room-dialog.synthesis-mode .my-room-workbench.synthesis,
  .my-room-dialog.upgrade-mode .my-room-workbench.upgrade { padding:14px 10px; }
  .my-room-dialog.synthesis-mode .my-room-work-selection.grade-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .my-room-dialog.upgrade-mode .my-room-upgrade-slots { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); }
}

.mobile-game-chat-toggle,.mobile-game-chat-backdrop { display:none; }

/* Mobile gameplay owns the visual viewport. Auxiliary UI becomes an on-demand sheet. */
@media (max-width:850px) {
  html:has(body.game-active) { width:100%; height:100%; overflow:hidden; }
  body.game-active {
    position:fixed;
    inset:0;
    width:100%;
    height:var(--game-viewport-height,100dvh);
    min-height:0;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body.game-active .shell {
    display:flex;
    width:100%;
    height:100%;
    min-height:0;
    flex-direction:column;
    padding:calc(4px + env(safe-area-inset-top)) 5px calc(4px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  body.game-active #app,
  body.game-active #room { width:100%; height:100%; min-height:0; overflow:hidden; }
  body.game-active #room { display:block; }
  body.game-active #room>.panel.grow {
    display:flex;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:5px;
    flex-direction:column;
    overflow:hidden;
    border-radius:15px;
  }
  body.game-active #room>.panel.grow>.section-title {
    flex:0 0 38px;
    min-height:38px;
    margin:0;
    padding:3px 216px 3px 6px;
  }
  body.game-active #room>.panel.grow>.section-title .room-actions { display:flex; }
  body.game-active #room>.panel.grow>.section-title .room-actions>button { display:none; }
  body.game-active #room>.panel.grow>.section-title .room-actions>#leave {
    position:fixed;
    z-index:95;
    top:calc(9px + env(safe-area-inset-top));
    right:82px;
    display:block;
    min-width:58px;
    min-height:34px;
    padding:5px 9px;
    border-radius:999px;
    font-size:10px;
  }
  body.tetris-active #room>.panel.grow>.section-title .room-actions>#open-tetris-keys-room {
    position:fixed;
    z-index:95;
    top:calc(9px + env(safe-area-inset-top));
    right:147px;
    display:block;
    min-width:62px;
    min-height:34px;
    padding:5px 9px;
    border-radius:999px;
    font-size:10px;
  }
  body.game-active #game { display:flex; min-height:0; flex:1; flex-direction:column; overflow:hidden; }
  body.game-active #game>.game-head { flex:0 0 auto; margin:3px 0 4px; }
  body.game-active #spectator-help { flex:0 0 auto; margin:0 0 3px; padding:3px 6px; font-size:9px; }
  body.game-active #room-avatar-stage,
  body.game-active .room-chat-panel .room-friend-button { display:none!important; }
  body.game-active #room>.room-sidebar {
    position:fixed;
    z-index:92;
    right:6px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    left:6px;
    display:block;
    width:auto;
    height:min(68vh,520px);
    min-height:260px;
    padding:0;
    visibility:hidden;
    border:1px solid #4a617c;
    border-radius:18px;
    background:#07111e;
    box-shadow:0 22px 70px #000e,0 0 0 1px #ffffff0a inset;
    opacity:0;
    transform:translateY(calc(100% + 24px));
    transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .18s,visibility .18s;
  }
  body.game-active.mobile-game-chat-open #room>.room-sidebar { visibility:visible; opacity:1; transform:none; }
  body.game-active #room>.room-sidebar .room-chat-panel {
    display:flex;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:13px;
    flex-direction:column;
    border:0;
    border-radius:inherit;
  }
  body.game-active #room>.room-sidebar .room-chat-panel h3 { flex:0 0 auto; margin:0 0 8px; padding-right:66px; }
  body.game-active #room-chat { min-height:0; height:auto; max-height:none; flex:1; }
  body.game-active #room>.room-sidebar .send { flex:0 0 auto; }
  body.game-active .mobile-game-chat-toggle {
    position:fixed;
    z-index:95;
    top:calc(9px + env(safe-area-inset-top));
    right:9px;
    display:flex;
    min-width:66px;
    min-height:34px;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:5px 9px;
    border:1px solid #49d6df80;
    border-radius:999px;
    color:#e9feff;
    background:#0d2a36ed;
    box-shadow:0 8px 24px #0009,0 0 18px #3bd5df2c;
    backdrop-filter:blur(8px);
    font-size:13px;
  }
  body.game-active .mobile-game-chat-toggle b { font-size:10px; }
  body.game-active .mobile-game-chat-toggle.has-unread {
    border-color:#ff6478;
    color:#fff;
    background:#461923f2;
    box-shadow:0 8px 24px #0009,0 0 0 2px #ff52682d,0 0 22px #ff405d70;
    animation:mobile-chat-alert 1.35s ease-in-out infinite;
  }
  body.game-active .mobile-game-chat-toggle em {
    position:absolute;
    top:-5px;
    right:-3px;
    display:grid;
    min-width:19px;
    height:19px;
    place-items:center;
    padding:0 5px;
    border:2px solid #07111e;
    border-radius:999px;
    color:#fff;
    background:#ff5268;
    font-size:8px;
    font-style:normal;
    font-weight:900;
  }
  body.game-active .mobile-game-chat-backdrop {
    position:fixed;
    z-index:90;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:#020711a8;
    backdrop-filter:blur(3px);
  }
  body.game-active .mobile-game-chat-backdrop[hidden] { display:none!important; }

  /* The waiting-room spectator switch stays compact and never occupies a roster column. */
  body:not(.game-active) #room:not([hidden])>.room-spectator-panel {
    display:flex;
    width:100%;
    min-height:0;
    margin:0 0 7px;
    padding:0;
    align-items:center;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  body:not(.game-active) #room:not([hidden])>.room-spectator-panel>section { display:none; }
  body:not(.game-active) #room:not([hidden]) .room-spectator-toggle {
    width:auto;
    min-height:34px;
    margin-left:auto;
    padding:5px 12px;
    border-radius:999px;
    font-size:10px;
  }

  body.game-active #mine-play-area,
  body.game-active #apple-play-area,
  body.game-active #tetris-play-area,
  body.game-active #poker-play-area,
  body.game-active #wordchain-play-area { min-height:0; flex:1; }
  body.mines-active #mine-play-area { display:flex; padding:4px 2px; align-items:center; justify-content:center; overflow:auto; }
  body.mines-active .mine-console { display:block; width:fit-content; height:auto; max-height:100%; min-height:0; padding:7px; overflow:auto; }
  body.mines-active .mine-board-frame { min-height:0; overflow:auto; }
  body.mines-active .mine-legend { padding:4px 5px; }

  body.apple-active #apple-play-area { display:flex; padding:1px 0 3px; flex-direction:column; overflow:hidden; }
  body.apple-active #apple-drag-info,
  body.apple-active #apple-mobile-scroll { flex:0 0 auto; }
  body.apple-active #apple-board-viewport { min-height:0; flex:1; overflow-x:auto; overflow-y:hidden; }

  body.tetris-active #tetris-play-area { display:flex; width:100%; max-width:430px; margin:0 auto; padding:3px 5px; flex-direction:column; overflow:hidden; }
  body.tetris-active .tetris-stage {
    display:grid;
    min-height:0;
    flex:1;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:68px minmax(0,1fr);
    grid-template-areas:"hold next" "board board";
    gap:4px;
    overflow:hidden;
  }
  body.tetris-active .tetris-box { min-height:0; height:68px; padding:3px; }
  body.tetris-active .tetris-box canvas { height:38px; margin:0; }
  body.tetris-active #tetris-status,
  body.tetris-active #tetris-stats { display:none; }
  body.tetris-active .tetris-main {
    width:auto;
    height:min(100%,calc(76vw * 2));
    max-width:76vw;
    max-height:100%;
    aspect-ratio:1 / 2;
    align-self:center;
  }
  body.tetris-active #tetris-board { width:100%; height:100%; }
  body.tetris-active #tetris-controls { flex:0 0 auto; margin-top:4px; gap:4px; }
  body.tetris-active #tetris-controls button { min-height:38px; padding:4px 2px; }
  body.tetris-active #tetris-opponents { display:none; }

  body.poker-active #poker-play-area,
  body.wordchain-active #wordchain-play-area { width:100%; max-height:100%; overflow:auto; overscroll-behavior:contain; }
}

@keyframes mobile-chat-alert { 0%,100% { transform:translateZ(0); } 50% { transform:translateZ(0) scale(1.035); } }

@media (max-width:850px) and (orientation:portrait) {
  body.apple-active #apple-board-viewport { touch-action:pan-x; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  body.apple-active #apple-board { touch-action:none; }
}

/* Apple landscape keeps the board playable and moves room chrome into the menu drawer. */
@media (max-width:850px) and (orientation:landscape) {
  body.apple-landscape-focus .shell {
    padding:calc(2px + env(safe-area-inset-top)) calc(2px + env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) calc(2px + env(safe-area-inset-left));
  }
  body.apple-landscape-focus #room>.panel.grow {
    padding:1px;
    border-radius:10px;
  }
  body.apple-landscape-focus #game,
  body.apple-landscape-focus #apple-play-area { width:100%; height:100%; }
  body.apple-landscape-focus #apple-play-area { position:relative; padding:0; }
  body.apple-landscape-focus #apple-drag-info {
    position:absolute;
    z-index:4;
    top:4px;
    left:50%;
    width:min(420px,calc(100% - 104px));
    height:25px;
    min-height:25px;
    min-width:0;
    margin:0;
    border-color:#b9783678;
    background:#241a0de8;
    box-shadow:0 5px 16px #0008;
    font-size:11px;
    transform:translateX(-50%);
    pointer-events:none;
  }
  body.apple-landscape-focus #apple-mobile-scroll { display:none; }
  body.apple-landscape-focus #apple-board-viewport {
    display:flex;
    width:100%;
    height:100%;
    padding:3px 46px 3px 3px;
    align-items:center;
    justify-content:flex-start;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-color:#785233 #09111d;
    scrollbar-width:thin;
    touch-action:pan-x pan-y;
  }
  body.apple-landscape-focus .apple-board[data-mobile-orientation="landscape"] {
    flex:0 0 auto;
    max-width:none;
    margin:auto;
    touch-action:none;
  }
  body.apple-landscape-focus .apple-board[data-mobile-orientation="landscape"] .apple {
    min-width:0;
    font-size:clamp(14px,4.2vh,20px);
  }

  body.apple-landscape-focus #room>.room-sidebar {
    top:calc(4px + env(safe-area-inset-top));
    right:calc(4px + env(safe-area-inset-right));
    bottom:calc(4px + env(safe-area-inset-bottom));
    left:auto;
    display:flex;
    width:min(390px,82vw);
    height:auto;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
    transform:translateX(calc(100% + 24px));
  }
  body.apple-landscape-focus.mobile-game-chat-open #room>.room-sidebar {
    visibility:visible;
    opacity:1;
    transform:none;
  }
  body.apple-landscape-focus #room>.room-sidebar>.section-title {
    display:flex;
    flex:0 0 auto;
    min-height:54px;
    margin:0;
    padding:10px 58px 9px 12px;
    align-items:center;
    border-bottom:1px solid #ffffff12;
    background:linear-gradient(135deg,#15243a,#0b1727);
  }
  body.apple-landscape-focus #room>.room-sidebar>.section-title>div:first-child {
    display:grid;
    min-width:0;
    gap:2px;
  }
  body.apple-landscape-focus #room>.room-sidebar>.section-title .eyebrow { font-size:8px; }
  body.apple-landscape-focus #room>.room-sidebar>.section-title h2 {
    overflow:hidden;
    margin:0;
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.apple-landscape-focus #room>.room-sidebar>.section-title .room-actions { margin-left:auto; }
  body.apple-landscape-focus #room>.room-sidebar>.section-title .room-actions>button { display:none; }
  body.apple-landscape-focus #room>.room-sidebar>.section-title .room-actions>#leave {
    display:block;
    min-width:54px;
    min-height:30px;
    padding:5px 8px;
    font-size:10px;
  }
  body.apple-landscape-focus #room>.room-sidebar>.game-head {
    display:grid;
    flex:0 0 auto;
    min-height:0;
    margin:0;
    padding:8px 12px;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:5px 9px;
    border-width:0 0 1px;
    border-radius:0;
    font-size:11px;
  }
  body.apple-landscape-focus #room>.room-sidebar>.game-head #scores { font-size:10px; }
  body.apple-landscape-focus #room>.room-sidebar>.game-head .game-spectator-count { min-height:28px; padding:4px 7px; font-size:9px; }
  body.apple-landscape-focus #room>.room-sidebar>.game-head .game-spectator-popover {
    top:calc(100% + 4px);
    right:6px;
    width:min(286px,calc(82vw - 18px));
  }
  body.apple-landscape-focus #room>.room-sidebar .room-chat-panel {
    height:auto;
    flex:1;
    padding:10px 12px;
  }
  body.apple-landscape-focus .mobile-game-chat-toggle {
    top:calc(7px + env(safe-area-inset-top));
    right:calc(7px + env(safe-area-inset-right));
    width:38px;
    min-width:38px;
    min-height:38px;
    padding:0;
    border-radius:11px;
    font-size:25px;
    line-height:1;
  }
  body.apple-landscape-focus .mobile-game-chat-toggle b { display:none; }
  body.apple-landscape-focus .mobile-game-chat-toggle em { top:-4px; right:-4px; }
  body.apple-landscape-focus.mobile-game-chat-open .mobile-game-chat-toggle {
    border-color:#ff7185a8;
    background:#401b28f2;
    font-size:21px;
  }
}

@media (max-width:850px) and (orientation:landscape) and (max-height:360px) {
  body.apple-landscape-focus #room>.room-sidebar>.section-title {
    min-height:46px;
    padding-top:6px;
    padding-bottom:6px;
  }
  body.apple-landscape-focus #room>.room-sidebar>.section-title .eyebrow { display:none; }
  body.apple-landscape-focus #room>.room-sidebar>.game-head { padding-top:5px; padding-bottom:5px; }
  body.apple-landscape-focus #room>.room-sidebar .room-chat-panel { padding-top:7px; padding-bottom:7px; }
  body.apple-landscape-focus #room>.room-sidebar .room-chat-panel h3 { margin-bottom:5px; font-size:12px; }
}

/* Word-chain mobile: the prompt and input stay visible while only history scrolls. */
@media (max-width:850px) {
  body.wordchain-active #wordchain-play-area {
    display:flex;
    width:100%;
    height:100%;
    max-height:none;
    gap:6px;
    margin:0;
    padding:8px;
    flex-direction:column;
    overflow:hidden;
    border-radius:14px;
  }
  body.wordchain-active .wordchain-hud { flex:0 0 auto; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 7px; }
  body.wordchain-active .wordchain-hud strong { min-height:46px; font-size:clamp(27px,9vw,38px); }
  body.wordchain-active .wordchain-hud #wordchain-required { top:12px; font-size:10px; }
  body.wordchain-active .wordchain-hud #wordchain-turn { padding:5px 7px; font-size:10px; }
  body.wordchain-active .wordchain-time { grid-column:1; gap:3px; font-size:9px; }
  body.wordchain-active .wordchain-round-time { grid-column:2; gap:3px; font-size:9px; }
  body.wordchain-active .wordchain-time-track { height:9px; }
  body.wordchain-active .wordchain-round-time-track { height:9px; }
  body.wordchain-active .wordchain-dictionary { display:none; }
  body.wordchain-active .wordchain-answer { flex:0 0 auto; max-height:48px; padding:6px 8px; font-size:9px; }
  body.wordchain-active .wordchain-form { flex:0 0 auto; gap:6px; order:3; }
  body.wordchain-active .wordchain-form input { min-height:43px; font-size:16px; }
  body.wordchain-active .wordchain-form button { min-width:70px; min-height:43px; }
  body.wordchain-active .wordchain-item-row { flex:0 0 auto; min-height:36px; gap:5px; order:4; flex-wrap:nowrap; }
  body.wordchain-active .wordchain-item-row>button { min-height:36px; padding:5px 8px; font-size:9px; }
  body.wordchain-active #use-wordchain-hint { max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.wordchain-active .wordchain-history { min-height:52px; max-height:none; flex:1; order:5; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; overflow:auto; overscroll-behavior:contain; }
  body.wordchain-active .wordchain-history li { min-width:0; padding:6px 7px; }
  body.wordchain-active .wordchain-history b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
  body.wordchain-active .wordchain-history span { font-size:8px; }
}

@media (max-width:480px) {
  body.wordchain-active .wordchain-history { grid-template-columns:minmax(0,1fr); }
}

/* Mobile waiting rooms use the same visual-viewport shell and chat sheet as live games. */
@media (max-width:850px) {
  html:has(body.mobile-room-active) { width:100%; height:100%; overflow:hidden; }
  body.mobile-room-active:not(.game-active) {
    position:fixed;
    inset:0;
    width:100%;
    height:var(--game-viewport-height,100dvh);
    min-height:0;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body.mobile-room-active:not(.game-active) .shell {
    display:flex;
    width:100%;
    height:100%;
    min-height:0;
    padding:calc(4px + env(safe-area-inset-top)) 5px calc(4px + env(safe-area-inset-bottom));
    flex-direction:column;
    overflow:hidden;
  }
  body.mobile-room-active:not(.game-active) .shell>header { display:none; }
  body.mobile-room-active:not(.game-active) #app,
  body.mobile-room-active:not(.game-active) #room { width:100%; height:100%; min-height:0; overflow:hidden; }
  body.mobile-room-active:not(.game-active) #room { display:flex!important; flex-direction:column; }
  body.mobile-room-active:not(.game-active) #room>.room-spectator-panel { flex:0 0 34px; margin:0 0 4px; }
  body.mobile-room-active:not(.game-active) #room>.panel.grow {
    display:flex;
    width:100%;
    min-height:0;
    margin:0;
    padding:5px;
    flex:1;
    flex-direction:column;
    overflow:hidden;
    border-radius:15px;
  }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title {
    flex:0 0 40px;
    min-height:40px;
    margin:0;
    padding:3px 216px 3px 6px;
  }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title h2 {
    overflow:hidden;
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .eyebrow { font-size:7px; }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>button { display:none; }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#open-room-settings,
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#leave {
    position:fixed;
    z-index:125;
    top:calc(9px + env(safe-area-inset-top));
    display:block;
    min-height:34px;
    padding:5px 9px;
    border-radius:999px;
    font-size:9px;
  }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#open-room-settings { right:147px; min-width:76px; }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#open-room-settings[hidden] { display:none!important; }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#leave { right:82px; min-width:58px; }
  body.mobile-room-active:not(.game-active) #waiting {
    display:flex;
    min-height:0;
    flex:1;
    flex-direction:column;
    overflow:hidden;
  }
  body.mobile-room-active:not(.game-active) #waiting[hidden] { display:none!important; }
  body.mobile-room-active:not(.game-active) .waiting-participants {
    display:flex;
    min-height:0;
    margin:0 0 5px;
    padding:5px 7px;
    flex:1;
    flex-direction:column;
    overflow:hidden;
  }
  body.mobile-room-active:not(.game-active) .waiting-participants h3 { flex:0 0 25px; margin:0 0 3px; font-size:12px; }
  body.mobile-room-active:not(.game-active) .waiting-participants #players {
    display:block;
    min-height:0;
    flex:1;
    overflow:auto;
    overscroll-behavior:contain;
  }
  body.mobile-room-active:not(.game-active) .waiting-participants .player {
    min-height:44px;
    padding:5px 7px;
    gap:7px;
  }
  body.mobile-room-active:not(.game-active) .waiting-participants .player-label { font-size:10px; }
  body.mobile-room-active:not(.game-active) .waiting-room-actions {
    display:grid;
    min-height:46px;
    flex:0 0 46px;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    gap:5px;
  }
  body.mobile-room-active:not(.game-active) .room-slot-button,
  body.mobile-room-active:not(.game-active) #ready-start { min-height:46px; height:46px; padding:5px 8px; font-size:10px; }
  body.mobile-room-active:not(.game-active) .room-slot-button>span:first-child { font-size:18px; }
  body.mobile-room-active:not(.game-active) .room-slot-button b { font-size:9px; }
  body.mobile-room-active:not(.game-active) .room-slot-button small { display:none; }

  body.mobile-room-active #room-avatar-stage,
  body.mobile-room-active .room-chat-panel .room-friend-button { display:none!important; }
  body.mobile-room-active #room>.room-sidebar {
    position:fixed;
    z-index:122;
    right:6px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    left:6px;
    display:block;
    width:auto;
    height:min(68vh,520px);
    min-height:260px;
    padding:0;
    visibility:hidden;
    border:1px solid #4a617c;
    border-radius:18px;
    background:#07111e;
    box-shadow:0 22px 70px #000e,0 0 0 1px #ffffff0a inset;
    opacity:0;
    transform:translateY(calc(100% + 24px));
    transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .18s,visibility .18s;
  }
  body.mobile-room-active.mobile-game-chat-open #room>.room-sidebar { visibility:visible; opacity:1; transform:none; }
  body.mobile-room-active #room>.room-sidebar .room-chat-panel {
    display:flex;
    width:100%;
    height:100%;
    min-height:0;
    margin:0;
    padding:13px;
    flex-direction:column;
    border:0;
    border-radius:inherit;
  }
  body.mobile-room-active #room>.room-sidebar .room-chat-panel h3 { flex:0 0 auto; margin:0 0 8px; padding-right:66px; }
  body.mobile-room-active #room-chat { min-height:0; height:auto; max-height:none; flex:1; }
  body.mobile-room-active #room>.room-sidebar .send { flex:0 0 auto; }
  body.mobile-room-active .mobile-game-chat-toggle {
    position:fixed;
    z-index:125;
    top:calc(9px + env(safe-area-inset-top));
    right:9px;
    display:flex;
    min-width:66px;
    min-height:34px;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:5px 9px;
    border:1px solid #49d6df80;
    border-radius:999px;
    color:#e9feff;
    background:#0d2a36ed;
    box-shadow:0 8px 24px #0009,0 0 18px #3bd5df2c;
    backdrop-filter:blur(8px);
    font-size:13px;
  }
  body.mobile-room-active .mobile-game-chat-toggle b { font-size:10px; }
  body.mobile-room-active .mobile-game-chat-toggle.has-unread { border-color:#ff6478; color:#fff; background:#461923f2; box-shadow:0 8px 24px #0009,0 0 0 2px #ff52682d,0 0 22px #ff405d70; animation:mobile-chat-alert 1.35s ease-in-out infinite; }
  body.mobile-room-active .mobile-game-chat-toggle em { position:absolute; top:-5px; right:-3px; display:grid; min-width:19px; height:19px; place-items:center; padding:0 5px; border:2px solid #07111e; border-radius:999px; color:#fff; background:#ff5268; font-size:8px; font-style:normal; font-weight:900; }
  body.mobile-room-active .mobile-game-chat-backdrop { position:fixed; z-index:120; inset:0; display:block; width:100%; height:100%; padding:0; border:0; border-radius:0; background:#020711a8; backdrop-filter:blur(3px); }
  body.mobile-room-active .mobile-game-chat-backdrop[hidden] { display:none!important; }
}

@media (max-width:370px) {
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title { padding-right:148px; }
  body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>#open-room-settings {
    top:calc(48px + env(safe-area-inset-top));
    right:8px;
  }
}

/* Mobile lobby fits the visual viewport; rooms and chat scroll inside their own panels. */
@media (max-width:850px) {
  html:has(#lobby:not([hidden])) { width:100%; height:100%; overflow:hidden; }
  body:has(#lobby:not([hidden])) { position:fixed; inset:0; width:100%; height:var(--game-viewport-height,100dvh); min-height:0; overflow:hidden; overscroll-behavior:none; }
  body:has(#lobby:not([hidden])) .shell { display:flex; width:100%; height:100%; min-height:0; padding:calc(6px + env(safe-area-inset-top)) 7px calc(6px + env(safe-area-inset-bottom)); flex-direction:column; overflow:hidden; }
  body:has(#lobby:not([hidden])) .shell>header { display:flex; min-height:46px; margin:0 0 6px; flex:0 0 46px; align-items:center; gap:6px; }
  body:has(#lobby:not([hidden])) .shell>header>div:first-child { display:grid; gap:0; }
  body:has(#lobby:not([hidden])) .shell>header>div:first-child b { font-size:17px; line-height:1; }
  body:has(#lobby:not([hidden])) .shell>header>div:first-child span { margin:3px 0 0; font-size:8px; }
  body:has(#lobby:not([hidden])) #user-bar { min-width:0; margin-left:auto; flex-wrap:nowrap; justify-content:flex-end; gap:4px; }
  body:has(#lobby:not([hidden])) #welcome { max-width:66px; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
  body:has(#lobby:not([hidden])) #wallet-button { min-height:31px; padding:4px 7px; font-size:9px; }
  body:has(#lobby:not([hidden])) #open-settings,
  body:has(#lobby:not([hidden])) #open-admin { width:32px; min-width:32px; min-height:31px; padding:0; overflow:hidden; font-size:0; }
  body:has(#lobby:not([hidden])) #open-settings::before { content:"⚙"; font-size:15px; }
  body:has(#lobby:not([hidden])) #open-admin::before { content:"🛡"; font-size:14px; }
  body:has(#lobby:not([hidden])) #app { min-height:0; flex:1; overflow:hidden; }
  body:has(#lobby:not([hidden])) #lobby { display:grid; width:100%; height:100%; min-height:0; grid-template-rows:minmax(220px,.9fr) minmax(255px,1.1fr); gap:6px; overflow:hidden; }
  body:has(#lobby:not([hidden])) #lobby>.panel.grow { display:flex; min-height:0; margin:0; padding:7px; flex-direction:column; overflow:hidden; border-radius:14px; }
  body:has(#lobby:not([hidden])) #lobby>.panel.grow>.section-title { display:grid; min-height:82px; margin:0 0 5px; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:34px 42px; gap:5px 8px; }
  body:has(#lobby:not([hidden])) #lobby>.panel.grow>.section-title>div:first-child { display:flex; min-width:0; align-items:center; gap:6px; }
  body:has(#lobby:not([hidden])) #lobby>.panel.grow>.section-title .eyebrow { font-size:8px; }
  body:has(#lobby:not([hidden])) #lobby>.panel.grow>.section-title h2 { margin:0; font-size:15px; }
  body:has(#lobby:not([hidden])) .lobby-title-actions { display:contents; }
  body:has(#lobby:not([hidden])) .lobby-room-actions { display:grid; width:100%; grid-column:1 / -1; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  body:has(#lobby:not([hidden])) .lobby-room-actions button { min-width:0; min-height:42px; padding:6px 7px; overflow:hidden; font-size:10px; line-height:1; text-overflow:clip; white-space:nowrap; }
  body:has(#lobby:not([hidden])) #open-create { min-width:112px; min-height:34px; grid-column:2; grid-row:1; justify-self:end; padding:5px 10px; border-color:#9185ff; background:linear-gradient(135deg,#6f5cf0,#4b3bc1); box-shadow:0 5px 15px #4f3ed74a; font-size:10px; font-weight:900; white-space:nowrap; }
  body:has(#lobby:not([hidden])) #rooms { min-height:0; margin:0; padding-right:1px; flex:1; align-content:start; gap:5px; overflow-y:auto; overscroll-behavior:contain; }
  body:has(#lobby:not([hidden])) .room-card { min-height:56px; padding:7px 8px; align-items:center; gap:6px; border-radius:11px; }
  body:has(#lobby:not([hidden])) .room-card>div:first-child { min-width:0; overflow:hidden; }
  body:has(#lobby:not([hidden])) .room-card .badge { font-size:8px; }
  body:has(#lobby:not([hidden])) .room-card b { font-size:11px; }
  body:has(#lobby:not([hidden])) .room-card br { display:none; }
  body:has(#lobby:not([hidden])) .room-card small { display:block; overflow:hidden; font-size:8px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
  body:has(#lobby:not([hidden])) .room-card-actions { flex-direction:row; gap:4px; }
  body:has(#lobby:not([hidden])) .room-card-actions button,
  body:has(#lobby:not([hidden])) .room-card>button { min-width:54px; min-height:34px; padding:4px 7px; font-size:9px; }

  body:has(#lobby:not([hidden])) #lobby>aside { display:grid; width:100%; min-height:0; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 45px; grid-template-areas:"chat" "dock"; gap:5px; overflow:hidden; }
  body:has(#lobby:not([hidden])) #lobby-avatar-card { display:none; }
  body:has(#lobby:not([hidden])) .lobby-avatar-preview { width:30px; height:34px; min-height:0; overflow:hidden; }
  body:has(#lobby:not([hidden])) .lobby-avatar-preview .pg-avatar { width:30px!important; height:38px!important; }
  body:has(#lobby:not([hidden])) .lobby-avatar-info { min-width:0; gap:1px; }
  body:has(#lobby:not([hidden])) .lobby-avatar-info b { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
  body:has(#lobby:not([hidden])) .lobby-avatar-info span { font-size:7px; }
  body:has(#lobby:not([hidden])) .avatar-xp-track { height:3px; }
  body:has(#lobby:not([hidden])) #lobby>aside>.panel:not(.lobby-avatar-card) { grid-area:chat; display:flex; min-height:0; margin:0; padding:7px; flex-direction:column; border-radius:12px; }
  body:has(#lobby:not([hidden])) #lobby>aside>.panel:not(.lobby-avatar-card)>h3 { min-height:24px; margin:0 0 4px; font-size:12px; }
  body:has(#lobby:not([hidden])) #online { min-height:24px; padding:3px 7px; font-size:8px; }
  body:has(#lobby:not([hidden])) #lobby-chat { min-height:0; height:auto; max-height:none; flex:1; padding:7px; overflow-y:auto; }
  body:has(#lobby:not([hidden])) #lobby-chat>div { font-size:9px; line-height:1.35; }
  body:has(#lobby:not([hidden])) #lobby>aside .send { flex:0 0 auto; gap:4px; margin-top:4px; }
  body:has(#lobby:not([hidden])) #lobby>aside .send input { min-height:34px; padding:6px 8px; font-size:11px; }
  body:has(#lobby:not([hidden])) #lobby>aside .send button { min-width:52px; min-height:34px; padding:5px 7px; font-size:9px; }
  body:has(#lobby:not([hidden])) .lobby-service-dock { grid-area:dock; display:grid; min-height:0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  body:has(#lobby:not([hidden])) .lobby-marketplace-button { display:flex; min-width:0; min-height:45px; height:45px; margin:0; padding:4px 7px; align-items:center; justify-content:center; gap:5px; border-radius:11px; }
  body:has(#lobby:not([hidden])) .lobby-marketplace-button>span:first-child { width:auto; height:auto; border:0; background:transparent; font-size:16px; }
  body:has(#lobby:not([hidden])) .lobby-marketplace-button>span:nth-child(2) { display:block; }
  body:has(#lobby:not([hidden])) .lobby-marketplace-button b { font-size:10px; }
  body:has(#lobby:not([hidden])) .lobby-marketplace-button small,
  body:has(#lobby:not([hidden])) .lobby-marketplace-button em { display:none; }
  body:has(#lobby:not([hidden])) .lobby-shortcuts { display:contents; margin:0; }
  body:has(#lobby:not([hidden])) .lobby-shortcuts button { display:flex; min-height:43px; padding:4px 7px; align-items:center; justify-content:center; gap:5px; border-radius:11px; }
  body:has(#lobby:not([hidden])) .lobby-shortcuts span { font-size:16px; }
  body:has(#lobby:not([hidden])) .lobby-shortcuts b { font-size:9px; }
  body:has(#lobby:not([hidden])) .lobby-shortcuts small { display:none; }
}

@media (max-width:850px) and (orientation:landscape) {
  body:has(#lobby:not([hidden])) .shell>header { min-height:39px; flex-basis:39px; }
  body:has(#lobby:not([hidden])) #lobby { grid-template-columns:minmax(0,1.12fr) minmax(290px,.88fr); grid-template-rows:minmax(0,1fr); }
  body:has(#lobby:not([hidden])) #lobby>.panel.grow>.section-title { min-height:75px; grid-template-rows:30px 39px; }
  body:has(#lobby:not([hidden])) #lobby>aside { height:100%; }
}

/* Tablet Tetris: keep the board large and move touch controls to the hands. */
@media (min-width:851px) {
  html[data-tetris-touch-enabled="true"]:has(body.tetris-active) { width:100%; height:100%; overflow:hidden; }
  html[data-tetris-touch-enabled="true"] body.tetris-active { position:fixed; inset:0; width:100%; height:var(--game-viewport-height,100dvh); min-height:0; overflow:hidden; overscroll-behavior:none; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .shell>header { display:none; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .shell { display:flex; width:100%; max-width:none; height:100%; min-height:0; padding:calc(4px + env(safe-area-inset-top)) 6px calc(4px + env(safe-area-inset-bottom)); flex-direction:column; overflow:hidden; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #app,
  html[data-tetris-touch-enabled="true"] body.tetris-active #room { width:100%; height:100%; min-height:0; overflow:hidden; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room { display:block; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room>.panel.grow { display:flex; width:100%; height:100%; min-height:0; margin:0; padding:5px; flex-direction:column; overflow:hidden; border-radius:15px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room>.panel.grow>.section-title { flex:0 0 38px; min-height:38px; margin:0; padding:3px 148px 3px 7px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room>.panel.grow>.section-title .room-actions>button { display:none; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room>.panel.grow>.section-title .room-actions>#leave { position:fixed; z-index:125; top:calc(9px + env(safe-area-inset-top)); right:82px; display:block; min-width:58px; min-height:34px; padding:5px 9px; border-radius:999px; font-size:10px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #game { display:flex; min-height:0; flex:1; flex-direction:column; overflow:hidden; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #game>.game-head { flex:0 0 auto; margin:3px 0 4px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room-avatar-stage,
  html[data-tetris-touch-enabled="true"] body.tetris-active .room-chat-panel .room-friend-button { display:none!important; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room>.room-sidebar { position:fixed; z-index:122; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); left:8px; display:block; width:auto; height:min(68vh,560px); min-height:280px; padding:0; visibility:hidden; border:1px solid #4a617c; border-radius:18px; background:#07111e; box-shadow:0 22px 70px #000e,0 0 0 1px #ffffff0a inset; opacity:0; transform:translateY(calc(100% + 24px)); transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .18s,visibility .18s; }
  html[data-tetris-touch-enabled="true"] body.tetris-active.mobile-game-chat-open #room>.room-sidebar { visibility:visible; opacity:1; transform:none; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room>.room-sidebar .room-chat-panel { display:flex; width:100%; height:100%; min-height:0; margin:0; padding:13px; flex-direction:column; border:0; border-radius:inherit; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room>.room-sidebar .room-chat-panel h3 { flex:0 0 auto; margin:0 0 8px; padding-right:66px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room-chat { min-height:0; height:auto; max-height:none; flex:1; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #room>.room-sidebar .send { flex:0 0 auto; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .mobile-game-chat-toggle { position:fixed; z-index:125; top:calc(9px + env(safe-area-inset-top)); right:9px; display:flex; min-width:66px; min-height:34px; align-items:center; justify-content:center; gap:5px; padding:5px 9px; border:1px solid #49d6df80; border-radius:999px; color:#e9feff; background:#0d2a36ed; box-shadow:0 8px 24px #0009,0 0 18px #3bd5df2c; backdrop-filter:blur(8px); font-size:13px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .mobile-game-chat-toggle b { font-size:10px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .mobile-game-chat-toggle.has-unread { border-color:#ff6478; color:#fff; background:#461923f2; box-shadow:0 8px 24px #0009,0 0 0 2px #ff52682d,0 0 22px #ff405d70; animation:mobile-chat-alert 1.35s ease-in-out infinite; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .mobile-game-chat-toggle em { position:absolute; top:-5px; right:-3px; display:grid; min-width:19px; height:19px; place-items:center; padding:0 5px; border:2px solid #07111e; border-radius:999px; color:#fff; background:#ff5268; font-size:8px; font-style:normal; font-weight:900; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .mobile-game-chat-backdrop { position:fixed; z-index:120; inset:0; display:block; width:100%; height:100%; padding:0; border:0; border-radius:0; background:#020711a8; backdrop-filter:blur(3px); }
  html[data-tetris-touch-enabled="true"] body.tetris-active .mobile-game-chat-backdrop[hidden] { display:none!important; }

  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-play-area { position:relative; display:flex; width:100%; max-width:760px; min-height:0; margin:0 auto; padding:3px 5px; flex:1; flex-direction:column; overflow:hidden; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-stage { display:grid; min-height:0; flex:1; grid-template-columns:90px minmax(240px,360px) 90px; justify-content:center; align-items:center; gap:8px; overflow:hidden; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-main { width:auto; height:min(100%,720px); max-width:100%; max-height:100%; aspect-ratio:1 / 2; align-self:center; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-board { width:100%; height:100%; max-width:none; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-box { min-width:0; min-height:0; max-height:100%; padding:5px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-box canvas { width:100%; max-width:90px; height:auto; max-height:300px; object-fit:contain; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-status,
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-stats { overflow:hidden; font-size:9px; line-height:1.25; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-items { width:min(500px,64vw); margin:4px auto 0; flex:0 0 auto; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-controls { width:min(720px,100%); margin:4px auto 0; flex:0 0 auto; gap:5px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-controls button { min-height:48px; padding:5px 4px; font-size:17px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-help,
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-opponents { display:none; }
}

@media (min-width:851px) and (orientation:landscape) {
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-play-area { max-width:none; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-stage { width:min(600px,60vw); height:100%; margin:0 auto; grid-template-columns:minmax(72px,90px) minmax(250px,360px) minmax(72px,90px); gap:8px; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-main { height:min(760px,calc(var(--game-viewport-height,100dvh) - 130px)); max-height:100%; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-items { width:min(430px,46vw); }
}

/* Tetris touch controls are an opt-in mobile layer. Desktop keeps its original board layout. */
.settings-tetris-touch-actions { display:flex; min-width:0; align-items:center; justify-content:flex-end; gap:8px; }
.settings-tetris-touch-actions>button { min-height:40px; white-space:nowrap; }
.tetris-touch-switch { display:flex!important; min-height:40px; margin:0!important; padding:7px 10px; align-items:center; gap:8px; border:1px solid #34506b; border-radius:11px; color:#dce9f7; background:#0b1726; cursor:pointer; white-space:nowrap; }
.tetris-touch-switch input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.tetris-touch-switch i { position:relative; display:block; width:38px; height:22px; flex:0 0 auto; border:1px solid #50627a; border-radius:999px; background:#182439; transition:.18s; }
.tetris-touch-switch i::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#8491a5; box-shadow:0 2px 6px #0008; transition:.18s; }
.tetris-touch-switch input:checked+i { border-color:#45dcd0; background:#164f52; box-shadow:0 0 14px #45ddd044 inset; }
.tetris-touch-switch input:checked+i::after { left:19px; background:#75fff2; }
.tetris-touch-switch span { font-size:11px; font-weight:900; }
.pause-tetris-touch-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px; }
.pause-tetris-touch-row>button { min-height:40px!important; }

.tetris-touch-editor-dialog { width:min(940px,calc(100vw - 24px)); height:min(900px,calc(100dvh - 20px)); max-height:calc(100dvh - 20px); padding:0; overflow:hidden; border-color:#53698b; border-radius:22px; background:linear-gradient(155deg,#111d31,#07111e); }
.tetris-touch-editor-dialog form { display:grid; width:100%; height:100%; min-height:0; grid-template-areas:"editor-head" "editor-toolbar" "editor-stage" "editor-help" "editor-actions"; grid-template-rows:auto auto minmax(0,1fr) auto auto; overflow:hidden; }
.tetris-touch-editor-dialog header { grid-area:editor-head; display:flex; padding:18px 20px 14px; align-items:flex-start; justify-content:space-between; gap:14px; border-bottom:1px solid #ffffff10; background:radial-gradient(circle at 0 0,#624ee63d,transparent 42%); }
.tetris-touch-editor-dialog header h2 { margin:3px 0 4px; }
.tetris-touch-editor-dialog header p:not(.eyebrow) { margin:0; color:#8798ae; font-size:10px; }
.tetris-touch-editor-toolbar { grid-area:editor-toolbar; display:grid; padding:10px 14px; grid-template-columns:auto auto minmax(240px,1fr); align-items:center; gap:12px; border-bottom:1px solid #253650; background:#0b1727; }
.tetris-touch-editor-toolbar>div { display:flex; gap:6px; }
.tetris-touch-editor-toolbar button { min-height:38px; padding:7px 12px; }
.tetris-touch-editor-toolbar button.active { border-color:#6dece2; color:#eefffd; background:#15505a; box-shadow:0 0 15px #48e2d337; }
.tetris-touch-editor-toolbar label { display:grid; margin:0; grid-template-columns:auto minmax(100px,1fr) 44px; align-items:center; gap:9px; color:#aebdd0; font-size:10px; }
.tetris-touch-editor-toolbar input { width:100%; margin:0; accent-color:#7567ef; }
.tetris-touch-editor-toolbar b { color:#8af0e5; text-align:right; font-size:10px; }
.tetris-touch-next-direction { align-items:center; padding-left:10px; border-left:1px solid #2a3c56; }
.tetris-touch-next-direction>span { color:#8495aa; font-size:9px; font-weight:1000; letter-spacing:.08em; }
.tetris-touch-next-direction button { min-height:34px; padding-inline:9px; }
.tetris-touch-editor-stage { container-type:size; grid-area:editor-stage; display:flex; min-width:0; min-height:0; padding:10px 12px; align-items:center; justify-content:center; overflow:hidden; }
.tetris-touch-editor-preview { container-type:size; position:relative; width:min(100cqw,177.778cqh,880px); min-width:0; min-height:0; max-width:100%; max-height:100%; margin:0; overflow:hidden; flex:0 0 auto; border:0; border-radius:18px; background:radial-gradient(circle at 50% 45%,#273759,#0a1322 62%); box-shadow:inset 0 0 0 1px #344a67,inset 0 0 45px #0008; aspect-ratio:16 / 9; touch-action:none; }
.tetris-touch-editor-preview.portrait { width:min(100cqw,56.25cqh,430px); aspect-ratio:9 / 16; }
.tetris-touch-editor-board,.tetris-touch-editor-panel,.tetris-touch-editor-item { position:absolute; z-index:1; top:var(--editor-y); left:var(--editor-x); touch-action:none; transform:translate(-50%,-50%) scale(var(--editor-scale)); transform-origin:center; user-select:none; cursor:grab; }
.tetris-touch-editor-board:active,.tetris-touch-editor-panel:active,.tetris-touch-editor-item:active { cursor:grabbing; }
.tetris-touch-editor-board { width:auto; height:90%; aspect-ratio:1 / 2; border:2px solid #7485b3; border-radius:8px; background:repeating-linear-gradient(0deg,#ffffff09 0 1px,transparent 1px 5%),repeating-linear-gradient(90deg,#ffffff09 0 1px,transparent 1px 10%),#0c1628; box-shadow:0 0 24px #7683ff23; }
.portrait .tetris-touch-editor-board { height:62%; }
.tetris-touch-editor-board span { position:absolute; top:50%; left:50%; color:#73819a; font-size:8px; font-weight:900; letter-spacing:.13em; transform:translate(-50%,-50%) rotate(-90deg); }
.tetris-touch-editor-board i { position:absolute; right:-5px; bottom:0; left:-5px; height:3px; background:#55e3d4; box-shadow:0 0 14px #55e3d4; }
.tetris-touch-editor-panel { display:grid; width:12%; height:26%; min-width:0; min-height:0; padding:1cqh .5cqw; place-items:center; overflow:hidden; border:1px solid #566985; border-radius:10px; color:#b9c7ed; background:#111c31e8; box-shadow:0 8px 18px #0007; text-align:center; }
.tetris-touch-editor-panel.next { height:55%; }
.tetris-touch-editor-panel.next.horizontal { width:30%; height:18%; }
.tetris-touch-editor-panel b { font-size:8px; letter-spacing:.08em; }
.tetris-touch-editor-panel span { color:#6e83ad; font-size:10px; line-height:1.05; white-space:pre-line; }
.portrait .tetris-touch-editor-panel { width:32%; height:10%; }
.portrait .tetris-touch-editor-panel.next:not(.horizontal) { width:22%; height:26%; }
.portrait .tetris-touch-editor-panel.next.horizontal { width:32%; height:10%; }
.tetris-touch-editor-item { display:flex; width:26%; height:9%; min-width:0; min-height:0; padding:1cqh 1cqw; align-items:center; justify-content:center; overflow:hidden; border:1px solid #407a71; border-radius:10px; color:#b9ede3; background:#0e302ee8; box-shadow:0 8px 18px #0007; font-size:1.8cqw; font-weight:900; white-space:nowrap; }
.portrait .tetris-touch-editor-item { width:54%; height:6%; font-size:3.2cqw; }
.tetris-touch-editor-controls { position:absolute; z-index:2; inset:0; pointer-events:none; }
.tetris-touch-editor-controls button { position:absolute; left:var(--editor-x); top:var(--editor-y); width:13%; height:11%; min-width:0; min-height:0; padding:1cqh .5cqw; border-color:#61708d; color:#eff4ff; background:#273453e8; box-shadow:0 8px 18px #0008; pointer-events:auto; font-size:2.3cqw; touch-action:none; transform:translate(-50%,-50%) scale(var(--editor-scale)); transform-origin:center; user-select:none; cursor:grab; }
.portrait .tetris-touch-editor-controls button { width:19%; height:7%; min-width:0; min-height:0; padding:1cqh .5cqw; font-size:4cqw; }
.tetris-touch-editor-controls button:hover:not(:disabled),.tetris-touch-editor-controls button:active:not(:disabled),.tetris-touch-editor-controls button:focus-visible { transform:translate(-50%,-50%) scale(var(--editor-scale))!important; }
.tetris-touch-editor-controls button:active { cursor:grabbing; }
.tetris-touch-editor-board.selected,.tetris-touch-editor-panel.selected,.tetris-touch-editor-item.selected,.tetris-touch-editor-controls button.selected { z-index:3; border-color:#7af8ed; color:white; background-color:#17626c; box-shadow:0 0 0 3px #65eade38,0 0 22px #4fe6d56b; outline:none; }
.tetris-touch-editor-help { grid-area:editor-help; margin:0 16px 4px; color:#8090a7; text-align:center; font-size:9px; }
.tetris-touch-editor-help b { display:inline-block; margin-left:5px; color:#75e9df; font-size:inherit; }
.tetris-touch-editor-dialog menu { grid-area:editor-actions; margin:0; padding:10px 16px 16px; }

html[data-tetris-touch-enabled="false"] body.tetris-active #tetris-controls { display:none!important; }
html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-play-area { container-type:size; position:relative; padding:0!important; }
html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-stage { position:static!important; }
html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-main,
html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-stage>.tetris-box { position:absolute!important; top:var(--touch-layout-y)!important; left:var(--touch-layout-x)!important; margin:0!important; transform:translate(-50%,-50%) scale(var(--touch-layout-scale,1)); transform-origin:center; }
html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-main { z-index:4; }
html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-stage>.tetris-box { z-index:5; }
html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-items { position:absolute!important; z-index:6; top:var(--touch-layout-y)!important; left:var(--touch-layout-x)!important; width:54%!important; height:6%!important; min-width:0!important; min-height:0!important; margin:0!important; transform:translate(-50%,-50%) scale(var(--touch-layout-scale,1)); transform-origin:center; }
html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-items>button { width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; margin:0!important; padding:1cqh 1cqw!important; font-size:3.2cqw!important; }
html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-controls { position:absolute!important; z-index:7; inset:0!important; display:block!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; pointer-events:none; }
html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-controls button { position:absolute!important; left:var(--touch-x)!important; top:var(--touch-y)!important; width:19%!important; height:7%!important; min-width:0!important; min-height:0!important; max-height:none!important; margin:0!important; padding:1cqh .5cqw!important; justify-self:auto!important; pointer-events:auto; font-size:4cqw!important; touch-action:none; transform:translate(-50%,-50%) scale(var(--touch-scale)); transform-origin:center; }
html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-controls button.pressed { transform:translate(-50%,-50%) scale(var(--touch-scale)); filter:brightness(1.28); }

/* Tetris settings remains reachable even when an iPad reports a desktop-class viewport. */
html.touch-device body.tetris-active #room>.panel.grow>.section-title .room-actions>#open-tetris-keys-room,
html[data-tetris-touch-enabled="true"] body.tetris-active #room>.panel.grow>.section-title .room-actions>#open-tetris-keys-room { position:fixed; z-index:125; top:calc(9px + env(safe-area-inset-top)); right:147px; display:block!important; min-width:68px; min-height:34px; padding:5px 9px; border-radius:999px; font-size:10px; }

@media (orientation:landscape) {
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-play-area { max-width:none!important; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-main { width:auto!important; height:90%!important; max-width:none!important; max-height:90%!important; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-stage>.tetris-box:first-child { width:12%!important; height:26%!important; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-stage>.tetris-box:last-child { width:12%!important; height:55%!important; }
  html[data-tetris-touch-enabled="true"][data-tetris-next-direction="horizontal"] body.tetris-active .tetris-stage>.tetris-box:last-child { width:30%!important; height:18%!important; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-items { width:26%!important; height:9%!important; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-items>button { font-size:1.8cqw!important; }
  html[data-tetris-touch-enabled="true"] body.tetris-active #tetris-controls button { width:13%!important; height:11%!important; min-height:0!important; font-size:2.3cqw!important; }
}

@media (orientation:portrait) {
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-main { width:auto!important; height:62%!important; max-width:none!important; max-height:62%!important; }
  html[data-tetris-touch-enabled="true"] body.tetris-active .tetris-stage>.tetris-box { width:32%!important; height:10%!important; min-height:0!important; }
  html[data-tetris-touch-enabled="true"][data-tetris-next-direction="vertical"] body.tetris-active .tetris-stage>.tetris-box:last-child { width:22%!important; height:26%!important; }
}

@media (max-width:700px) {
  .settings-tetris-touch-actions { align-items:stretch; flex-direction:column; }
  .settings-tetris-touch-actions>button,.tetris-touch-switch { width:100%; justify-content:center; }
  .tetris-touch-editor-dialog { width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); }
  .tetris-touch-editor-dialog header { padding:13px 14px 10px; }
  .tetris-touch-editor-dialog header h2 { font-size:18px; }
  .tetris-touch-editor-dialog header p:not(.eyebrow) { font-size:9px; }
  .tetris-touch-editor-toolbar { grid-template-columns:1fr 1fr; padding:8px 10px; gap:7px; }
  .tetris-touch-editor-toolbar>.tetris-touch-orientation { display:grid; grid-template-columns:1fr 1fr; }
  .tetris-touch-next-direction { display:grid!important; grid-template-columns:auto 1fr 1fr; padding-left:7px; }
  .tetris-touch-editor-toolbar>label { grid-column:1 / -1; }
  .tetris-touch-editor-toolbar button { min-width:0; }
  .tetris-touch-editor-stage { padding:7px 8px; }
  .tetris-touch-editor-help { margin-inline:8px; font-size:8px; }
  .tetris-touch-editor-dialog menu { padding:7px 10px 10px; }
  .tetris-touch-editor-dialog menu button { min-width:0; padding-inline:9px; font-size:9px; }
}

.admin-dialog[open] { display:grid; height:min(820px,calc(100dvh - 28px)); grid-template-rows:auto auto minmax(0,1fr); }
.admin-dialog[open]>.admin-panel { display:none!important; min-height:0; overflow:auto; }
.admin-dialog[open]>.admin-panel.admin-panel-active { display:block!important; }
.admin-dialog[open]:has(>.admin-tabs>[data-admin-tab="users"].active)>#admin-users-panel,
.admin-dialog[open]:has(>.admin-tabs>[data-admin-tab="chat"].active)>#admin-chat-policy-panel,
.admin-dialog[open]:has(>.admin-tabs>[data-admin-tab="announcements"].active)>#admin-announcements-panel,
.admin-dialog[open]:has(>.admin-tabs>[data-admin-tab="patches"].active)>#admin-patches-panel,
.admin-dialog[open]:has(>.admin-tabs>[data-admin-tab="rooms"].active)>#admin-rooms-panel,
.admin-dialog[open]:has(>.admin-tabs>[data-admin-tab="wordchain"].active)>#admin-wordchain-panel { display:block!important; }
.admin-chat-policy-card { width:min(760px,100%); margin:4px auto; padding:24px; border:1px solid #5c7ce45e; border-radius:18px; background:radial-gradient(circle at 100% 0,#5547c440,transparent 34%),linear-gradient(155deg,#111f35,#0a1423); box-shadow:0 22px 52px #0007; }
.admin-chat-policy-card>header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.admin-chat-policy-card h3 { margin:5px 0 7px; color:#f3f5ff; font-size:24px; }
.admin-chat-policy-card header p { margin:0; color:#9baac1; line-height:1.55; }
.admin-chat-policy-card>header>span { flex:0 0 auto; padding:6px 9px; border:1px solid #59d6b75c; border-radius:999px; color:#8eefd4; background:#173b365e; font-size:9px; }
.admin-chat-terms { display:grid; margin-top:20px; gap:6px; color:#e6edff; }
.admin-chat-terms small { color:#8797ae; font-size:10px; line-height:1.45; }
.admin-chat-terms textarea { width:100%; margin:2px 0 0; resize:vertical; color:#edf2ff; border-color:#40577a; background:#071321; line-height:1.55; }
.admin-chat-terms>b { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.admin-chat-blocked-count { padding:3px 7px; border:1px solid #8174ed55; border-radius:999px; color:#bcb4ff; background:#4f42a32e; font-size:9px; font-weight:600; }
.admin-chat-term-add { display:grid; margin-top:5px; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.admin-chat-term-add input { min-width:0; margin:0; }
.admin-chat-term-add button { min-width:72px; }
.admin-chat-blocked-list { display:grid; height:190px; min-height:190px; max-height:190px; margin-top:8px; padding:8px; grid-auto-rows:max-content; align-content:start; gap:6px; overflow-x:hidden; overflow-y:auto; border:1px solid #ffffff12; border-radius:12px; background:#071321; scrollbar-gutter:stable; }
.admin-chat-blocked-list>div { display:flex; min-width:0; padding:7px 8px 7px 11px; align-items:center; justify-content:space-between; gap:10px; border:1px solid #ffffff0d; border-radius:9px; color:#e9efff; background:#101d30; }
.admin-chat-blocked-list>div span { min-width:0; overflow-wrap:anywhere; }
.admin-chat-blocked-list>div button { padding:5px 8px; font-size:9px; }
.admin-chat-blocked-empty { margin:10px; color:#75859c; text-align:center; }
.admin-chat-rule-grid { display:grid; margin-top:15px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.admin-chat-rule-grid>label { display:grid; margin:0; padding:11px; align-content:center; gap:6px; border:1px solid #ffffff12; border-radius:12px; color:#aab8cb; background:#0a1727; font-size:10px; }
.admin-chat-rule-grid>label.toggle-row { display:flex; align-items:center; color:#e4ebf8; }
.admin-chat-rule-grid>label>div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; }
.admin-chat-rule-grid input[type="number"] { width:100%; min-width:0; margin:0; }
.admin-chat-rule-grid small { color:#7f8da3; }
.admin-chat-policy-card>footer { display:flex; margin-top:15px; align-items:center; justify-content:flex-end; gap:12px; }
.admin-chat-policy-card>footer>span { margin-right:auto; color:#91a2ba; font-size:10px; }
.admin-user-chat-status { width:max-content; margin-top:4px; padding:4px 7px; border:1px solid #4fd3a04a; border-radius:999px; color:#84e5c0!important; background:#10332870; }
.admin-user-chat-status.muted { border-color:#ff65745c; color:#ff9ca7!important; background:#46192370; }
.admin-chat-user-actions { display:grid; grid-template-columns:72px 84px minmax(120px,1fr) auto auto; align-items:center; gap:6px; }
.admin-chat-user-actions>b { color:#ff9aa7; font-size:9px; letter-spacing:.08em; }
.admin-chat-user-actions input { min-width:0; height:32px; margin:0; padding:5px 8px; font-size:10px; }
.admin-chat-user-actions button { padding:7px 9px; font-size:10px; }

/* User management keeps everyday actions visible and destructive actions folded away. */
.admin-user-list { gap:12px; padding:2px; }
.admin-user-row {
  padding:0;
  grid-template-columns:minmax(190px,.7fr) minmax(0,1.8fr);
  align-items:stretch;
  overflow:hidden;
  border-color:#31445e;
  background:linear-gradient(135deg,#0d192a,#091321);
  box-shadow:0 10px 24px #0003;
}
.admin-user-profile {
  display:grid;
  min-width:0;
  padding:17px 16px;
  align-content:start;
  gap:5px;
  border-right:1px solid #ffffff0e;
  background:linear-gradient(145deg,#14233a,#0b1727);
}
.admin-user-profile>b { font-size:15px; }
.admin-user-profile>strong { margin-top:3px; }
.admin-user-actions { padding:13px; gap:9px; }
.admin-resource-adjust,.admin-chat-user-actions {
  padding:9px 10px;
  border:1px solid #ffffff0e;
  border-radius:10px;
  background:#071321b8;
}
.admin-account-actions {
  display:grid;
  padding-top:9px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7px;
}
.admin-account-actions>button { min-height:34px; }
.admin-account-danger {
  grid-column:1 / -1;
  overflow:hidden;
  border:1px solid #8d4c5538;
  border-radius:10px;
  background:#2a11162e;
}
.admin-account-danger>summary {
  padding:8px 10px;
  color:#b98f96;
  cursor:pointer;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  list-style-position:inside;
}
.admin-account-danger[open]>summary { color:#ffabb4; background:#4a1b2442; }
.admin-account-danger-panel {
  display:grid;
  padding:8px 10px 10px;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:7px;
  border-top:1px solid #ffffff0c;
}
.admin-account-danger-panel>small { color:#9f7e84; font-size:8px; line-height:1.4; }
.admin-account-danger-panel>button { min-height:32px; padding:6px 9px; font-size:9px; }

@media (max-width:760px) {
  .admin-chat-policy-card { padding:17px 14px; }
  .admin-chat-policy-card>header { flex-direction:column; gap:8px; }
  .admin-chat-blocked-list { height:150px; min-height:150px; max-height:150px; }
  .admin-chat-rule-grid { grid-template-columns:1fr 1fr; }
  .admin-chat-policy-card>footer { align-items:stretch; flex-direction:column; }
  .admin-chat-policy-card>footer>span { margin-right:0; }
  .admin-chat-user-actions { grid-template-columns:68px minmax(0,1fr) auto auto; }
  .admin-chat-user-actions input[placeholder] { grid-column:1 / -1; grid-row:2; }
  .admin-user-row { grid-template-columns:1fr; }
  .admin-user-profile { border-right:0; border-bottom:1px solid #ffffff0e; }
  .admin-account-danger-panel { grid-template-columns:1fr 1fr; }
  .admin-account-danger-panel>small { grid-column:1 / -1; }
}

/* Final compact settings overrides (kept after all responsive game rules). */
#settings-dialog { width:min(600px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:22px; overflow-y:auto; overscroll-behavior:contain; }
#settings-dialog>form>h2 { margin:0; font-size:22px; }
.settings-account-links { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 16px; margin:14px 0 10px; padding:12px 14px; }
.settings-account-links>div:first-child small { max-width:310px; font-size:9px; }
.account-link-buttons { display:flex; gap:6px; margin:0; }
.account-link-buttons button { width:128px; min-height:38px; padding:6px 9px; grid-template-columns:24px 1fr; column-gap:7px; border-radius:9px; font-size:11px; }
.account-link-buttons button>span { width:22px; height:22px; font-size:11px; }
.account-link-buttons button>small { font-size:8px; }
.settings-account-links>.error { grid-column:1 / -1; margin:0; }
#settings-dialog .settings-character,#settings-dialog .settings-tetris-touch { margin:8px 0; padding:11px 12px; }
#settings-dialog .settings-actions { margin:10px 0 6px; gap:6px; }
#settings-dialog .settings-actions button { min-height:36px; padding:7px 10px; border-radius:8px; font-size:11px; }
#settings-dialog #settings-logout { grid-column:1 / -1; min-height:34px; margin-top:2px; color:#ff9daa; border-color:#7a2d3a88; background:#35151c; text-align:center; }
#settings-dialog menu { margin:12px 0 0; }
#settings-dialog menu button { min-height:36px; padding:7px 18px; }
@media (max-width:560px) {
  #settings-dialog { padding:17px 14px; }
  .settings-account-links { grid-template-columns:1fr; }
  .settings-account-links>div:first-child small { max-width:none; }
  .account-link-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-link-buttons button { width:100%; }
  #settings-dialog .settings-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:380px) {
  .account-link-buttons,#settings-dialog .settings-actions { grid-template-columns:1fr; }
  #settings-dialog #settings-logout { grid-column:auto; }
}