@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@900&display=swap');

:root{
  color-scheme:dark;
  --bg:#081426;--surface:#101d33;--surface-2:#14233b;--line:#2a415f;
  --text:#ebf5ff;--muted:#a7bad2;--dim:#748ba9;--accent:#5bdcff;
  --accent-soft:#163d60;--danger:#ff9ba9;--mono:'JetBrains Mono',Consolas,monospace;
  --sans:'DM Sans',Arial,sans-serif;
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
button,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0}button:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:pre;border:0}
.brand{display:flex;align-items:center;background:none;padding:0;font:900 34px/1 'Orbitron','Arial Black',Impact,sans-serif;letter-spacing:4px;text-transform:uppercase;color:var(--text);text-shadow:0 0 22px #5bdcff55;white-space:nowrap}
.eyebrow{font:600 12px/1.6 var(--mono);letter-spacing:1.5px;color:var(--accent)}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--accent);color:#07233b;border:1px solid var(--accent);padding:13px 20px;border-radius:9px;font-weight:700;box-shadow:0 8px 30px #10a5dc21;transition:background .15s,transform .15s}
.primary-button:hover{background:#a0efff;transform:translateY(-1px)}
.quiet-button{background:transparent;color:var(--muted);padding:12px 5px;font-size:14px;transition:color .15s}
.quiet-button:hover{color:var(--text)}
.outline-button{background:transparent;color:var(--text);border:1px solid #426181;padding:12px 18px;border-radius:9px;font-weight:600}
.outline-button:hover{background:#193451;border-color:#5bdcff}
.intro-screen{min-height:100vh;background:radial-gradient(circle at 82% 18%,#102c52 0,transparent 34%),radial-gradient(circle at 18% 88%,#0c2845 0,transparent 30%),var(--bg)}
.intro-content{max-width:700px;margin:0}
.intro-content h1{font-size:clamp(37px,5vw,66px);line-height:1.12;letter-spacing:-2.2px;font-weight:500;margin:17px 0 16px}
.intro-description{font-size:clamp(17px,1.7vw,20px);line-height:1.65;color:#bdcfe4;max-width:630px;margin:0 0 39px}
.learning-panel{background:linear-gradient(140deg,#152942,#122139);border:1px solid #375679;border-left:3px solid var(--accent);border-radius:8px;padding:23px 27px;box-shadow:0 18px 55px #0002}
.learning-panel p{font-size:19px;line-height:1.7;margin:11px 0 0}
.intro-tip{font-size:15px;color:var(--muted);line-height:1.75;margin:19px 0 28px;padding-left:18px;border-left:1px solid #385273}
.intro-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.intro-actions .primary-button{font-size:15px;min-width:177px}
.intro-note{font-size:13px;color:var(--dim);margin-top:34px}
.countdown-screen{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 47%,#17446d 0,transparent 37%),var(--bg)}
.countdown-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.countdown-inner .brand{font-size:26px;letter-spacing:3px;opacity:.85}
.countdown-inner>p{font:600 13px var(--mono);letter-spacing:2px;color:var(--muted);margin:clamp(50px,9vh,90px) 0 0}
#countdown-number{font:600 clamp(144px,20vw,240px)/1 var(--mono);letter-spacing:-12px;color:var(--accent);text-shadow:0 0 70px #5bdcff55;margin:12px 0 15px}
#countdown-title{font-size:19px;color:var(--muted)}
.practice-screen{min-height:100vh;background:radial-gradient(circle at 50% -20%,#123359 0,transparent 45%),var(--bg)}
.practice-wrap{width:min(100%,1060px);margin:0 auto;padding:22px 36px 60px;display:grid;gap:22px}
.practice-wrap .screen-bar{margin-bottom:0}
.editor-card,.console-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 20px 55px #00000020}
.editor-card:focus-within{border-color:#4e8eb6}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.panel-title{display:flex;align-items:center;gap:10px;font:500 14px var(--mono);color:#d9e9fa;min-width:0}
.panel-title span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 11px #5bdcff99;flex:none}
.panel-meta{font:500 11px var(--mono);letter-spacing:1px;color:var(--dim);white-space:nowrap}
.code-scroll{overflow:auto;height:clamp(320px,50vh,520px);padding:30px 22px 26px 0}
.editor-area{position:relative;min-width:100%;min-height:100%;font:16px/31px var(--mono);tab-size:4;font-variant-ligatures:none}
.line-numbers{position:absolute;left:0;top:0;width:60px;text-align:right;padding-right:18px;font:13px/31px var(--mono);color:#5f7898;user-select:none}
.line-numbers span{display:block;height:31px}
#code-display,#code-input{font:inherit;line-height:inherit;letter-spacing:0;white-space:pre;margin:0;padding:0;border:0;tab-size:4;overflow-wrap:normal;word-break:normal;font-variant-ligatures:none}
#code-display{margin-left:78px;min-height:100%;color:#8296b1;pointer-events:none}
#code-input{position:absolute;top:0;left:78px;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--accent);resize:none;outline:none;overflow:hidden;min-height:100%;min-width:calc(100% - 78px);height:100%;width:calc(100% - 78px)}
#code-input::selection{background:#5bdcff44}
#code-display .typed{color:#ecf6ff}
#code-display .wrong{color:var(--danger);background:#ff627929;border-radius:2px;box-shadow:inset 0 -1px var(--danger)}
#code-display .keyword{color:#aab9df}
#code-display .string{color:#8fcae1}
#code-display .number{color:#e3b99c}
#code-display .comment{color:#748ba4}
#code-display .typed.keyword{color:#c6c6ff}
#code-display .typed.string{color:#6fe3ff}
#code-display .typed.number{color:#ffd0a9}
.editor-footer{border-top:1px solid #253b58;min-height:46px;padding:11px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--dim);font:12px var(--mono)}
.editor-footer i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6684a4;margin-right:8px;vertical-align:middle}
.editor-footer .active i{background:var(--accent);box-shadow:0 0 9px #5bdcffaa}
kbd{font:11px var(--mono);border:1px solid #46607e;border-radius:4px;padding:2px 5px;color:#a9bfd7}
.terminal-mark{color:var(--accent);font:bold 15px var(--mono)}
.console-body{padding:22px}
#console-output{font:14px/1.75 var(--mono);color:var(--muted);min-height:60px;max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
#console-output.success{color:#b7ecfa}
#console-output.error{color:var(--danger)}
.result-divider{height:1px;background:var(--line);margin:20px 0}
.result-heading{font-size:18px;font-weight:600;margin-bottom:17px}
.result-heading.success{color:#92e4f5}
.result-heading.error{color:var(--danger)}
.result-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.result-metric{background:#162a43;border:1px solid #2a4767;border-radius:8px;padding:13px 14px}
.result-metric span{display:block;font-size:12px;color:var(--muted)}
.result-metric strong{display:block;font:600 22px var(--mono);color:var(--text);margin-top:5px}
.result-metric strong small{font-size:11px;color:var(--dim)}
.result-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:24px}
.result-actions .primary-button,.result-actions .outline-button{min-width:158px}
.toast{position:fixed;z-index:10;bottom:22px;left:50%;transform:translateX(-50%);max-width:90vw;background:#193e5f;border:1px solid #4ea8d0;border-radius:8px;padding:12px 18px;color:var(--text);font-size:13px;box-shadow:0 10px 28px #0006}
@media(max-width:700px){
  .brand{font-size:24px;letter-spacing:2.5px}
  .intro-position{font-size:10px}
  .intro-content h1{font-size:39px;letter-spacing:-1.5px}
  .intro-description{font-size:17px;margin-bottom:30px}
  .learning-panel{padding:19px}
  .learning-panel p{font-size:17px}
  .intro-tip{font-size:14px}
  .intro-actions{gap:14px}
  .intro-note{font-size:12px}
  .practice-wrap{padding:20px 16px 36px;gap:16px}
  .panel-header{padding:13px 14px}
  .panel-title{font-size:12px}
  .panel-meta{font-size:9px}
  .code-scroll{height:clamp(325px,54vh,510px);padding:23px 12px 20px 0}
  .editor-area{font-size:13px;line-height:26px}
  .line-numbers{width:37px;padding-right:9px;font-size:10px;line-height:26px}
  .line-numbers span{height:26px}
  #code-display{margin-left:48px}
  #code-input{left:48px;width:calc(100% - 48px);min-width:calc(100% - 48px)}
  .editor-footer{padding:10px 13px;font-size:11px}
  .console-body{padding:17px}
  #console-output{font-size:12px}
  .result-metrics{grid-template-columns:repeat(2,1fr)}
  .result-metric strong{font-size:20px}
  .result-actions>*{flex:1}
  .countdown-inner>p{font-size:11px}
  #countdown-number{font-size:150px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}

/* Inicio, caminos y recorrido */
.hub-screen{min-height:100vh;background:radial-gradient(circle at 82% 12%,#102c52 0,transparent 34%),radial-gradient(circle at 12% 92%,#0c2845 0,transparent 30%),var(--bg)}
.shell{max-width:1060px;margin:0 auto;padding:38px 36px 70px}
.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.back-button{background:transparent;color:var(--muted);font:600 14px var(--sans);padding:8px 0;transition:color .15s}
.back-button:hover{color:var(--text)}
.link-button{background:transparent;color:var(--muted);font:12px var(--mono);padding:0;text-decoration:underline;text-underline-offset:3px}
.link-button:hover{color:var(--text)}
.editor-footer-right{display:flex;align-items:center;gap:18px}
.player-badge{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px;font:500 12px var(--mono);letter-spacing:1px;color:var(--dim);text-align:right}
.player-badge strong{color:var(--accent);font-weight:600}
.hero{margin:0 0 34px;max-width:660px}
.hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.1;letter-spacing:-1.8px;font-weight:500;margin:14px 0 14px}
.hero p{font-size:17px;line-height:1.65;color:#bdcfe4;margin:0}
.language-grid,.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.language-card,.course-card{--course:var(--accent);display:grid;gap:10px;align-content:start;text-align:left;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 55px #00000020;transition:transform .15s,border-color .15s}
.language-card:hover,.course-card:hover{transform:translateY(-2px);border-color:#4e8eb6}
.language-card[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.language-card[aria-disabled="true"]:hover{transform:none;border-color:var(--line)}
.language-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.glyph{font:900 30px/1 'Orbitron','Arial Black',Impact,sans-serif;color:var(--accent);letter-spacing:1px}
.badge{font:600 10px var(--mono);letter-spacing:1.5px;color:var(--muted);border:1px solid #385273;border-radius:4px;padding:4px 8px}
.language-card strong{font-size:24px;font-weight:600;letter-spacing:-.5px}
.language-card p,.course-card p{margin:0;font-size:15px;line-height:1.6;color:#bdcfe4}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font:12px var(--mono);letter-spacing:.5px;color:var(--dim);margin-top:6px}
.card-creatures{font:600 11px var(--mono);letter-spacing:1.5px;color:var(--muted);text-transform:uppercase}
.progress{height:6px;background:#1c3350;border-radius:4px;overflow:hidden}
.progress i{display:block;height:100%;border-radius:4px;transition:width .4s}
.course-card{border-top:3px solid var(--course)}
.course-index{font:600 11px var(--mono);letter-spacing:1.5px;color:var(--dim)}
.course-card h2{font:900 26px/1.1 'Orbitron','Arial Black',Impact,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--course);margin:2px 0 0}
.epithet{font:600 11px var(--mono);letter-spacing:1.5px;color:var(--muted)}
.medals{display:flex;gap:6px;flex-wrap:wrap}
.medal{display:inline-block;font:600 10px/1 var(--mono);letter-spacing:1px;padding:5px 7px;border-radius:4px;vertical-align:middle}
.medal.oro{background:#5a4410;color:#ffd166}
.medal.plata{background:#3a4552;color:#e4edf6}
.medal.bronce{background:#4a3324;color:#f2b28a}
.path-hero h1{font:900 clamp(38px,6vw,70px)/1.05 'Orbitron','Arial Black',Impact,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--course,var(--accent))}
.path-progress{display:grid;gap:10px;margin-top:24px;font:12px var(--mono);letter-spacing:.5px;color:var(--muted)}
.path-list{list-style:none;padding:0;margin:0;display:grid}
.path-list li+li{border-top:1px dashed #2a415f}
.path-node{display:flex;align-items:center;gap:18px;width:100%;padding:18px 8px;text-align:left;background:transparent;border-radius:10px;transition:background .15s}
.path-node:hover{background:#13253f}
.path-node[aria-disabled="true"]{cursor:not-allowed;opacity:.5}
.path-node[aria-disabled="true"]:hover{background:transparent}
.node-mark{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--mono);border:2px solid var(--line);background:var(--surface-2);color:var(--muted)}
.path-node.done .node-mark{background:var(--course,var(--accent));border-color:var(--course,var(--accent));color:#07233b;font-size:18px}
.path-node.current .node-mark{border-color:var(--course,var(--accent));color:var(--course,var(--accent));box-shadow:0 0 0 6px #5bdcff1f}
.node-body{display:grid;gap:4px;min-width:0;flex:1}
.node-body strong{font-size:17px;font-weight:600}
.node-body small{font:12px var(--mono);color:var(--dim);letter-spacing:.3px}
.path-node .arrow{color:var(--course,var(--accent));font-size:20px;flex:none}
.result-heading strong{color:var(--accent)}
@media(max-width:700px){
  .shell{padding:23px 21px 45px}
  .top-bar{flex-wrap:wrap}
  .player-badge{width:100%;justify-content:flex-start;text-align:left;font-size:11px}
  .hero{margin:0 0 26px}
  .hero h1{font-size:34px;letter-spacing:-1.2px}
  .hero p{font-size:16px}
  .language-grid,.course-grid{grid-template-columns:1fr}
  .language-card,.course-card{padding:20px}
  .path-node{gap:12px;padding:14px 4px}
  .node-mark{width:40px;height:40px;font-size:12px}
  .node-body strong{font-size:15px}
  .node-body small{font-size:11px}
  .editor-footer-right{gap:12px}
}
/* Barra superior compartida */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 36px;background:#081426e6;backdrop-filter:blur(10px);border-bottom:1px solid #1b2f4b}
.topbar .brand{font-size:24px;letter-spacing:3px}
.topnav{display:flex;align-items:center;gap:6px}
.nav-link{background:transparent;color:var(--muted);font:600 13px var(--sans);padding:8px 12px;border-radius:8px}
.nav-link:hover{color:var(--text);background:#13253f}
.nav-pill{background:#13253f;color:var(--accent);font:700 12px var(--mono);letter-spacing:1px;padding:8px 12px;border-radius:8px;border:1px solid #2a415f}
.nav-pill:hover{background:#1b3553}
.nav-account{background:var(--accent);color:#07233b;font:700 13px var(--sans);padding:8px 14px;border-radius:8px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account.signed{background:#13253f;color:var(--text);border:1px solid #2a415f}
.nav-account:hover{filter:brightness(1.1)}
.hub-screen .shell,.practice-wrap{padding-top:22px}
.screen-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin:0 0 clamp(26px,5vh,56px)}
.screen-context{font:500 12px var(--mono);letter-spacing:1px;color:var(--dim);white-space:nowrap;text-transform:uppercase}
.shell.narrow{max-width:640px}
.player-badge{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px;font:500 12px var(--mono);letter-spacing:1px;color:var(--dim);text-align:right}
.player-badge .who{color:var(--text);font-weight:600;letter-spacing:.5px}
.pro-tag{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:1.5px;color:#07233b;background:#ffd166;border-radius:4px;padding:4px 6px;font-style:normal;vertical-align:middle}
.path-node .pro-tag{flex:none}
.path-node.boss .node-mark{border-style:double;border-width:4px}
.intro-xp{font:600 12px var(--mono);letter-spacing:1px;color:var(--accent)}
.run-button{background:var(--accent);color:#07233b;font:700 12px var(--sans);padding:7px 12px;border-radius:7px;display:inline-flex;align-items:center;gap:8px}
.run-button kbd{color:#07233b;border-color:#07233b66}
.run-button:hover{filter:brightness(1.1)}
.result-note{font-size:13px;color:var(--muted);margin:14px 0 0}
.empty,.hint{color:var(--muted);font-size:15px;line-height:1.6}
.hint.success{color:#92e4f5}
/* Arena */
.arena-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.segmented{display:inline-flex;background:#0f1d33;border:1px solid var(--line);border-radius:9px;padding:3px}
.segment{background:transparent;color:var(--muted);font:600 13px var(--sans);padding:8px 14px;border-radius:7px}
.segment.active{background:var(--accent);color:#07233b}
.arena-week{font:12px var(--mono);letter-spacing:1px;color:var(--dim)}
.outline-button.small{padding:8px 14px;font-size:13px;min-width:0;margin-left:auto}
.arena-me{margin-bottom:22px}
.me-card{display:grid;gap:6px;padding:16px 20px;background:#0f1d33;border:1px solid #2a415f;border-left:3px solid var(--accent);border-radius:10px;max-width:max-content}
.me-card strong{font:900 30px 'Orbitron','Arial Black',Impact,sans-serif;color:var(--accent)}
.me-card span:last-child{font:12px var(--mono);color:var(--muted)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;align-items:end}
.podium-card{display:grid;gap:6px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-align:center;justify-items:center}
.podium-card.place-1{order:2;border-color:#ffd166;background:linear-gradient(160deg,#1b2b46,#121f37);box-shadow:0 20px 60px #ffd16622;padding-top:34px}
.podium-card.place-2{order:1;border-color:#c9d4e2}
.podium-card.place-3{order:3;border-color:#d99b6c}
.podium-card .place{font:900 22px 'Orbitron','Arial Black',Impact,sans-serif;color:var(--accent)}
.podium-card.place-1 .place{color:#ffd166;font-size:30px}
.podium-card strong{font-size:18px;font-weight:600;word-break:break-word}
.podium-card .xp{font:700 16px var(--mono);color:var(--text)}
.podium-card small{font:11px var(--mono);letter-spacing:.5px;color:var(--dim)}
.arena-table{margin-bottom:26px;overflow:auto}
.arena-table table{width:100%;border-collapse:collapse;font-size:14px}
.arena-table th{text-align:left;font:600 11px var(--mono);letter-spacing:1.5px;color:var(--dim);padding:10px 12px;border-bottom:1px solid var(--line)}
.arena-table td{padding:14px 12px;border-bottom:1px solid #1b2f4b;vertical-align:top}
.arena-table td small{display:block;font:11px var(--mono);color:var(--dim);margin-top:3px}
.arena-table tr.me td{background:#13253f}
.arena-table td:first-child{font:700 14px var(--mono);color:var(--accent);white-space:nowrap}
.tournament-card{padding:26px;background:linear-gradient(140deg,#152942,#122139);border:1px solid #375679;border-left:3px solid #ffd166;border-radius:10px}
.tournament-card h2{font-size:22px;font-weight:600;margin:8px 0 8px}
.tournament-card p{margin:0;color:#bdcfe4;line-height:1.6}
/* Cuenta y PRO */
.account-panel,.premium-panel{display:grid;gap:22px}
.auth-form{display:grid;gap:14px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.auth-form h2{margin:0;font-size:22px;font-weight:600}
.field{display:grid;gap:6px}
.field span{font:600 11px var(--mono);letter-spacing:1.5px;color:var(--muted)}
.field input,.field select{font:15px var(--sans);color:var(--text);background:#0b1730;border:1px solid #2a415f;border-radius:8px;padding:12px 14px;outline:none}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #5bdcff22}
.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.form-error{margin:0;color:var(--danger);font-size:14px}
.profile-card{display:grid;gap:14px;padding:22px 26px;background:linear-gradient(140deg,#152942,#122139);border:1px solid #375679;border-radius:12px;justify-items:start}
.profile-stats{display:flex;flex-wrap:wrap;gap:8px 22px;font:12px var(--mono);letter-spacing:.5px;color:var(--muted)}
.profile-stats strong{color:var(--accent)}
.premium-box{display:grid;gap:18px;padding:26px;background:var(--surface);border:1px solid #ffd16655;border-radius:12px;justify-items:start}
.perks{margin:0;padding-left:20px;color:#bdcfe4;line-height:1.9}
@media(max-width:700px){
  .topbar,.topbar.compact{padding:10px 16px;gap:8px}
  .topbar .brand{font-size:18px;letter-spacing:2px}
  .nav-link{padding:8px 8px;font-size:12px}
  .nav-account{max-width:110px;padding:8px 10px;font-size:12px}
  .screen-bar{flex-wrap:wrap;min-height:0;gap:8px 12px}
  .player-badge{width:100%;justify-content:flex-start;text-align:left}
  .podium{grid-template-columns:1fr}
  .podium-card.place-1,.podium-card.place-2,.podium-card.place-3{order:0}
  .arena-table td,.arena-table th{padding:10px 8px;font-size:13px}
  .outline-button.small{margin-left:0}
}
/* Ilustraciones */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 40px;max-width:none}
.hero-copy{max-width:660px}
.hero-art{width:clamp(300px,34vw,480px);height:auto;justify-self:end;filter:drop-shadow(0 0 2px #ffffffb0) drop-shadow(0 24px 50px #5bdcff33);animation:hover-art 6s ease-in-out infinite}
@keyframes hover-art{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:900px){.hero-split{grid-template-columns:1fr}.hero-art{justify-self:center;width:min(60vw,320px)}}
@media(max-width:700px){.hero-art{width:230px;order:-1}}
@media(prefers-reduced-motion:reduce){.hero-art{animation:none}}
/* ---------- Game feel ---------- */
:root{--gold:#ffd166}
.streak-pill{display:inline-flex;align-items:center;gap:6px;color:var(--muted);border-color:#2a415f;background:#0f1d33}
.streak-pill.lit{color:#ffb35b;border-color:#ffb35b66;background:#2a1d10;box-shadow:0 0 14px #ffb35b33}
.streak-pill .flame{filter:grayscale(1);opacity:.6}
.streak-pill.lit .flame{filter:none;opacity:1;animation:flicker 1.4s ease-in-out infinite}
.icon-pill{padding:8px 10px}
@keyframes flicker{0%,100%{transform:scale(1)}50%{transform:scale(1.15) rotate(-4deg)}}
.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
#fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:40}
/* Continuar */
.continue-card{margin-top:26px;display:grid;gap:10px}
.continue-button{--course:var(--accent);display:flex;align-items:center;gap:16px;width:100%;max-width:560px;text-align:left;padding:16px 18px;background:linear-gradient(120deg,#132844,#0f1d33);border:1px solid #2f4d75;border-left:4px solid var(--course);border-radius:12px;box-shadow:0 18px 50px #00000040;transition:transform .15s,border-color .15s}
.continue-button:hover{transform:translateY(-2px);border-color:var(--course)}
.continue-mark{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--mono);color:var(--course);border:2px solid var(--course);box-shadow:0 0 0 6px color-mix(in srgb,var(--course) 15%,transparent)}
.continue-body{display:grid;gap:4px;min-width:0;flex:1}
.continue-body strong{font-size:17px;font-weight:600}
.continue-body small{font:12px var(--mono);color:var(--dim)}
.continue-cta{flex:none;font:700 13px var(--sans);color:#07233b;background:var(--course);padding:9px 14px;border-radius:8px}
/* Panel de juego en el inicio */
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;margin:34px 0}
.dash-card{display:grid;gap:12px;align-content:start;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 55px #00000020}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dash-meta{font:500 12px var(--mono);letter-spacing:.5px;color:var(--dim)}
.dash-hint{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.dash-hint.warn{color:#ffb35b}
.quests-card.perfect{border-color:#ffd16677;box-shadow:0 20px 60px #ffd16622}
.quest-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.quest{display:flex;align-items:center;gap:14px}
.quest-check{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid #2f4d75;display:grid;place-items:center;font:700 14px var(--mono);color:#07233b;background:transparent}
.quest.done .quest-check{background:var(--gold);border-color:var(--gold)}
.quest-body{flex:1;min-width:0;display:grid;gap:5px}
.quest-body strong{font-size:14px;font-weight:600}
.quest-body small{font:11px var(--mono);color:var(--dim)}
.quest.done .quest-body strong{color:var(--muted);text-decoration:line-through;text-decoration-color:#ffd16688}
.progress.thin{height:4px}
.quest-reward{flex:none;font:700 11px var(--mono);letter-spacing:1px;color:#07233b;background:var(--accent);padding:5px 8px;border-radius:5px}
.quest-reward.claimed{background:var(--gold)}
.streak-number{display:flex;align-items:baseline;gap:8px}
.streak-number .flame{font-size:30px;filter:grayscale(1);opacity:.5;align-self:center}
.streak-number.lit .flame{filter:none;opacity:1;animation:flicker 1.4s ease-in-out infinite}
.streak-number strong{font:900 44px/1 'Orbitron','Arial Black',Impact,sans-serif;color:var(--text)}
.streak-number.lit strong{color:#ffb35b;text-shadow:0 0 24px #ffb35b55}
.streak-unit{font:600 12px var(--mono);letter-spacing:1px;color:var(--dim);text-transform:uppercase}
.streak-week{display:flex;gap:6px}
.streak-week i{flex:1;height:10px;border-radius:3px;background:#1c3350}
.streak-week i.on{background:#ffb35b;box-shadow:0 0 10px #ffb35b66}
.streak-week i.today{outline:2px solid var(--accent);outline-offset:1px}
.rank-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rank-title strong{font:900 22px 'Orbitron','Arial Black',Impact,sans-serif;letter-spacing:1.5px;color:var(--accent)}
.rank-title span{font:12px var(--mono);color:var(--dim)}
.rank-ladder{display:flex;flex-wrap:wrap;gap:6px}
.rank-ladder span{font:600 10px var(--mono);letter-spacing:1px;padding:4px 7px;border-radius:4px;border:1px solid #2a415f;color:var(--dim)}
.rank-ladder span.reached{color:var(--text);border-color:#3f6591}
.rank-ladder span.current{color:#07233b;background:var(--accent);border-color:var(--accent)}
/* HUD */
.hud{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:11px}
.hud-stat{display:grid;gap:4px}
.hud-stat span{font:600 10px var(--mono);letter-spacing:1.5px;color:var(--dim)}
.hud-stat strong{font:700 24px/1 var(--mono);color:var(--text)}
.hud-stat strong small{font-size:12px;color:var(--dim);font-weight:500}
.hud-combo strong{color:var(--accent);transition:color .2s}
.hud-combo.hot strong{color:var(--gold);text-shadow:0 0 18px #ffd16666}
.hud-progress .progress{margin:4px 0 2px}
.hud-progress .progress i{background:var(--accent);transition:width .15s}
.hud.challenge .hud-accuracy{opacity:.7}
.hud-flash{position:absolute;right:18px;top:-14px;font:900 16px 'Orbitron','Arial Black',Impact,sans-serif;letter-spacing:2px;color:var(--gold);text-shadow:0 0 18px #ffd16688;opacity:0;transform:translateY(6px);pointer-events:none}
.hud-flash.show{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:0;transform:translateY(10px) scale(.8)}20%{opacity:1;transform:translateY(-4px) scale(1.1)}80%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-16px)}}
/* Jefe y resultados */
.boss-bar{display:grid;gap:8px;margin-bottom:16px;padding:12px 14px;border:1px solid #ff9ba966;border-radius:9px;background:#2a1220}
.boss-label{display:flex;justify-content:space-between;font:600 11px var(--mono);letter-spacing:1.5px;color:#ff9ba9}
.progress.boss{height:10px;background:#1a0b14}
.progress.boss i{background:linear-gradient(90deg,#ff5d7a,#ff9ba9);transition:width 1.1s cubic-bezier(.2,.9,.3,1)}
.boss-bar.defeated{border-color:var(--gold);background:#2a2410}
.boss-bar.defeated .boss-label{color:var(--gold)}
.result-gain{display:flex;align-items:center;gap:12px;margin:6px 0 16px}
.gain-label{font:600 12px var(--mono);letter-spacing:2px;color:var(--dim)}
.result-gain strong{font:900 44px/1 'Orbitron','Arial Black',Impact,sans-serif;color:var(--accent);text-shadow:0 0 24px #5bdcff55}
.result-gain .medal{font-size:12px;padding:7px 10px}
.result-events{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.event{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:9px;background:#0f1d33;border:1px solid var(--line);font-size:14px;animation:slide-in .4s ease-out both}
.event span:first-child{font-size:18px}
.event.quest{border-color:#ffd16666}
.event.streak{border-color:#ffb35b55}
.event.rank{border-color:#5bdcff44}
.event.arena{border-color:#8f9bff55}
@keyframes slide-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* Celebración */
.celebration{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#030b19cc;backdrop-filter:blur(6px);padding:20px}
.celebration-card{display:grid;gap:14px;justify-items:center;text-align:center;padding:40px 44px;background:linear-gradient(160deg,#1b2b46,#0f1d33);border:1px solid #ffd16688;border-radius:16px;box-shadow:0 40px 120px #ffd16633;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.celebration-rank{font:900 clamp(34px,6vw,64px)/1.05 'Orbitron','Arial Black',Impact,sans-serif;letter-spacing:3px;color:var(--gold);text-shadow:0 0 40px #ffd16677}
.celebration-card p{margin:0;color:#bdcfe4}
/* Camino como mapa */
.path-list{position:relative}
.path-list li{position:relative}
.path-list li::before{content:"";position:absolute;left:31px;top:-1px;bottom:-1px;width:2px;background:#2a415f;z-index:0}
.path-list li.done::before{background:var(--course,var(--accent))}
.path-list li:first-child::before{top:50%}
.path-list li:last-child::before{bottom:50%}
.path-node{position:relative;z-index:1}
.node-mark{position:relative}
.path-node.current .node-mark{animation:ring 2s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--course,var(--accent)) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.path-node.boss .node-mark{width:56px;height:56px}
.crown{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:16px;filter:drop-shadow(0 0 6px #ffd166)}
.course-card.complete{box-shadow:0 20px 60px color-mix(in srgb,var(--course) 25%,transparent)}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .hud{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 14px}
  .hud-stat strong{font-size:20px}
  .continue-button{gap:12px;padding:14px}
  .continue-cta{display:none}
  .result-gain strong{font-size:36px}
  .celebration-card{padding:30px 22px}
  .streak-pill{padding:8px 10px}
  .path-list li::before{left:23px}
}
@media(max-width:700px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topnav{width:100%;justify-content:flex-end;gap:4px}
  .topnav .nav-link[data-go="/"]{display:none}
  .nav-pill{padding:7px 9px;font-size:11px}
  .nav-account{padding:7px 10px;max-width:120px}
}
/* ===================== THEME: GAME LOBBY (gold filigree, cut corners, starfield) ===================== */
:root{--bg:#050a16;--surface:#0c1730;--surface-2:#11203a;--line:#26406a;--gold:#e0b85c;--gold-2:#8d7132;--display:'Exo 2',var(--sans)}
html{background:#050a16}
body{background:transparent}
#stars{position:fixed;inset:0;z-index:-2;pointer-events:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 620px at 85% -10%,#173a6e99,transparent 60%),radial-gradient(700px 520px at -5% 105%,#3a1b6e66,transparent 60%),radial-gradient(1400px 500px at 50% 115%,#0e5f8a44,transparent 70%)}
.hub-screen,.intro-screen,.practice-screen,.countdown-screen{background:transparent}
h1,h2{font-family:var(--display)}
.hero h1{font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:clamp(28px,3.8vw,48px);line-height:1.1}
.hero p{color:#b9c9df}
.eyebrow{color:var(--gold);font-weight:600}
.eyebrow::before{content:"◆";font-size:7px;margin-right:8px;vertical-align:2px;opacity:.9}
.back-button,.screen-context{font-family:var(--display);text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.back-button{color:var(--gold)}
.screen-context{color:#c8b072}
/* Panels: cut corners + gold brackets */
.dash-card,.language-card,.course-card,.editor-card,.console-card,.auth-form,.profile-card,.premium-box,.podium-card,.tournament-card,.me-card,.hud,.continue-button,.celebration-card,.learning-panel{
  background:linear-gradient(165deg,#101d38f2,#0a1329e6);border:1px solid #2a4570;border-radius:3px;position:relative;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  box-shadow:inset 0 0 0 1px #ffffff08,inset 0 1px 0 #ffffff12
}
.dash-card::before,.language-card::before,.course-card::before,.hud::before,.auth-form::before,.podium-card::before,.premium-box::before,.tournament-card::before,.me-card::before,.profile-card::before,.celebration-card::before{content:"";position:absolute;top:8px;right:8px;width:14px;height:14px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);opacity:.85;pointer-events:none}
.dash-card::after,.language-card::after,.course-card::after,.hud::after,.auth-form::after,.podium-card::after,.premium-box::after,.tournament-card::after,.me-card::after,.profile-card::after,.celebration-card::after{content:"";position:absolute;bottom:8px;left:8px;width:14px;height:14px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);opacity:.85;pointer-events:none}
.language-card:hover,.course-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.course-card{border-top:1px solid #2a4570}
.course-card::before{border-color:var(--course)}
.panel-header{position:relative;background:linear-gradient(90deg,#16264a,#0f1b34)}
.panel-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--gold),transparent 65%)}
.panel-title{font-family:var(--display);text-transform:uppercase;letter-spacing:1.5px;font-size:12px}
.learning-panel{border-left:3px solid var(--gold);clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.editor-footer{background:#0a1329}
/* Buttons */
.primary-button{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:14px;background:linear-gradient(180deg,#9defff,#3cbfe9 55%,#1f8fc0);color:#04203a;border:1px solid #c6f4ff;border-radius:3px;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);padding:14px 34px;box-shadow:inset 0 1px 0 #ffffffaa,inset 0 -2px 0 #0b5b80;position:relative;overflow:hidden}
.primary-button:hover{background:linear-gradient(180deg,#bdf4ff,#5bd0f5 55%,#2aa0d0);transform:translateY(-1px)}
.primary-button::after{content:"";position:absolute;top:0;left:-60%;width:36%;height:100%;background:linear-gradient(100deg,transparent,#ffffff88,transparent);transform:skewX(-20deg);animation:sweep 3.2s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%,55%{left:-60%}100%{left:140%}}
.outline-button{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;border:1px solid var(--gold-2);color:#f1dfae;background:linear-gradient(180deg,#1a2a48,#0e1a33);border-radius:3px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.outline-button:hover{border-color:var(--gold);background:linear-gradient(180deg,#22365a,#122142)}
.continue-cta{font-family:var(--display);text-transform:uppercase;letter-spacing:1.5px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border-radius:2px}
.quest-reward,.medal,.pro-tag,.badge{clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);border-radius:2px}
.segmented{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border-radius:3px}
.segment{font-family:var(--display);text-transform:uppercase;letter-spacing:1px;font-size:12px}
.segment.active{background:linear-gradient(180deg,#9defff,#3cbfe9);color:#04203a}
.toast{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);border-radius:3px;border-color:var(--gold-2);background:#0f1b34}
/* Progress bars */
.progress{background:#0b1730;border:1px solid #223a5e;height:8px;border-radius:2px;box-sizing:content-box}
.progress i{border-radius:1px;box-shadow:0 0 10px currentColor}
.progress.thin{height:4px}
/* Top bar as game HUD */
.topbar{padding:10px 28px;gap:14px;background:linear-gradient(180deg,#0a1224f7,#070e1de8);border-bottom:1px solid #2a4570}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--gold) 75%,transparent)}
.topbar .brand{font-size:22px;text-shadow:0 0 22px #e0b85c33}
.topbar-left{display:flex;align-items:center;gap:18px;min-width:0}
.player-chip{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#132340,#0c182e);border:1px solid #2a4570;border-radius:3px;padding:5px 14px 5px 6px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);text-align:left;max-width:280px;transition:border-color .15s}
.player-chip:hover{border-color:var(--gold)}
.player-chip .avatar{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p,0)*1%),#223a5e 0);flex:none}
.player-chip .avatar i{width:30px;height:30px;border-radius:50%;background:#0b1730;display:grid;place-items:center;font:700 14px var(--display);color:var(--gold);font-style:normal}
.chip-text{display:grid;line-height:1.2;min-width:0}
.chip-text strong{font:600 13px var(--display);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px}
.chip-text small{font:10px var(--mono);letter-spacing:1px;color:var(--gold);white-space:nowrap;text-transform:uppercase}
.resources{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.resource{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:#0b1730;border:1px solid #2a4570;border-radius:3px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);font:700 13px var(--mono);color:var(--text);cursor:default}
.resource i{font-style:normal;font-size:11px;color:var(--gold)}
.resource small{font:600 9px var(--mono);letter-spacing:1px;color:var(--dim)}
.resource.streak{cursor:pointer;color:var(--muted)}
.resource.streak.lit{color:#ffb35b;border-color:#ffb35b66;box-shadow:0 0 14px #ffb35b33}
.resource.streak .flame{filter:grayscale(1);opacity:.6}
.resource.streak.lit .flame{filter:none;opacity:1;animation:flicker 1.4s ease-in-out infinite}
.nav-link{font-family:var(--display);text-transform:uppercase;letter-spacing:1.5px;font-size:12px;color:#c7d6ea}
.nav-link:hover{color:var(--gold);background:transparent}
.nav-pill{clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);border-radius:2px;border-color:#2a4570;color:var(--gold);background:#0b1730}
/* Lobby stage */
.lobby{align-items:center;gap:20px 30px}
.stage{position:relative;width:clamp(320px,38vw,540px);aspect-ratio:1;justify-self:end;display:grid;place-items:center}
.stage-frame{position:absolute;inset:0;width:100%;height:100%}
.stage .ring-a{transform-origin:260px 250px;animation:spin 26s linear infinite}
.stage .ring-b{transform-origin:260px 250px;animation:spin 44s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.stage .hero-art{position:relative;z-index:1;width:72%;height:auto;justify-self:center;filter:drop-shadow(0 0 2px #ffffffb0) drop-shadow(0 26px 40px #5bdcff44)}
.platform{position:absolute;left:50%;bottom:4%;width:82%;height:15%;transform:translateX(-50%);pointer-events:none}
.platform i{position:absolute;inset:0;border-radius:50%;border:1px solid #5bdcff55;box-shadow:inset 0 0 30px #5bdcff22,0 0 20px #5bdcff22}
.platform i:nth-child(2){inset:22% 12%;border-color:var(--gold);opacity:.8;animation:pulse-ring 3s ease-in-out infinite}
.platform i:nth-child(3){inset:42% 30%;background:radial-gradient(ellipse,#5bdcff66,transparent 70%);border:0;box-shadow:none}
@keyframes pulse-ring{50%{opacity:.35;transform:scale(1.05)}}
.roster-head{display:flex;align-items:center;gap:16px;margin:40px 0 16px}
.hairline{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.language-card .glyph{font-family:var(--display);font-weight:700;color:var(--gold);text-shadow:0 0 18px #e0b85c55}
.language-card strong{font-family:var(--display);text-transform:uppercase;letter-spacing:1.5px;font-size:20px}
.card-creatures{color:#c8b072}
.dash-card .eyebrow{font-size:11px}
.rank-title strong,.streak-number strong,.celebration-rank,.result-gain strong,.me-card strong,.podium-card .place{font-family:'Orbitron','Arial Black',Impact,sans-serif}
.rank-title strong{color:var(--gold)}
.rank-ladder span.current{background:var(--gold);border-color:var(--gold)}
/* Path as checkpoint medallions */
.node-mark{width:56px;height:56px;border:2px solid #2a4570;background:radial-gradient(circle at 50% 35%,#1a2c4d,#0b1730);box-shadow:inset 0 0 0 3px #0b1730,inset 0 0 0 4px #2a457099;font-family:var(--display);font-weight:700;color:var(--muted)}
.path-node.done .node-mark{background:radial-gradient(circle at 50% 35%,var(--course,var(--accent)),#0b1730 80%);color:#fff;border-color:var(--course,var(--accent));box-shadow:inset 0 0 0 3px #0b1730,inset 0 0 0 4px var(--course,var(--accent)),0 0 20px color-mix(in srgb,var(--course,var(--accent)) 40%,transparent)}
.path-node.current .node-mark{border-color:var(--gold);color:var(--gold);box-shadow:inset 0 0 0 3px #0b1730,inset 0 0 0 4px var(--gold),0 0 26px #e0b85c55}
.path-node.boss .node-mark{width:64px;height:64px}
.path-list li::before{left:35px}
.path-node{border-radius:3px}
.path-node:hover{background:#101d38}
.node-body strong{font-family:var(--display);text-transform:uppercase;letter-spacing:.8px;font-size:15px}
/* Results: achievement diamonds */
.slots{display:inline-flex;gap:10px;margin-left:14px}
.slots i{width:16px;height:16px;transform:rotate(45deg);border:1px solid #2a4570;background:#0b1730;opacity:.55}
.slots i.lit{opacity:1;box-shadow:0 0 14px currentColor}
.slots i.gold.lit{background:linear-gradient(135deg,#f3d68a,#c9a24d);border-color:#f3d68a;color:#e0b85c}
.slots i.silver.lit{background:linear-gradient(135deg,#f2f6fb,#aab7c8);border-color:#e4edf6;color:#c9d4e2}
.slots i.bronze.lit{background:linear-gradient(135deg,#f2b28a,#a8653a);border-color:#f2b28a;color:#d99b6c}
.result-metric{background:#0b1730;border:1px solid #223a5e;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);border-radius:2px}
.result-metric span{font-family:var(--display);text-transform:uppercase;letter-spacing:1px;font-size:11px;color:var(--gold)}
.result-heading{font-family:var(--display);text-transform:uppercase;letter-spacing:1.5px}
.hud-stat span{color:var(--gold)}
#countdown-number{color:var(--gold);text-shadow:0 0 70px #e0b85c66}
.countdown-inner>p{color:var(--gold)}
.celebration-card{border-color:var(--gold)}
.podium-card.place-1{border-color:var(--gold)}
.arena-table th{color:var(--gold);font-family:var(--display);letter-spacing:1.5px}
.field input,.field select{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border-radius:2px}
.field span{color:var(--gold)}
@media(max-width:900px){.stage{justify-self:center;width:min(70vw,360px)}}
@media(max-width:700px){
  .topbar{display:grid;grid-template-columns:1fr auto;gap:8px 10px;padding:10px 14px}
  .topbar-left{grid-column:1/-1;justify-content:space-between;gap:10px}
  .player-chip{max-width:190px;padding:4px 10px 4px 4px}
  .player-chip .avatar{width:32px;height:32px}
  .player-chip .avatar i{width:25px;height:25px;font-size:12px}
  .chip-text strong{font-size:12px}
  .resources{justify-self:start;gap:6px}
  .resource{padding:6px 9px;font-size:12px}
  .topnav{width:auto;justify-self:end;gap:4px}
  .topnav .nav-link{display:none}
  .stage{width:min(72vw,300px);order:-1}
  .stage .hero-art{width:76%}
  .hero h1{font-size:28px}
  .primary-button{padding:13px 24px;letter-spacing:1.5px}
  .path-list li::before{left:27px}
  .node-mark{width:48px;height:48px}
  .path-node.boss .node-mark{width:54px;height:54px}
}
.player-chip{min-width:0}
.chip-text strong,.chip-text small{overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:700px){.topbar-left .brand{flex:none}.player-chip{flex:0 1 auto;max-width:calc(100% - 140px)}}
#home-screen .player-badge{display:none}
.streak-number strong,.hud-stat strong,.result-gain strong,.me-card strong{font-family:var(--display)!important;font-weight:700}
.result-gain strong{font-size:48px}
@media(max-width:700px){.topnav .nav-link.arena-link{display:inline-flex;padding:7px 9px;font-size:11px;color:var(--gold);border:1px solid #2a4570;background:#0b1730;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}}