/* Horizon monochrome design — 17/10/2026.
 * Wallpaper supplied by the user as DESIGN (1).png, encoded as a local WebP.
 * Syne (SIL OFL, OFL-Syne.txt) is an independent wide display face, not Agrandir.
 * Load after the legacy styles and connections.css. No external font/CDN calls.
 * Keep learning cards and content panels light; decorative texture stays behind.
 */
@font-face{
  font-family:'Horizon Display';font-style:normal;font-weight:600 800;
  font-display:swap;src:url('horizon-display-latin.woff2') format('woff2');
}
:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
  --display:'Horizon Display','Arial Black',system-ui,sans-serif;
  --serif:var(--display);
  --ink:#11151a;--muted:#606972;
  --glass:rgba(255,255,255,.97);--glass-strong:#fff;
  --glass-line:rgba(17,21,26,.1);
  --glass-shadow:0 8px 22px rgba(0,0,0,.08),inset 0 1px 0 #fff;
}
body{background:#050505;color:var(--ink);isolation:isolate}
body::before{
  content:'';display:block!important;position:fixed;inset:0;z-index:0;
  width:100%;height:100vh;height:100dvh;left:0;top:0;border-radius:0;
  background:#050505 url('horizon-background-mono.webp') center center/cover no-repeat;
  pointer-events:none;opacity:1;filter:none;transform:none;animation:none!important;
}
body::after{display:none!important}
.screen,#start,#game{
  width:min(1040px,calc(100% - 48px));max-width:1040px;
  margin:26px auto;padding:32px clamp(20px,3vw,42px) 112px;
  border:1px solid rgba(255,255,255,.68);border-radius:28px;
  background:rgba(255,255,255,.97);
  box-shadow:0 24px 80px rgba(0,0,0,.24),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
#start::before{display:none}
.main-brand{width:100%;max-width:920px;gap:24px;margin-bottom:26px}
.main-brand-mascot{width:clamp(150px,15vw,210px)}
.main-brand-copy strong{
  font-family:var(--display);font-weight:800;font-size:clamp(3rem,6.5vw,5.5rem);
  letter-spacing:-.055em;line-height:.9;
}
.main-brand-copy span{margin-top:15px;font-size:clamp(.65rem,1.1vw,.9rem);letter-spacing:.32em}
.mode-kicker{font-size:.64rem;letter-spacing:.22em;color:#69717a}
#ttl{font-family:var(--display);font-size:clamp(1.45rem,2.7vw,2.25rem);font-weight:700;letter-spacing:-.045em;line-height:1.15}
.tag{margin-top:10px;font-size:.94rem;font-weight:500;letter-spacing:.01em}
h1,h2,h3,.badge,.dashboard-identity strong{font-family:var(--display)}
.box h2,.study-hero h2,.online-hero h2,.quiz-hero h2{font-weight:700;letter-spacing:-.04em;line-height:1.15}
.badge{font-weight:700;letter-spacing:-.035em}
.front.word{font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
.player-dashboard{
  margin-top:24px;border-radius:20px;border-color:#30353a;
  background:linear-gradient(115deg,#0b0e11,#20262c);box-shadow:0 10px 24px #0002;
}
.dashboard-identity strong{font-weight:700;letter-spacing:-.03em}
.home-feature-actions{max-width:700px;gap:12px;margin-top:24px;margin-bottom:20px}
.home-feature-actions .btn{border-radius:16px;box-shadow:0 4px 12px #0000000d}
.home-feature-actions .online-open{border:1px solid #31373c}
.home-feature-actions .study-open{background:#eef0f1!important;border-color:#dce0e3!important;color:#171b20!important}
.home-feature-actions .connections-open{background:#f4f5f5!important;border-color:#dce0e3!important;color:#171b20!important}
.connections-open .connections-icon{stroke:#515b63}
.school-entry{margin-top:-8px}
.school-open{grid-column:1/-1;display:flex;align-items:center;gap:14px;text-align:left;background:#fff!important;border:1px solid #dce0e3!important;color:#171b20!important}
.school-open svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.school-open>span:nth-child(2){flex:1;min-width:0}
.school-open strong,.school-open small{display:block}
.school-open small{font-size:.75rem;font-weight:500;color:#626b73;margin-top:4px}
.school-preview-tag{display:inline-block;font-size:.65rem;line-height:1.4;letter-spacing:.04em;font-weight:750;padding:5px 9px;border-radius:7px;background:#edf0f2;color:#424c55;flex-shrink:0}
.school-hero{max-width:650px;margin:36px auto 24px;text-align:center}
.school-hero h2{font-size:clamp(1.8rem,4vw,3.2rem);letter-spacing:-.055em;line-height:1.1;margin:12px 0 16px}
.school-hero>p:last-child{font-size:.95rem;line-height:1.6;color:#606972}
.school-preview-note{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px dashed #bbc4cc;border-radius:15px;background:#f5f7f8}
.school-preview-note p{margin:0;font-size:.85rem;line-height:1.5;color:#4d5964}
.school-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:16px;margin:32px 0}
.school-section-label{grid-column:1/-1;margin:0 0 12px;font:700 .75rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#626b73}
.school-podium-place{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;text-align:center}
.school-podium-avatar{display:grid;place-items:center;width:64px;height:64px;border:1px dashed #bbc4cc;border-radius:50%;color:#7b8791;background:#f1f4f6;font-size:1.5rem}
.school-podium-place strong{font-size:.95rem}.school-awaiting{font-size:.78rem;color:#626b73;line-height:1.4}
.school-podium-place small{font-weight:700;font-size:.8rem;color:#7b8791;margin-bottom:6px}
.school-podium-step{display:grid;place-items:center;width:100%;height:64px;border:1px solid #dfe3e6;border-radius:16px 16px 8px 8px;background:#f0f2f3;font:800 1.9rem var(--display);color:#78838d}
.school-first .school-podium-step{height:96px;background:#111820;color:#fff;border-color:#111820}.school-third .school-podium-step{height:48px}
.school-first .school-podium-avatar{width:76px;height:76px;background:#e6eaed;border-color:#78838d}
.school-list{padding:24px;border:1px solid #dfe3e6;background:#fff;border-radius:20px}
.school-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.school-list-head h3{font-size:1.15rem;margin:0;letter-spacing:-.03em}.school-list-head>span{color:#626b73;font-size:.75rem}
.school-order{font-size:.8rem;line-height:1.5;color:#626b73;margin:12px 0 20px}
.school-table{width:100%;border-collapse:collapse;text-align:left;font-size:.85rem}
.school-table caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.school-table th{padding:12px 8px;border-bottom:1px solid #dfe3e6;font-size:.73rem;color:#626b73;font-weight:600}
.school-table th:nth-child(n+3){text-align:right}
.school-table td{padding:0}
.school-empty{text-align:center;padding:30px 12px}.school-empty-mark{display:block;color:#939da6;font:700 2rem var(--display);margin-bottom:10px}
.school-empty strong{display:block;font-size:1rem}.school-empty p{font-size:.83rem;line-height:1.6;color:#626b73;max-width:430px;margin:10px auto 0}
.school-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:20px;border-top:1px solid #e6eaed}
.school-pagination>span{font-size:.75rem;color:#626b73}.school-pagination>div{display:flex;gap:8px}
.school-pagination .btn{font-size:.78rem;padding:10px 15px}.school-pagination .btn:disabled{cursor:not-allowed;background:#f3f5f6;color:#6b7580;opacity:1;box-shadow:none;transform:none}
@media(max-width:600px){
  .school-open{gap:10px}.school-open strong{font-size:.83rem}.school-open small{font-size:.7rem}:is(.school-open,.connections-open) .school-preview-tag{font-size:.58rem;padding:4px 6px;max-width:60px;white-space:normal;text-align:center}
  .school-preview-note{align-items:flex-start;gap:10px;padding:14px}.school-preview-note .school-preview-tag{max-width:65px}
  .school-podium{gap:8px}.school-podium-place strong{font-size:.78rem}.school-awaiting{font-size:.67rem}.school-podium-avatar{width:48px;height:48px}.school-first .school-podium-avatar{width:58px;height:58px}
  .school-list{padding:16px 12px}.school-list-head{align-items:flex-start;flex-direction:column;gap:6px}.school-list-head h3{font-size:1rem}
  .school-table th{font-size:.64rem;padding:10px 4px}.school-pagination{align-items:flex-start;flex-direction:column;gap:12px}.school-pagination>div{width:100%}.school-pagination .btn{flex:1}
}
.continue-level-card.diff{border-radius:20px;box-shadow:0 7px 20px #0000000d}
.continue-level-card.diff h2{font-weight:700;letter-spacing:-.04em}
.diff.path-step h3{font-weight:700;letter-spacing:-.035em}
.path-card{border-radius:16px;box-shadow:0 5px 16px #0000000a}
.top,.info,.quiz-panel,.study-card,.online-panel,.lobby-card{
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:#dfe3e6;box-shadow:0 5px 18px #0000000b;
}
.btn{border-radius:13px}
.box{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:24px}
#avatarGate,#nameGate,#levelGate,#tutorialGate{background:rgba(5,7,9,.64)}
.modal .btn.p{background:#111820;color:#fff}
.reset-progress-card{width:min(480px,100%);max-width:480px;text-align:left;padding:28px;max-height:calc(100dvh - 40px);overflow:auto}
.reset-progress-card h2{margin:8px 0 16px}
.reset-progress-card p{line-height:1.6;color:#424a52}
.reset-progress-card .reset-progress-keep{padding:14px;background:#f3f5f5;border-radius:12px;font-size:.88rem}
.reset-progress-ack{display:flex;align-items:flex-start;gap:12px;margin:22px 0;cursor:pointer;font-size:.9rem;line-height:1.5;color:#252b31}
.reset-progress-ack input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:#111820}
.reset-progress-actions{display:flex;gap:10px;flex-wrap:wrap}
.reset-progress-actions .btn{flex:1 1 170px;white-space:normal;min-height:46px}
.modal .btn.reset-confirm{background:#aa2536;color:#fff;border:1px solid #aa2536}
.modal .btn.reset-confirm:disabled{background:#f2e7e9;color:#79545b;border-color:#e6d6d9;opacity:1;cursor:not-allowed;transform:none;box-shadow:none}
.reset-progress-card :is(button,input):focus-visible{outline:3px solid #526e85;outline-offset:4px}
.app-footer{
  border:1px solid #ffffff24;border-radius:18px;
  background:rgba(11,14,17,.97);box-shadow:0 14px 40px #0005;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.app-footer .btn{border-radius:11px}
.site-credit{color:#8a9197}
@media(min-width:1400px){.screen,#start,#game{margin-top:36px;margin-bottom:36px}}
@media(max-width:700px){
  .screen,#start,#game{width:calc(100% - 20px);margin:10px auto 18px;padding:24px 14px 100px;border-radius:22px}
  .main-brand{gap:12px;margin-bottom:20px}
  .main-brand-mascot{width:clamp(86px,20vw,124px)}
  .main-brand-copy strong{font-size:clamp(1.5rem,7vw,3rem);letter-spacing:-.055em}
  .main-brand-copy span{margin-top:8px;font-size:clamp(.48rem,1.45vw,.65rem);letter-spacing:.24em}
  #ttl{font-size:clamp(1.4rem,4.8vw,1.85rem)}
  .tag{font-size:.83rem;line-height:1.5}
  .player-dashboard{margin-top:20px}
  .home-feature-actions{gap:10px}
  .app-footer{border-radius:15px}
}
@media(max-width:380px){
  .screen,#start,#game{padding-right:11px;padding-left:11px}
  .main-brand{gap:8px}.main-brand-mascot{width:80px}
  .main-brand-copy strong{font-size:1.48rem}
  .main-brand-copy span{font-size:.47rem;letter-spacing:.16em}
}