/* Layout matched to the approved six-screen concept board. */
:root { --nav-height: 76px; }
body { background: radial-gradient(ellipse at 50% 0, #0b2830, #02090c 65%); }
.app-shell { border: 1px solid #28515a; }
.screen { padding: 22px 18px 30px; }
.home-screen, .list-screen, .profile-screen { padding-bottom: calc(var(--nav-height) + 28px + env(safe-area-inset-bottom)); }
.home-screen { display: block; background: radial-gradient(ellipse at 100% 0, #10353d, transparent 42%), repeating-linear-gradient(90deg, transparent 0 69px, #16bbd005 70px 71px), #041217; }
.home-topbar { height: 48px; border: 0; }
.home-topbar .brand-mark { font-size: 32px; font-weight: 900; letter-spacing: .06em; color: #ebfbff; text-shadow: 0 2px 0 #28515a; }
.home-topbar .brand-dot { display: none; }
.home-top-actions { gap: 6px; }
.home-top-actions button { width: 32px; height: 32px; border-radius: 50%; }
.dashboard-greeting { padding: 5px 0 19px; }
.dashboard-greeting p { color: #bdd3d6; font-size: 13px; margin: 0; letter-spacing: .06em; }
.welcome-line { display: block; font-size: 11px; color: #769ba3; margin-top: 7px; }
.data-panel { padding: 14px 15px 17px; border: 1px solid #31808b; border-radius: 5px 17px 5px 17px; background: linear-gradient(135deg,#0d343dd4,#061b22d9); box-shadow: inset 0 0 20px #00deef09, 0 0 0 3px #061c23; position: relative; }
.data-panel::before, .featured-game-card::before { content: ''; position: absolute; top: -1px; left: 18px; width: 54px; height: 2px; background: #6ce8fa; box-shadow: 0 0 9px #16e6ef; }
.panel-caption { margin: 0; font-size: 13px; color: #c2eff5; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.panel-caption span { color: #577d88; font-size: 8px; letter-spacing: .1em; font-weight: 400; }
.dashboard-stats { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 20px 0 0; }
.dashboard-stats strong { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-shadow: none; }
.dashboard-stats span { color: #9ab8be; font-size: 11px; }
.dashboard-stats div + div { border-color: #1c414b; }
.featured-game-card { position: relative; display: block; padding: 0; margin-top: 19px; border: 1px solid #2c7783; border-radius: 5px 18px 5px 18px; background: #05151b; box-shadow: 0 0 0 4px #071d25, inset 0 0 25px #0de9fa05; overflow: hidden; }
.featured-card-heading { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.featured-card-heading h2 { font-size: 14px; margin: 0; color: #d5f5f9; text-shadow: 0 1px 5px #000; }
.serial-badge { padding: 4px 6px; color: #f4d478; border: 1px solid #8d7138; border-radius: 4px; background: #172227bd; font-size: 12px; }
.featured-game-art.scene-art { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 1.2; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }
.featured-game-art.scene-art::before { content: ''; position: absolute; inset: 0 0 auto; aspect-ratio: 1; background: url('解码室-科幻素材图集.png') 0 0 / 200% 200% no-repeat; }
.featured-game-art.scene-art::after { background: linear-gradient(0deg,#05151b,transparent 35%,transparent 80%,#041217aa); }
.featured-game-info { padding: 0 18px 20px; display: block; position: relative; margin-top: -8px; z-index: 2; }
.featured-game-info .eyebrow { font-size: 8px; color: #56949d; letter-spacing: .18em; margin-bottom: 5px; }
.featured-game-info h2 { font-size: 27px; margin: 0 0 8px; letter-spacing: .04em; color: #f1fbff; }
.featured-game-info p:not(.eyebrow) { color: #a3bec5; font-size: 12px; line-height: 1.7; margin: 0 0 16px; }
.featured-game-info .primary-button { display: flex; justify-content: center; gap: 15px; align-items: center; min-height: 48px; border: 1px solid #ffaca1; border-radius: 28px; font-size: 16px; background: linear-gradient(#ff7970,#fb454a); box-shadow: 0 0 16px #ff575544,inset 0 1px 5px #ffddd566; }
.featured-game-info .primary-button span { font-size: 23px; }
.daily-challenge-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 82px; margin-top: 18px; padding: 15px; border: 1px solid #2c6470; border-radius: 8px 16px; background: linear-gradient(120deg,#10333e,#061b23); color: #d5f5f9; text-align: left; }
.daily-challenge-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #367887; border-radius: 10px; color: #69e8ee; font-size: 25px; background: #0a252e; }
.daily-challenge-copy { display: grid; gap: 6px; min-width: 0; }
.daily-challenge-copy strong { font-size: 15px; }
.daily-challenge-copy > span { color: #9abdc8; font-size: 11px; line-height: 1.6; }
.daily-challenge-arrow { margin-left: auto; color: #62e5ed; font-size: 23px; }
.daily-challenge-card:active { background: #103c46; }
.recent-head { margin-top: 12px; }
.recent-head h3 { font-size: 14px; }
/* Circular progress remains a real SVG indicator, including the zero state. */
#achievementsScreen > .topbar { height: 44px; }
#achievementsScreen .screen-title { font-size: 28px; }
#achievementsScreen .page-intro { padding: 4px 0 23px; }
#achievementsScreen .page-intro h2, #achievementsScreen .page-intro .eyebrow { display: none; }
#achievementsScreen .page-intro p { color: #a4c3c9; font-size: 12px; }
.achievement-overview { padding: 17px 15px; border: 1px solid #326874; border-radius: 14px; background: radial-gradient(ellipse at top left,#0a596144,transparent 60%),linear-gradient(120deg,#0a2832,#05191f); box-shadow: inset 0 1px 0 #7bdde822; }
.achievement-summary { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: 17px; margin-top: 14px; }
.achievement-ring { position: relative; aspect-ratio: 1; width: 100%; max-width: 185px; }
.achievement-ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.achievement-ring circle { fill: none; stroke-width: 7; }
.ring-track { stroke: #1b414c; }
.ring-value { stroke: #57f4eb; stroke-linecap: butt; filter: drop-shadow(0 0 4px #34ddd7aa); transition: stroke-dashoffset .55s ease; }
.ring-label { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4px; }
.ring-label strong { color: #f2fbff; font-size: 32px; letter-spacing: -.06em; }
.ring-label strong span { font-size: 22px; color: #a4c5cb; }
.ring-label > span { font-size: 10px; color: #8fb3bd; }
.achievement-metrics { margin: 0; font-size: 11px; display: grid; gap: 20px; }
.achievement-metrics div { display: flex; justify-content: space-between; gap: 5px; align-items: center; }
.achievement-metrics dt { color: #9cbdc5; }
.achievement-metrics dt::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #44e4db; margin-right: 6px; }
.achievement-metrics div:nth-child(2) dt::before { background: #788baf; }
.achievement-metrics div:nth-child(3) dt::before { background: #f97779; }
.achievement-metrics dd { margin: 0; color: #e6f5f8; font-size: 15px; font-variant-numeric: tabular-nums; }
.achievement-filters { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 4px; margin-top: 18px; border-bottom: 1px solid #21414a; }
.achievement-filters button { min-height: 36px; background: transparent; color: #96b6bf; border-radius: 18px; font-size: 12px; }
.achievement-filters button.selected { background: linear-gradient(135deg,#02b4ca,#0a626e); color: white; box-shadow: inset 0 0 0 1px #64f6ff66,0 0 12px #02cae126; }
.achievement-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 15px; }
.achievement-card { min-height: 154px; border-radius: 7px; padding: 15px 7px 11px; text-align: center; background: linear-gradient(145deg,#12313b,#05161d); }
.achievement-card > div { margin: 0 auto 12px; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(130deg,#676148,#1b282e); color: #ffe5a0; border: 1px solid #9b8550; font-size: 28px; box-shadow: inset 0 0 10px #d6b66830; }
.achievement-card.locked { opacity: .65; }
.achievement-card strong { font-size: 12px; }
.achievement-card span { font-size: 10px; line-height: 1.6; }
.achievement-empty { padding: 28px 12px; text-align: center; color: #9abac4; line-height: 1.8; font-size: 13px; }
/* Four equal navigation targets; the game library is reserved for expansion. */
.bottom-nav { width: min(100%,480px); min-height: var(--nav-height); bottom: 0; padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); border: 1px solid #2c6470; border-bottom: 0; border-radius: 20px 20px 0 0; background: linear-gradient(180deg,#09252ff5,#031117fa); box-shadow: 0 -5px 25px #0006,inset 0 1px 0 #72d4e52b; }
.nav-item { position: relative; min-width: 0; min-height: 59px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #93b2bd; border-radius: 12px; }
.nav-item svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-item small { font-size: 11px; font-weight: 500; }
.nav-item.active { color: #4ce8f7; background: radial-gradient(ellipse at center,#00cee11c,transparent 75%); }
.nav-item.active svg { filter: drop-shadow(0 0 5px #00d5e6aa); }
.nav-item.active::before { content: ''; position: absolute; top: -7px; width: 24px; height: 2px; background: #51efff; box-shadow: 0 0 8px #00dfff; }
button:focus-visible { outline: 2px solid #65eaff; outline-offset: 3px; }
@media (min-width:600px) { .bottom-nav { bottom: 24px; width: 478px; border-radius: 20px 20px 30px 30px; border-bottom: 1px solid #2c6470; } }
@media (max-width:359px) { .screen { padding-left: 12px; padding-right: 12px; } .achievement-summary { gap: 9px; } .ring-label strong { font-size: 27px; } .achievement-grid { gap: 6px; } }
@media (prefers-reduced-motion:reduce) { .ring-value { transition: none; } .screen { animation: none; } }

/* Secondary pages share the concept board's header and content rhythm. */
#leaderboardScreen, #gamesScreen, #profileScreen { background: radial-gradient(ellipse at 100% 0,#133a434d,transparent 40%),repeating-linear-gradient(90deg,transparent 0 69px,#16bbd005 70px 71px),#041217; }
#leaderboardScreen > .topbar, #gamesScreen > .topbar, #profileScreen > .topbar { height: 44px; }
#leaderboardScreen .screen-title, #gamesScreen .screen-title, #profileScreen .screen-title { font-size: 28px; font-weight: 800; letter-spacing: .02em; }
#leaderboardScreen .page-intro, #gamesScreen .page-intro, #profileScreen .page-intro { padding: 4px 0 23px; }
#leaderboardScreen .page-intro h2, #leaderboardScreen .page-intro .eyebrow, #gamesScreen .page-intro h2, #gamesScreen .page-intro .eyebrow { display: none; }
#leaderboardScreen .page-intro p, #gamesScreen .page-intro p, #profileScreen .page-intro p { color: #a4c3c9; font-size: 12px; margin: 0; }
.section-code { font-size: 9px; letter-spacing: .12em; color: #608f9a; }
/* Compact leaderboard, with column alignment rather than separate large cards. */
#leaderTabs { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 3px; margin: 0 0 8px; background: linear-gradient(90deg,#0e3640,#061b23); border-radius: 7px; border: 1px solid #235560; }
#leaderTabs button { min-height: 38px; font-size: 12px; border-radius: 6px; }
#leaderTabs button.selected { background: linear-gradient(135deg,#03d0df,#0596ac); color: #efffff; }
.ranking-caption { display: flex; justify-content: space-between; padding: 8px 12px 8px 85px; font-size: 10px; color: #6b949f; }
.leaderboard-list { gap: 0; }
.leader-row { display: grid; grid-template-columns: 25px 37px minmax(0,1fr) 64px; gap: 9px; border: 0; border-bottom: 1px solid #22424a; border-radius: 0; background: transparent; box-shadow: none; padding: 8px 8px; min-height: 57px; }
.leader-row:nth-child(-n+3) { background: linear-gradient(90deg,#0d303999,#0a202800); }
.leader-row:first-child { border-radius: 8px 8px 0 0; }
.leader-row .leader-avatar { width: 35px; height: 35px; border-radius: 50%; box-shadow: 0 0 0 2px #06161c; }
.leader-row:nth-child(3n+2) .leader-avatar { filter: hue-rotate(35deg); }
.leader-row:nth-child(3n+3) .leader-avatar { filter: hue-rotate(100deg); }
.leader-name { min-width: 0; }
.leader-name strong { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leader-score { font-size: 12px; color: #d8edf1; font-weight: 500; text-align: right; }
.rank-medal { font-size: 16px; width: 25px; }
.leader-row:nth-child(-n+3) .rank-medal { display: grid; place-items: center; height: 30px; clip-path: polygon(8% 0,36% 11%,50% 0,64% 11%,92% 0,100% 65%,50% 100%,0 65%); color: #39280c; background: linear-gradient(120deg,#fff0b4,#c69237); text-shadow: 0 1px #ffffff77; }
.leader-row:nth-child(2) .rank-medal { background: linear-gradient(120deg,#effaff,#7e9dae); color: #233c49; }
.leader-row:nth-child(3) .rank-medal { background: linear-gradient(120deg,#f7cfab,#b57953); }
.demo-note { color: #77959f; font-size: 10px; line-height: 1.6; margin: 13px 2px 0; }
.my-rank-card { margin-top: 12px; border-radius: 8px; background: #0a2a34; border-color: #285663; box-shadow: none; }
.my-rank-card strong { font-size: 12px; }
/* Full width game artwork with overlaid metadata and a bottom action. */
.game-library-list { gap: 18px; margin: 0; }
.library-card { position: relative; isolation: isolate; display: block; width: 100%; min-height: 0; padding: 0; overflow: hidden; border: 1px solid #326a78; border-radius: 9px; background: #05151b; box-shadow: inset 0 1px 0 #83deed22; }
.library-card.available { border-color: #26c3d0; box-shadow: 0 0 14px #00c4d00d; }
.library-card .library-art { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 1.7; border: 0; border-radius: 0; background: none; overflow: hidden; box-shadow: none; }
.library-card .library-art::before { content: ''; position: absolute; top: -21%; left: 0; width: 100%; aspect-ratio: 1; background-image: url('解码室-科幻素材图集.png'); background-size: 200% 200%; background-repeat: no-repeat; }
.library-card .scene-door::before { background-position: 100% 0; }
.library-card .scene-cube::before { background-position: 0 0; }
.library-card .scene-pyramid::before { background-position: 0 100%; }
.library-card .library-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#05151b,transparent 70%); }
.library-card .library-info { display: block; position: relative; margin-top: -28px; padding: 0 17px 17px; }
.library-info > strong { display: block; font-size: 25px; color: #edfaff; letter-spacing: .02em; margin-bottom: 7px; text-shadow: 0 2px 8px #000; }
.library-info > span { display: block; color: #a4bfc8; font-size: 12px; line-height: 1.7; }
.library-info > b { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 42px; margin-top: 16px; background: linear-gradient(#ff7970,#fb454a); border: 1px solid #ffa59e; border-radius: 24px; color: #fff; font-size: 14px; box-shadow: 0 0 15px #f6535144; }
.library-info > b i { font-size: 20px; }
.game-status { position: absolute; top: 12px; right: 12px; border: 1px solid #49d5df; border-radius: 5px; background: #06222dce; color: #89f8ff; padding: 5px 8px; font-size: 11px; }
.locked-status { color: #acbdc3; border-color: #566971; background: #06151cde; }
.locked-status::before { content: '◇'; margin-right: 5px; }
.library-card.forthcoming .library-art { aspect-ratio: 2.25; filter: saturate(.65) brightness(.7); }
.library-card.forthcoming .library-info { margin-top: -32px; }
.library-card.forthcoming .library-info > strong { font-size: 22px; }
/* Identity, real local experience, compact statistics, and row-based actions. */
.profile-hero { position: relative; isolation: isolate; display: block; margin: 0 0 17px; padding: 20px; border: 1px solid #36707c; border-radius: 13px; background: linear-gradient(135deg,#0d333f,#061b23); overflow: hidden; }
.profile-hero::before { content: ''; position: absolute; z-index: -1; top: -28px; right: -55px; width: 260px; height: 260px; background: url('解码室-科幻素材图集.png') 100% 0 / 200% 200%; opacity: .18; mask-image: linear-gradient(110deg,transparent,#000 80%); }
.profile-identity { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 13px; }
.profile-hero .profile-avatar { width: 78px; height: 78px; border-radius: 50%; border: 2px solid #c3e2dd; box-shadow: 0 0 0 5px #082e38,0 0 20px #1ad6e02b; }
.identity-code { max-width: 85px; margin-top: 5px; color: #5c9aa8; font-size: 9px; letter-spacing: .16em; line-height: 1.8; text-align: right; }
.profile-hero h2 { font-size: 25px; letter-spacing: 0; margin: 0 0 7px; overflow-wrap: anywhere; }
.profile-hero > p { font-size: 12px; color: #a3c1ca; margin: 0; line-height: 1.6; }
.profile-level { display: flex; gap: 13px; align-items: flex-start; margin-top: 19px; }
.profile-level > strong { color: #4cedf1; font-size: 19px; line-height: 1; }
.profile-level > div { flex: 1; padding-top: 4px; min-width: 0; }
.level-track { height: 6px; border-radius: 10px; background: #204854; overflow: hidden; }
.level-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#06bac7,#72fff3); box-shadow: 0 0 7px #17e6e0; border-radius: inherit; }
.profile-level span { display: block; margin-top: 7px; font-size: 10px; color: #a2bdc6; text-align: right; }
.profile-stats { padding: 17px 3px; border-radius: 9px; background: #071e26; }
.profile-stats strong { font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.profile-stats span { color: #99b8c1; font-size: 11px; }
.profile-menu { margin-top: 18px; padding: 0 13px; background: linear-gradient(110deg,#0b252f,#05151b); border: 1px solid #244b58; border-radius: 9px; }
.profile-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 57px; padding: 0; color: #e0eef3; background: transparent; border-bottom: 1px solid #25414b; text-align: left; font-size: 13px; }
.profile-menu-item:last-child { border-bottom: 0; }
details.profile-menu-item { display: block; }
.profile-menu-item summary { display: flex; align-items: center; gap: 12px; min-height: 57px; cursor: pointer; list-style: none; }
.profile-menu-item summary::-webkit-details-marker { display: none; }
.menu-icon { width: 20px; text-align: center; color: #a8d2de; font-size: 20px; }
.menu-chevron { margin-left: auto; font-size: 23px; color: #94b7c1; font-weight: 300; }
details[open] .menu-chevron { transform: rotate(90deg); }
.menu-detail { padding: 0 0 14px 32px; color: #9bbcc7; }
.menu-detail > div { display: flex; justify-content: space-between; padding: 7px 0; }
.menu-detail strong { color: #5be6e7; }
.menu-detail p { margin: 10px 0 0; font-size: 10px; line-height: 1.7; }
#profileSettings { background: transparent; border: 0; color: #bbdce5; }
@media (max-width:359px) { .leader-row { gap: 7px; grid-template-columns: 23px 32px minmax(0,1fr) 54px; padding-inline: 4px; } .leader-row .leader-avatar { width: 31px; height: 31px; } .profile-hero { padding: 16px; } .identity-code { font-size: 8px; } }

/* Mechanical terminal shared by gameplay and debrief. */
.game-screen, .result-screen { background: radial-gradient(ellipse at 100% 20%,#16404b66,transparent 60%),repeating-linear-gradient(90deg,transparent 0 52px,#2a889010 53px 54px),#041116; }
.game-topbar { margin-bottom: 15px; }
.game-topbar .back-button, .game-topbar .icon-button { border: 0; background: transparent; color: #c5e0e7; }
.game-mode { font-size: 15px; letter-spacing: .04em; }
.terminal-meta { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0 4px 22px; padding: 22px 12px 12px; border: 1px solid #2c7886; border-radius: 4px 18px; background: linear-gradient(135deg,#0c303b,#04161c); box-shadow: inset 0 0 0 4px #061b22, inset 0 0 0 5px #1e4550; }
.terminal-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 13px; background: #07313b; color: #72e3ed; border: 1px solid #276372; font-size: 9px; white-space: nowrap; letter-spacing: .12em; }
.terminal-meta .meta-pill { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.terminal-meta .meta-pill strong { font-size: 25px; color: #e2f9ff; font-variant-numeric: tabular-nums; text-shadow: none; }
.terminal-meta .timer-pill { border-left: 1px solid #1c5d6a; }
.terminal-meta .timer-pill strong { color: #4be8f2; }
.terminal-meta .meta-pill > span { font-size: 10px; color: #86b6c5; }
.mechanical-frame { position: relative; border: 1px solid #53717c; border-radius: 7px 20px 7px 20px; background: linear-gradient(#273b45,#0a1b23 9%,#071a21 90%,#263943); box-shadow: 0 0 0 2px #030d12,0 0 0 3px #29444e,inset 0 0 0 3px #0d1c23,inset 0 0 0 4px #36525e,0 9px 20px #0006; }
.mechanical-frame::before, .mechanical-frame::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg,#95aab3,#0c1a20); border: 1px solid #061219; box-shadow: 0 1px 2px #000; pointer-events: none; z-index: 2; }
.mechanical-frame::before { top: 7px; left: 9px; }
.mechanical-frame::after { bottom: 7px; right: 9px; }
.game-panel { padding: 18px 14px 11px; }
.game-panel .panel-heading { padding: 0 3px 11px; font-size: 10px; letter-spacing: .06em; color: #a6c5d0; }
.panel-hint { color: #7697a2; font-size: 9px; }
.code-housing { padding: 9px; background: #020e14; border: 1px solid #59737b; border-radius: 7px; box-shadow: inset 0 0 0 2px #02090c,0 2px 0 #324d57; position: relative; }
.code-housing::before, .code-housing::after { content: ''; position: absolute; width: 21px; height: 3px; background: #80e3e9; box-shadow: 0 0 7px #01d1ed; }
.code-housing::before { top: -2px; left: 16px; }
.code-housing::after { bottom: -2px; right: 16px; }
.current-guess { gap: 8px; }
.current-guess .guess-slot, .revealed-chip { position: relative; width: 100%; height: 64px; border: 1px solid #299cae; border-radius: 6px 12px 6px 12px; background: radial-gradient(ellipse at 50% 90%,#0b5260,#03141c 80%); color: #31e8f4; font-size: 32px; text-shadow: 0 0 12px #00d4f088; box-shadow: inset 0 0 0 3px #041219,inset 0 0 0 4px #153e4a,0 0 7px #16c7dc22; }
.current-guess .guess-slot.selected { border-color: #9dffff; box-shadow: inset 0 0 0 3px #071c25,inset 0 0 0 4px #267685,0 0 9px #11dfe255; }
.current-guess .guess-slot:disabled { cursor: default; }
.current-guess .guess-slot.filled { transform: none; }
.game-panel .legend { padding: 15px 0 6px; gap: 3px; color: #9ebbc5; font-size: 9px; }
.feedback-dot { border: 1px solid #08202a; box-shadow: inset 0 1px 2px #ffffff77,0 1px 3px #000; }
.feedback-dot.exact { background: radial-gradient(circle at 35% 25%,#b5ffdb,#20e79c 55%,#078756); box-shadow: 0 0 7px #1df5ac66,inset 0 1px 1px #d7ffed; }
.feedback-dot.present { background: radial-gradient(circle at 35% 25%,#fff,#dcebe8 60%,#708b90); }
.feedback-dot.absent { background: radial-gradient(circle at 40% 20%,#4f6972,#233c47 70%); box-shadow: inset 0 1px 1px #6c859066; }
.feedback-message { min-height: 30px; padding: 5px 0 9px; font-size: 10px; }
.history-heading { display: flex; justify-content: space-between; gap: 8px; margin: 5px 0 6px; padding-top: 9px; border-top: 1px solid #28505c; color: #8daab5; font-size: 10px; }
.history-heading span:last-child { font-size: 8px; color: #688b99; }
.history-list { max-height: 215px; padding: 0; gap: 0; scrollbar-width: thin; scrollbar-color: #285965 #04131b; }
.history-row { display: grid; grid-template-columns: 24px repeat(4,minmax(0,1fr)); gap: 7px; align-items: center; padding: 7px 4px; border: 0; border-bottom: 1px solid #193842; border-radius: 0; background: #03141b44; }
.history-row.latest { background: #14465233; }
.attempt-number { margin: 0; font-size: 9px; color: #7095a4; }
.history-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.history-symbol { width: 100%; max-width: 42px; height: 24px; background: none; border: 0; color: #c1dae3; font-size: 13px; }
.history-cell .feedback-dot { width: 12px; height: 12px; flex-basis: 12px; }
.history-standby { padding: 19px 8px; text-align: center; color: #5c8492; font-size: 10px; }
.history-standby > span { display: block; font-size: 20px; letter-spacing: .4em; color: #3a6370; }
.history-standby p { margin: 12px 0 0; }
.terminal-footer { display: flex; align-items: center; gap: 7px; font-size: 7px; color: #658c98; letter-spacing: .12em; padding: 11px 3px 0; }
.terminal-footer .live-dot { width: 4px; height: 4px; box-shadow: 0 0 5px #30e5bd66; }
.terminal-footer > span:last-child { margin-left: auto; }
.keypad-housing { padding: 14px; margin-top: 19px; }
.keypad-tools { display: flex; align-items: center; justify-content: space-between; color: #81a1af; font-size: 9px; }
.keypad-tools button { min-height: 30px; padding: 0 10px; border: 1px solid #285563; border-radius: 5px; background: #061b24; color: #9bdae1; font-size: 10px; }
.keypad { gap: 9px; margin-top: 8px; }
.keypad .key { height: 48px; border-radius: 6px; font-size: 23px; font-weight: 600; color: #e3f6ff; border: 1px solid #557e8c; background: linear-gradient(145deg,#25434f,#0c202a 70%); box-shadow: inset 0 1px 0 #b5dfe53b,inset 0 0 0 3px #07151c,0 3px 0 #01070b; }
.keypad .key.action { font-size: 21px; color: #a7d0df; }
.keypad .key:active { transform: translateY(2px); background: #133946; }
.keypad .submit-button { height: 48px; min-height: 48px; margin: 0; border-radius: 6px; border: 1px solid #fbb9b2; background: linear-gradient(145deg,#ff8374,#dd343e); color: #fff; font-size: 26px; box-shadow: inset 0 0 0 3px #6f1e2955,0 0 12px #ff505133; padding: 0; }
.keypad .submit-button:disabled { opacity: .35; cursor: not-allowed; }
.keypad[data-kind="letter"] { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.keypad[data-kind="letter"] .key, .keypad[data-kind="letter"] .submit-button { height: 44px; min-height: 44px; font-size: 16px; }
.keypad[data-kind="letter"] .key.action, .keypad[data-kind="letter"] .submit-button { grid-column: span 2; }
.keypad[data-kind="color"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
.keypad[data-kind="color"] .key.action, .keypad[data-kind="color"] .submit-button { grid-column: span 2; }
.keypad .color-symbol, .guess-slot.color-symbol, .revealed-chip.color-symbol { color: var(--symbol-color); background: radial-gradient(ellipse at 50% 115%,var(--symbol-color),#0a202a 65%); text-shadow: 0 0 7px #000; }
.history-symbol.color-symbol { color: var(--symbol-color); }
.game-screen .keyboard-tip { font-size: 9px; line-height: 1.6; color: #799daa; }
/* The reference contains gameplay only: debrief extends the same terminal design. */
.result-screen { display: block; }
.result-screen > .topbar { margin-bottom: 23px; }
.result-terminal { overflow: hidden; padding: 24px 17px 16px; }
.result-door { position: absolute; top: -40px; left: 0; width: 100%; aspect-ratio: 1; background: url('解码室-科幻素材图集.png') 100% 0 / 200% 200%; opacity: .17; mask-image: linear-gradient(#000,transparent 85%); pointer-events: none; }
.result-terminal > :not(.result-door) { position: relative; }
.result-icon { margin: 8px auto 20px; width: 76px; height: 76px; border-radius: 50%; font-size: 38px; }
.result-icon.success { background: radial-gradient(#144d52,#051e28); color: #68fff1; border: 1px solid #6ad9dc; box-shadow: 0 0 0 5px #153c4666,0 0 0 6px #39626c,0 0 27px #29e6db33; }
.result-icon.failure { background: radial-gradient(#4d2934,#1f1620); color: #ff9995; border: 1px solid #d98487; box-shadow: 0 0 0 5px #4b283466,0 0 0 6px #71424e; }
.result-screen h2 { font-size: 27px; letter-spacing: .02em; }
.result-screen .eyebrow { font-size: 9px; letter-spacing: .18em; }
.result-subtitle { font-size: 12px; line-height: 1.7; margin-bottom: 23px; }
.answer-label { text-align: left; font-size: 9px; color: #7aa7b7; letter-spacing: .13em; margin-bottom: 10px; }
.revealed-code { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; }
.result-stats { margin: 20px 0 0; padding: 17px 0; border-radius: 6px; background: #04151c99; border-color: #244e5d; }
.result-stats strong { font-size: 20px; color: #bff6ff; font-variant-numeric: tabular-nums; }
.result-stats div:first-child strong { color: #53f1f1; }
.result-stats span { font-size: 10px; color: #819fac; margin-top: 6px; }
.result-summary { font-size: 10px; color: #6d96a5; margin: 15px 0 0; line-height: 1.6; }
.result-review { border: 1px solid #284e5d; border-radius: 7px; background: #071c24; margin-top: 18px; text-align: left; }
.result-review summary { display: flex; justify-content: space-between; padding: 14px; color: #a5d1dc; font-size: 12px; cursor: pointer; list-style: none; }
.result-review summary::-webkit-details-marker { display: none; }
.result-review .history-list { padding: 0 12px; max-height: 280px; }
.result-screen .primary-button.large { margin-top: 19px; min-height: 50px; border-radius: 26px; justify-content: center; gap: 17px; font-size: 16px; border: 1px solid #ffb0a2; background: linear-gradient(#ff7970,#f74550); box-shadow: 0 0 16px #ff575533; }
.result-screen.failed .revealed-chip { border-color: #70505a; text-shadow: none; }
@media (max-width:359px) { .game-panel, .keypad-housing { padding-left: 10px; padding-right: 10px; } .current-guess { gap: 5px; } .current-guess .guess-slot, .revealed-chip { height: 55px; font-size: 25px; } .keypad[data-kind="letter"] { gap: 4px; } .keypad[data-kind="letter"] .key { font-size: 14px; } .result-stats strong { font-size: 17px; } }
@media (prefers-reduced-motion:reduce) { .history-row.latest, .feedback-message.pulse, .countdown-overlay strong { animation: none; } }

/* Touch layout: stable controls, readable labels, and space for device insets. */
html { -webkit-text-size-adjust: 100%; }
button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { -webkit-appearance: none; appearance: none; }
.screen { padding-top: max(16px, env(safe-area-inset-top)); }
.result-screen, .difficulty-screen { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.home-top-actions button, .icon-button, .icon-button.small, .back-button, .modal-close { min-width: 44px; min-height: 44px; }
.achievement-filters button, #leaderTabs button { min-height: 44px; }
.dashboard-greeting p, .welcome-line, .my-rank-card { overflow-wrap: anywhere; }
.dashboard-stats > div, .profile-stats > div, .result-stats > div { min-width: 0; }
.dashboard-stats strong, .profile-stats strong, .result-stats strong { overflow-wrap: anywhere; }
.game-screen { padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
.game-topbar { height: 44px; margin-bottom: 12px; }
.terminal-meta { margin-bottom: 14px; padding: 16px 10px 10px; }
.terminal-meta .meta-pill strong { font-size: 23px; }
.game-panel { padding: 14px 10px 10px; }
.game-panel .panel-heading { padding-bottom: 8px; font-size: 11px; }
.game-panel .code-housing { padding: 6px; }
.current-guess { grid-template-columns: repeat(4,minmax(0,1fr)); }
.current-guess .guess-slot { min-width: 0; height: 52px; font-size: 28px; }
.game-panel .legend { padding-top: 10px; flex-wrap: wrap; gap: 6px; font-size: 10px; }
.feedback-message { min-height: 32px; font-size: 11px; line-height: 1.5; }
.history-heading { flex-wrap: wrap; padding-top: 6px; margin-top: 0; gap: 3px 8px; }
.history-heading span:last-child { font-size: 10px; }
/* Reserving history space prevents each guess from pushing the keyboard down. */
#historyList { height: 112px; height: clamp(64px, calc(100svh - 680px), 160px); max-height: none; grid-auto-rows: max-content; align-content: start; overscroll-behavior-y: contain; }
.history-standby { padding: 10px 4px; }
.history-standby p { margin-top: 6px; }
.terminal-footer { padding-top: 8px; }
.keypad-housing { padding: 10px; margin-top: 14px; }
.keypad-tools { font-size: 11px; }
.keypad-tools button { min-height: 44px; font-size: 12px; }
.keypad { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 4px; }
.keypad .key { min-width: 0; padding: 0; }
.keypad .key.in-use { border-color: #6eeff3; box-shadow: inset 0 -4px 0 #41cbd2,inset 0 0 0 3px #07151c,0 3px 0 #01070b; }
.keypad .key:disabled, .keypad-tools button:disabled { opacity: .45; cursor: default; }
.keypad .submit-button { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 23px; }
.keypad .submit-button small { font-size: 12px; font-weight: 700; }
.game-screen .keyboard-tip { min-height: 32px; margin-top: 9px; font-size: 11px; line-height: 1.5; }
.result-review summary { min-height: 48px; align-items: center; }
.result-review[open] summary > span { transform: rotate(180deg); }
.text-input { font-size: 16px; }
.modal { padding: max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); overflow-y: auto; }
.modal-card { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding-top: 30px; }
.modal-card h2 { padding-right: 18px; }
.toast { width: max-content; max-width: calc(100% - 32px); white-space: normal; text-align: center; line-height: 1.6; bottom: calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 4px 20px #0008; }
@media (max-width:359px) {
  .keypad[data-kind="letter"] { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
  .keypad[data-kind="letter"] .key { font-size: 16px; }
  .achievement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:599px) {
  .app-shell { border: 0; }
  .screen { min-height: 100svh; }
  .bottom-nav { padding-left: max(10px,env(safe-area-inset-left)); padding-right: max(10px,env(safe-area-inset-right)); }
}

/* Account forms use the same cyan terminal surfaces as the game. */
.account-preview-notice { padding: 14px 18px; font-size: 12px; line-height: 1.7; background: #15313a; color: #bddfe6; }
.account-preview-notice a { color: #6effee; }
.profile-hero .profile-email { margin-top: 8px; font-size: 11px; color: #8dbbc7; overflow-wrap: anywhere; }
.profile-hero .profile-bio { margin-top: 12px; font-size: 12px; color: #c3dee4; overflow-wrap: anywhere; }
.account-sync { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: #89b7bf; font-size: 11px; line-height: 1.6; }
.account-sync > span { flex: 1; }
.account-sync button { flex-shrink: 0; min-height: 44px; padding: 8px; background: transparent; color: #65e8e5; }
.sync-error { color: #f5b08f; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid #2d606c; border-radius: 9px; margin-bottom: 20px; background: #04171d; }
.auth-tabs button { min-height: 44px; border-radius: 6px; color: #9cc6d0; background: transparent; }
.auth-tabs [aria-pressed="true"] { color: #efffff; background: #116373; }
#accountFields { border: 0; padding: 0; margin: 0; min-width: 0; }
.account-field { margin: 0 0 15px; }
.account-field .text-input { margin-bottom: 0; }
.account-field textarea { height: auto; min-height: 88px; padding-top: 12px; resize: vertical; }
.account-field select { color-scheme: dark; }
.field-note { margin: 7px 0 0; color: #91adb7; font-size: 11px; line-height: 1.6; }
.password-field { position: relative; }
.password-field input { padding-right: 60px; }
.password-field button { position: absolute; top: 3px; right: 3px; min-width: 48px; min-height: 45px; border-radius: 10px; color: #7be8e5; background: transparent; font-size: 12px; }
.auth-error, .auth-notice { margin: 10px 0; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.auth-error { color: #ffa3a0; }.auth-notice { color: #8cebd3; }
.auth-error:empty,.auth-notice:empty { display: none; }
.account-email-value { margin: 0; padding: 12px; border: 1px solid #25424e; border-radius: 9px; color: #9cb9c5; overflow-wrap: anywhere; font-size: 13px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 12px; }
.auth-links button { min-height: 44px; color: #99c8d1; background: transparent; font-size: 12px; }
#loginForm[aria-busy="true"] { opacity: .65; }
.login-card button:disabled { cursor: wait; opacity: .5; }

/* Live rankings: podium styling follows rank, including ties. */
.leaderboard-status { margin: 0 0 8px; color: #91b9c5; font-size: 11px; line-height: 1.6; }
.leader-empty { padding: 30px 14px; margin: 0; border: 1px dashed #2a4d58; border-radius: 9px; color: #9ebdc7; font-size: 13px; line-height: 1.8; text-align: center; }
.leader-row .rank-medal { min-width: 25px; width: auto; font-size: 12px; }
.leader-row:nth-child(-n+3) .rank-medal { clip-path: none; background: none; color: #a4bac3; text-shadow: none; }
.leader-row .rank-medal.podium { display: grid; place-items: center; height: 30px; clip-path: polygon(8% 0,36% 11%,50% 0,64% 11%,92% 0,100% 65%,50% 100%,0 65%); background: linear-gradient(120deg,#fff0b4,#c69237); color: #39280c; }
.leader-row .rank-medal[data-rank="2"] { background: linear-gradient(120deg,#effaff,#7e9dae); color: #233c49; }
.leader-row .rank-medal[data-rank="3"] { background: linear-gradient(120deg,#f7cfab,#b57953); }
.leader-row.is-me { background: #0a3b4788; box-shadow: inset 3px 0 #52e9ed; }
.leader-row.is-me .leader-name strong { color: #73f0ed; }
.leader-name > span { font-size: 10px; color: #89a9b7; }
.my-rank-card { align-items: center; justify-content: space-between; gap: 12px; }
.my-rank-card > div { display: grid; gap: 7px; min-width: 0; }
.my-rank-card > div > span { color: #a6c7d1; }
.my-rank-card strong { margin: 0; font-size: 19px; color: #b6fffa; }
.my-rank-card small { color: #92bac6; font-size: 10px; line-height: 1.6; }
.my-rank-card button { flex-shrink: 0; max-width: 46%; min-height: 44px; border-radius: 8px; padding: 9px 12px; background: #12616c; color: #d6fcff; font-size: 11px; line-height: 1.6; }
.my-rank-card button:disabled, #leaderRefresh:disabled { opacity: .5; cursor: wait; }

/* Ranked progression and variable-length mechanical panels. */
.rank-points { color: #8debf0; font-size: 12px; }
.rank-track { height: 5px; background: #153b48; border-radius: 8px; overflow: hidden; margin-top: 16px; }
.rank-track i { display: block; height: 100%; background: linear-gradient(90deg,#2bcbd6,#d3ffff); transition: width .3s; }
.featured-game-info #rankProgress { font-size: 12px; margin: 9px 0; }
#rankFloorNote { display: block; color: #8db8c5; font-size: 11px; margin-bottom: 16px; }
#profileLevel { white-space: nowrap; font-size: 18px; }
.current-guess, .revealed-code { grid-template-columns: repeat(var(--code-length,4),minmax(0,1fr)); }
.history-row { grid-template-columns: 20px repeat(var(--code-length,4),minmax(0,1fr)); gap: 5px; }
[data-length="6"] .current-guess, [data-length="6"] .revealed-code { gap: 5px; }
[data-length="8"] .current-guess, [data-length="8"] .revealed-code { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
[data-length="6"] .guess-slot, [data-length="6"] .revealed-chip { font-size: 23px; height: 48px; }
[data-length="8"] .history-row { gap: 3px; padding-left: 0; padding-right: 0; grid-template-columns: 16px repeat(8,minmax(0,1fr)); }
[data-length="8"] .history-symbol { font-size: 14px; height: 30px; min-width: 0; }
[data-length="8"] .history-cell { min-width: 0; }
.guess-slot { position: relative; }
.guess-slot::after { content: attr(data-position); position: absolute; right: 5px; top: 4px; font-size: 9px; color: #90b7bf; text-shadow: none; }
.board-type { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:#90b7bf; margin:14px 0; }
.board-type select { color:#ddffff; background:#0a2932; border:1px solid #256373; padding:9px 12px; border-radius:6px; }
#leaderTabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
#quitModal .modal-card { max-width:400px; }
#quitModal p, .rank-help { color:#94bbc7; font-size:13px; line-height:1.8; }
#quitModal .primary-button { width:100%; margin-top:20px; }
@media(max-width:359px){[data-length="6"] .guess-slot,[data-length="6"] .revealed-chip{font-size:20px;} [data-length="8"] .history-symbol{font-size:12px;} }

/* Three bespoke rank insignias share the terminal's machined-metal language. */
[data-rank-theme="silver"] { --rank-bright:#f2f8ff; --rank-main:#b1c8dd; --rank-dark:#536e86; --rank-glow:#a5d4fa; --rank-surface:#172b3c; }
[data-rank-theme="gold"] { --rank-bright:#fff5cc; --rank-main:#ebc268; --rank-dark:#916326; --rank-glow:#f2c96c; --rank-surface:#322616; }
[data-rank-theme="platinum"] { --rank-bright:#f4f1ff; --rank-main:#a3ecff; --rank-dark:#7567b0; --rank-glow:#c0acff; --rank-surface:#202239; }
.rank-badge { display:inline-block; width:80px; aspect-ratio:1; flex-shrink:0; vertical-align:middle; filter:drop-shadow(0 5px 9px #0009); }
.rank-badge svg { width:100%; height:100%; display:block; overflow:visible; }
.badge-metal { fill:var(--badge-metal); stroke:var(--rank-bright); stroke-width:1.2; }
.badge-wing { fill:var(--rank-dark); stroke:var(--rank-main); stroke-width:1.1; stroke-linejoin:round; }
.badge-inset { fill:var(--rank-surface); stroke:var(--rank-bright); stroke-opacity:.6; stroke-width:1; }
.badge-core { fill:var(--badge-metal); stroke:var(--rank-bright); stroke-width:.8; }
.badge-facet { fill:none; stroke:var(--rank-dark); stroke-width:1; }
.badge-pip { fill:#142b35; stroke:var(--rank-main); stroke-width:.8; opacity:.4; }
.badge-pip.lit { fill:var(--rank-bright); opacity:1; }
.rank-identity { display:flex; align-items:center; gap:18px; margin:12px 0 18px; }
.home-rank-badge { position:relative; flex-shrink:0; }
.home-rank-badge::before { content:''; position:absolute; inset:5%; background:radial-gradient(circle,var(--rank-dark),transparent 70%); opacity:.65; }
.home-rank-badge .rank-badge { width:90px; }
.rank-identity .rank-motto { display:block; color:var(--rank-main); letter-spacing:.2em; font-size:10px; margin-bottom:5px; }
.featured-game-info .rank-identity h2 { color:var(--rank-bright); margin-bottom:4px; font-size:30px; letter-spacing:.06em; }
.rank-identity .rank-points { color:var(--rank-main); font-variant-numeric:tabular-nums; }
.home-screen .rank-track i, .profile-screen .level-track i { background:linear-gradient(90deg,var(--rank-dark),var(--rank-main),var(--rank-bright)); }
.profile-level { align-items:center; gap:10px; }
.profile-rank-badge .rank-badge { width:48px; }
.profile-level #profileLevel { color:var(--rank-bright); }
.profile-level #profileXp { color:var(--rank-main); }
.rank-road-panel { padding:16px 10px; margin:18px 0; border:1px solid #24424f; border-radius:10px; background:linear-gradient(140deg,#0b222c,#06151e); }
.rank-road-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0 5px 12px; }
.rank-road-heading h3 { margin:0; font-size:13px; color:#d3e6f0; }
.rank-road-heading>span { font-size:10px; color:#7f9fac; }
.rank-road { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.rank-road::before { content:''; position:absolute; height:1px; background:#294452; left:17%; right:17%; top:37px; }
.rank-road-step { z-index:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:4px; text-align:center; }
.rank-road-step .rank-badge { width:62px; background:radial-gradient(ellipse,#0b222c 45%,transparent 70%); }
.rank-road-step strong { color:#d3e6f0; font-size:12px; }.rank-road-step>span { color:#8da9b8; font-size:10px; }
.rank-road-step small { padding:3px 7px; color:#a6c9ce; font-size:9px; border:1px solid transparent; border-radius:20px; }
.rank-road-step.current small { background:#15353c; border-color:#325c66; color:#d4f4f6; }
.rank-road-step.locked .rank-badge { filter:grayscale(.85); opacity:.4; }.rank-road-step.locked strong,.rank-road-step.locked>span { color:#647e8e; }
.result-rank-card { display:flex; align-items:center; gap:13px; margin-top:18px; border-top:1px solid #2a434c; padding:14px 6px 0; text-align:left; }
.result-rank-card .rank-badge { width:60px; }.result-rank-card>div { display:grid; gap:4px; }
.result-rank-card>div>span { font-size:9px; color:#87a2b2; letter-spacing:.15em; }.result-rank-card strong { font-size:18px; color:var(--rank-bright); }.result-rank-card small { font-size:11px; color:var(--rank-main); }
.promotion-dialog { width:min(420px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:0; border:1px solid var(--rank-dark); border-radius:18px; color:#edf6fa; background:radial-gradient(ellipse at 50% 28%,var(--rank-surface),#07121c 68%); box-shadow:0 24px 100px #000b,0 0 50px #040c14; overflow:auto; overscroll-behavior:contain; }
.promotion-dialog:not([open]) { display:none; }
.promotion-dialog::backdrop { background:#01080de3; backdrop-filter:blur(6px); }
.promotion-content { position:relative; isolation:isolate; padding:34px 26px 25px; text-align:center; overflow:hidden; }
.promotion-content::before { content:''; position:absolute; inset:10px; pointer-events:none; border:1px solid #9bb5c416; border-radius:10px; z-index:-1; }
.promotion-close { position:absolute; z-index:3; right:10px; top:9px; width:44px; height:44px; border:0; background:none; color:#b2c5cf; font-size:26px; }
.promotion-eyebrow { margin:5px 25px 0; color:var(--rank-main); font-size:10px; letter-spacing:.24em; }
.promotion-stage { position:relative; display:grid; place-items:center; height:205px; margin:7px 0; }
#promotionBadge { z-index:1; }.promotion-stage .rank-badge { width:160px; filter:drop-shadow(0 0 22px var(--rank-dark)); }
.promotion-orbit { position:absolute; width:187px; height:187px; border:1px solid var(--rank-dark); border-radius:50%; opacity:.5; background:radial-gradient(circle,transparent 57%,var(--rank-surface) 58%,transparent 60%); }
.promotion-orbit::before,.promotion-orbit::after { content:''; position:absolute; inset:11px; border:1px dashed var(--rank-main); border-radius:50%; opacity:.3; }
.promotion-orbit::after { inset:-14px; border-style:solid; opacity:.12; }
.promotion-ring { position:absolute; width:175px; height:175px; border:1px solid var(--rank-main); border-radius:50%; opacity:0; }
.promotion-particles { position:absolute; inset:50%; pointer-events:none; }
.promotion-particles i { position:absolute; width:4px; height:8px; border-radius:1px; background:var(--rank-main); opacity:0; }
.promotion-journey { font-size:11px; letter-spacing:.1em; color:#91a6b3; margin:0 0 14px; }
.promotion-content h2 { font-size:32px; line-height:1.25; letter-spacing:.12em; margin:0 0 8px; color:var(--rank-bright); }
.promotion-rank { display:block; color:var(--rank-main); font-size:15px; letter-spacing:.12em; }
.promotion-message { color:#bac9d3; font-size:13px; line-height:1.8; margin:20px 0 10px; }
.promotion-reward { display:inline-block; padding:7px 12px; margin:0 0 24px; color:var(--rank-bright); background:var(--rank-surface); border:1px solid var(--rank-dark); border-radius:5px; font-size:11px; line-height:1.7; }
.promotion-continue { display:flex; align-items:center; justify-content:center; gap:18px; width:100%; min-height:48px; border:1px solid var(--rank-bright); border-radius:8px; color:#172330; background:linear-gradient(115deg,var(--rank-main),var(--rank-bright)); font-size:15px; font-weight:700; box-shadow:0 6px 24px #0005; }
.promotion-continue:focus-visible,.promotion-close:focus-visible { outline:2px solid white; outline-offset:4px; }
.promotion-footer { display:block; margin-top:16px; color:#6d899a; font-size:10px; letter-spacing:.08em; }
.promotion-dialog[open] { animation:promotion-enter .28s ease-out both; }
.promotion-dialog[open] #promotionBadge { animation:badge-arrive .85s cubic-bezier(.16,1,.3,1) both; }
.promotion-dialog[open] .promotion-ring { animation:rank-wave 1.6s ease-out .2s both; }
.promotion-dialog[open] .promotion-particles i { animation:rank-spark 1.9s ease-out var(--delay) both; }
.promotion-dialog[open][data-cross-tier="true"] .promotion-orbit { animation:orbit-reveal 2.4s ease-out both; }
@keyframes promotion-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes badge-arrive { 0% { opacity:0; transform:translateY(28px) scale(.6) rotate(-12deg); } 65% { opacity:1; transform:translateY(-5px) scale(1.04) rotate(2deg); } 100% { opacity:1; transform:none; } }
@keyframes rank-wave { 0% { opacity:0; transform:scale(.5); } 25% { opacity:.65; } 100% { opacity:0; transform:scale(1.6); } }
@keyframes rank-spark { 0% { opacity:0; transform:rotate(var(--angle)) translateY(45px) scale(.5); } 20% { opacity:.9; } 100% { opacity:0; transform:rotate(var(--angle)) translateY(var(--flight)) scale(.15); } }
@keyframes orbit-reveal { from { opacity:0; transform:rotate(-45deg) scale(.8); } to { opacity:.5; transform:rotate(0) scale(1); } }
@media(max-width:359px),(max-height:650px) { .promotion-content { padding:24px 20px 20px; }.promotion-stage { height:165px; }.promotion-stage .rank-badge { width:126px; }.promotion-orbit { width:145px; height:145px; }.promotion-content h2 { font-size:27px; }.promotion-message { margin-top:13px; }.promotion-reward { margin-bottom:16px; }.promotion-footer { margin-top:12px; } }
@media(prefers-reduced-motion:reduce) { .promotion-dialog[open],.promotion-dialog[open] #promotionBadge,.promotion-dialog[open] .promotion-ring,.promotion-dialog[open] .promotion-particles i,.promotion-dialog[open][data-cross-tier="true"] .promotion-orbit { animation:none; }.promotion-ring,.promotion-particles { display:none; }.rank-track i { transition:none; } }
.leader-name.has-rank-insignia { position:relative; padding-left:31px; }
.leader-name .leader-rank-insignia { position:absolute; left:0; top:50%; transform:translateY(-50%); }
.leader-rank-insignia .rank-badge { width:25px; }

/* Mobile-first hierarchy: rank and primary action precede secondary statistics. */
.home-screen .dashboard-greeting { padding-bottom:8px; }
.home-screen .featured-game-card { margin-top:10px; border-color:var(--rank-dark); background:linear-gradient(125deg,var(--rank-surface),#061820 75%); }
.home-screen .featured-game-art.scene-art { position:absolute; z-index:0; width:210px; height:210px; aspect-ratio:1; top:10px; right:-16px; opacity:.35; pointer-events:none; }
.home-screen .featured-game-art.scene-art::before { inset:0; aspect-ratio:1; }
.home-screen .featured-game-art.scene-art::after { background:linear-gradient(90deg,var(--rank-surface),transparent 70%),linear-gradient(0deg,#061820,transparent 65%); }
.home-screen .featured-card-heading { top:15px; }
.home-screen .featured-game-info { padding:53px 18px 18px; margin:0; }
.home-screen .featured-game-info>.eyebrow { display:none; }
.home-screen .rank-identity { margin:0 0 13px; gap:15px; }
.home-screen .home-rank-badge .rank-badge { width:82px; }
.home-screen .rank-identity h2 { font-size:34px; }
.home-screen .rank-motto { font-size:11px; }
.home-screen .rank-points { font-size:13px; }
.home-screen #rankChallengeCopy { margin:0 0 10px; color:#c7dae1; }
.home-screen .rank-track { margin-top:0; height:6px; }
.home-screen #rankProgress { margin:8px 0 5px; color:var(--rank-bright); }
.home-screen #rankFloorNote { margin-bottom:14px; color:#9ab8c6; }
.home-screen #startButton { width:100%; min-height:52px; border-radius:12px; font-size:18px; font-weight:750; box-shadow:0 5px 20px #ff57542b,inset 0 1px 0 #ffc9bf88; }
.home-screen .data-panel { margin-top:18px; padding:13px 14px 15px; }
.home-screen .dashboard-stats { padding-top:13px; }
.home-screen .dashboard-stats strong { font-size:22px; }
.home-screen .daily-challenge-card { margin-top:14px; }
.home-rank-badge, .rank-badge, .promotion-stage { pointer-events:none; }
.home-screen .rank-identity>div:last-child { min-width:0; }
@media(max-width:359px) {
 .home-screen { padding-left:14px; padding-right:14px; }
 .home-screen .home-topbar .brand-mark { font-size:27px; }
 .home-screen .dashboard-greeting { padding-top:0; }
 .home-screen .dashboard-greeting>p { display:none; }
 .home-screen .featured-game-info { padding:47px 15px 15px; }
 .home-screen .home-rank-badge .rank-badge { width:70px; }
 .home-screen .rank-identity { gap:12px; margin-bottom:10px; }
 .home-screen .rank-identity h2 { font-size:30px; }
 .profile-level { flex-wrap:wrap; gap:8px; }
 .profile-level>div { flex-basis:100%; }
 .profile-level #profileXp { text-align:left; }
}
/* The decoration scrolls independently; dismiss and continue remain reachable. */
.promotion-dialog { max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:hidden; }
.promotion-content { display:flex; flex-direction:column; max-height:calc(100dvh - 26px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:0; overflow:hidden; }
.promotion-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:32px 24px 14px; }
.promotion-actions { flex-shrink:0; padding:13px 24px 20px; background:#08131df5; border-top:1px solid #9bb5c41c; }
.promotion-actions .promotion-footer { margin-top:11px; }
.promotion-body .promotion-reward { margin-bottom:0; }
.promotion-content .promotion-close { z-index:4; top:6px; right:6px; border-radius:50%; background:#08131de8; }
.promotion-content .promotion-stage { height:clamp(120px,24dvh,200px); }
.promotion-stage .rank-badge { width:clamp(100px,18dvh,154px); }
.promotion-orbit { width:clamp(130px,22dvh,182px); height:auto; aspect-ratio:1; }
.promotion-continue { min-height:50px; }
@media(max-height:650px) {
 .promotion-body { padding:25px 18px 12px; }
 .promotion-content .promotion-stage { height:120px; margin:4px 0; }
 .promotion-stage .rank-badge { width:104px; }
 .promotion-orbit { width:122px; }
 .promotion-journey { margin-bottom:8px; font-size:10px; }
 .promotion-content h2 { font-size:26px; margin-bottom:5px; }
 .promotion-message { font-size:12px; margin:10px 0 8px; }
 .promotion-actions { padding:10px 18px 12px; }
 .promotion-actions .promotion-footer { display:none; }
}
@media(max-height:440px) {
 .promotion-content .promotion-stage { height:85px; }
 .promotion-stage .rank-badge { width:76px; }
 .promotion-orbit { width:90px; }
 .promotion-content h2 { font-size:23px; }
 .promotion-dialog { width:min(440px,calc(100vw - 24px)); }
}

/* Energy stays alongside the challenge entry without competing with the rank. */
.energy-strip { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; width:100%; padding:9px 10px; margin:10px 0; border:1px solid #38dcd334; border-radius:8px; color:#b5d4da; background:#041b23; text-align:left; font-size:11px; min-height:44px; }
.energy-strip strong { color:#6cf1dc; font-size:13px; margin-left:5px; }
.energy-strip small { color:#88acb5; font-size:10px; }
.energy-dialog { width:min(390px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #3cc8c566; border-radius:20px; color:#d8f0f1; background:radial-gradient(ellipse at 50% 0,#16454e,#081820 65%); box-shadow:0 20px 80px #000b; overflow:auto; }
.energy-dialog::backdrop { background:#020b10d9; backdrop-filter:blur(5px); }
.energy-dialog-content { position:relative; padding:30px 22px 22px; text-align:center; }
.energy-close { position:absolute; right:5px; top:5px; width:44px; height:44px; border:0; background:transparent; color:#a4c7cc; font-size:27px; }
.energy-orb { display:grid; place-items:center; margin:16px auto; width:76px; height:76px; border-radius:50%; border:1px solid #48edcd88; color:#81ffda; font-size:53px; background:#1ddab511; box-shadow:0 0 30px #14c9b126; }
.energy-dialog h2 { font-size:25px; margin:10px 0; }.energy-dialog p { line-height:1.8; font-size:12px; color:#9fbdc6; }
.energy-dialog .primary-button { width:100%; min-height:50px; font-size:14px; }
.energy-dialog .ghost-button { width:100%; min-height:44px; }.energy-dialog small { display:block; font-size:10px; line-height:1.6; color:#7e9aa4; }
.energy-cells { display:flex; gap:5px; margin:20px 0; }.energy-cells i { flex:1; height:26px; border:1px solid #355661; border-radius:4px; background:#10252c; }.energy-cells i.charged { background:linear-gradient(#80f5d3,#139c95); border-color:#75e9d2; box-shadow:0 0 8px #14a79733; }
.energy-dialog .energy-error { color:#ffb2a4; }.energy-error:empty { display:none; }
.practice-offer { padding:19px; margin:16px 0; border:1px solid #4ed5ce55; border-radius:14px; background:linear-gradient(135deg,#143139,#081921); text-align:left; }
.practice-offer h3 { font-size:18px; margin:7px 0; }.practice-offer p { color:#9bbbc6; font-size:12px; line-height:1.8; }.practice-offer .primary-button { width:100%; min-height:48px; font-size:13px; }.practice-offer .ghost-button { width:100%; min-height:44px; }.practice-offer small { display:block; color:#829faa; font-size:10px; line-height:1.6; }
#revealedCode { font-size:12px; line-height:1.8; }
@media(max-width:359px){.home-screen .energy-strip { margin:8px 0; padding:7px 8px; }.energy-strip small { font-size:9px; }.practice-offer { padding:14px; }}
@media(max-height:650px){.energy-dialog-content { padding:24px 18px 16px; }.energy-orb { width:50px; height:50px; font-size:35px; margin:9px auto; }.energy-dialog h2 { font-size:22px; }.energy-cells { margin:12px 0; }}

.result-screen.has-practice-offer .answer-label,.result-screen.has-practice-offer .result-terminal>.code-housing { display:none; }
.result-screen.has-practice-offer .result-icon { width:48px; height:48px; font-size:27px; margin:0 auto 14px; }
.result-screen.has-practice-offer .result-subtitle { margin-bottom:12px; }
.result-screen.has-practice-offer .practice-offer { margin:12px 0 18px; padding:14px; }
.result-screen.has-practice-offer .practice-offer .primary-button { margin-top:10px; }
.result-screen.has-practice-offer .practice-offer h3 { font-size:16px; }

.profile-energy-panel,.reward-record-panel { margin:18px 0; padding:18px; border:1px solid #2c646c; border-radius:16px; background:linear-gradient(135deg,#12333b,#081a22 75%); }
.profile-energy-heading,.reward-record-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.profile-energy-heading h3,.reward-record-heading h3 { margin:0; font-size:18px; color:#dff5f6; }
.profile-energy-heading .eyebrow { font-size:9px; color:#63dcd0; margin:0 0 5px; letter-spacing:.12em; }
.profile-energy-heading .icon-button { width:44px; height:44px; flex-shrink:0; font-size:23px; color:#66e7d2; border:1px solid #38717a; border-radius:50%; background:#0b252e; }
.profile-energy-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.profile-energy-metrics>div+div { border-left:1px solid #45666a66; padding-left:15px; }
.profile-energy-metrics strong { display:block; color:#70f0d6; font-size:27px; font-weight:700; font-variant-numeric:tabular-nums; }.profile-energy-metrics span { display:block; margin-top:7px; color:#9dbbc4; font-size:11px; }
.profile-energy-panel .energy-cells { margin:17px 0 12px; gap:5px; }.profile-energy-panel .energy-cells i { height:16px; }
.profile-energy-recovery { font-size:12px; line-height:1.7; color:#b5d7dc; margin:8px 0; font-variant-numeric:tabular-nums; }
.profile-energy-note { font-size:11px; line-height:1.8; color:#8ba8b2; margin:8px 0 14px; }
.profile-energy-panel .primary-button { width:100%; font-size:14px; min-height:46px; border-radius:10px; }.profile-energy-panel .primary-button:disabled { opacity:.65; background:#1b3a43; color:#b2cdd3; box-shadow:none; }
.energy-rules { margin-top:14px; border-top:1px solid #46626a66; }.energy-rules summary { display:flex; justify-content:space-between; align-items:center; min-height:48px; font-size:13px; color:#b5dfe1; cursor:pointer; list-style:none; }.energy-rules summary::-webkit-details-marker { display:none; }.energy-rules[open] summary span { transform:rotate(180deg); }.energy-rules h4 { font-size:13px; margin:13px 0 5px; color:#d0ebed; }.energy-rules p { font-size:12px; line-height:1.9; color:#9fbbc4; margin:0 0 12px; }
.reward-record-panel { background:#091d25; }.reward-record-heading { flex-wrap:wrap; }.reward-record-heading>span { font-size:10px; color:#78b9b9; }
#rewardRecordStatus { font-size:12px; color:#8fb3bf; line-height:1.8; margin:10px 0; }
.reward-record-list { list-style:none; padding:0; margin:0; }.reward-record-row { display:flex; align-items:center; gap:10px; border-top:1px solid #38515d77; padding:15px 0; }
.reward-record-icon { display:grid; place-items:center; flex:0 0 33px; height:33px; font-size:22px; border:1px solid #3d8a8555; border-radius:9px; color:#73e9d0; background:#123b3d; }.reward-record-row>div { flex:1; min-width:0; }.reward-record-row strong { display:block; font-size:12px; font-weight:600; color:#d5e9ec; }.reward-record-row time { display:block; font-size:10px; line-height:1.7; margin-top:4px; color:#829fa9; }.reward-record-row>b { flex-shrink:0; color:#78eed1; font-size:14px; }#rewardRecordMore { min-height:44px; width:100%; margin:8px 0 0; }
@media(max-width:359px){.profile-energy-panel,.reward-record-panel { padding:14px; }.profile-energy-metrics strong { font-size:23px; }.profile-energy-metrics>div+div { padding-left:12px; }.reward-record-row { gap:7px; }.reward-record-icon { flex-basis:28px; height:30px; }.reward-record-row time { font-size:9px; }.profile-energy-heading h3,.reward-record-heading h3 { font-size:17px; }}