/* Bounce Cannon v2 — Swiss + Cyberpunk Japan.
   System (see 03_Design/UI-GUIDELINE.md): one type scale, line-heights on the 4 px grid,
   spacing only from the --s tokens. No other font sizes or gaps anywhere. */
/* Fonts on the web (licence check 2026-11-01): only fonts whose licence allows web use are shipped.
   Hyperion + Solaris: "feel free to convert it to a webfont" (fonts/LICENSE-*.txt) → WOFF. Mono: IBM Plex Mono Light (OFL, Joel chose C).
   Katakana (GN-KillGothic) + world names (Lazer84) are not licensed for the web → pre-rendered images in img/type/ (see TYPE_IMG in game.js). */
/* Hyperion's K reads as H, so K/k come from Solaris (same family name, split by unicode-range) */
@font-face{font-family:Hyp;src:url(fonts/Hyperion-Bold.woff) format('woff');unicode-range:U+0000-004A,U+004C-006A,U+006C-FFFF}
@font-face{font-family:Hyp;src:url(fonts/Solaris.woff) format('woff');unicode-range:U+004B,U+006B}
@font-face{font-family:Mono;src:url(fonts/IBMPlexMono-Light.woff) format('woff')}

:root{
  --ink:#0B0B0C;--panel:#141416;--hair:#2A2A2E;--paper:#EDEDE8;--dim:#8A8A86;
  --cyan:#00E5FF;--red:#FF2A2A;--yellow:#E8FF00;
  --acc:#8A5CFF; /* world accent, set per world from game.js */
  /* type scale: size / line-height */
  --t10:10px/12px;--t12:12px/16px;--t16:16px/24px;--t20:20px/24px;--t28:28px/32px;--t40:40px/40px;--t56:56px/56px;--t88:88px/88px;
  /* spacing */
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;
  --m:var(--s3);
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--ink);color:var(--paper);overflow:hidden;overscroll-behavior:none}
body{font:var(--t12) Mono,ui-monospace,monospace;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{height:100%;max-width:480px;margin:0 auto;position:relative}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation} /* no double-tap zoom on fast taps */

/* families (size always comes from a role below) */
.mono{font-family:Mono,ui-monospace,monospace;font-feature-settings:"tnum"}
.hyp{font-family:Hyp,sans-serif;text-transform:lowercase} /* Hyperion: lowercase slots = readable caps */
.kana{font-family:"Hiragino Sans",sans-serif}
/* katakana / world name as image: mask in the text colour, same advance + baseline as the font (TYPE_IMG) */
.timg{display:inline-block;height:1.6em;margin:-.3em;background:currentColor;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.kanji{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;font-weight:900}
.lbl{font:var(--t10) Mono,monospace;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.lbl b{font-weight:normal;color:var(--paper)}
.red{color:var(--red)}.dim{color:var(--dim)}.paper{color:var(--paper)}.coin{color:var(--yellow)}.acc{color:var(--acc)}
.hair{height:1px;background:var(--hair)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.grow{flex:1}

/* screen frame */
.screen{height:100%;display:flex;flex-direction:column;padding:calc(var(--st) + var(--s2)) var(--m) calc(var(--sb) + var(--s3))}
.topbar{height:44px;display:flex;justify-content:space-between;align-items:center;flex:none}
.topbar .mono{font:var(--t16) Mono}
.icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hair);color:var(--paper)}
.icon:active,.back:active{background:var(--panel)}
.back{height:44px;padding:0 var(--s3);border:1px solid var(--hair);font:var(--t12) Hyp,sans-serif;letter-spacing:.06em}

/* buttons: cut corners = tappable */
.cut{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.btn{height:64px;width:100%;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s4);background:var(--cyan);color:var(--ink);font:var(--t20) Hyp,sans-serif;letter-spacing:.04em;text-transform:lowercase}
.btn .kana,.btn .kanji{font-size:12px;line-height:16px;text-transform:none}
.btn:active{filter:brightness(.85)}
.btn:disabled{background:var(--hair);color:var(--dim);cursor:default}
.btn.ghost{background:var(--paper);color:var(--paper);position:relative}
.btn.ghost::before{content:"";position:absolute;inset:1.5px;background:var(--ink);clip-path:polygon(0 0,calc(100% - 13.4px) 0,100% 13.4px,100% 100%,13.4px 100%,0 calc(100% - 13.4px))}
.btn.ghost span{position:relative}

/* home */
/* home: content scrolls on small phones, START stays at the bottom */
.homescroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--m) var(--s3);margin:0 calc(-1 * var(--m));-webkit-mask-image:linear-gradient(#000 calc(100% - var(--s4)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--s4)),transparent)}
#home .btn{margin-top:0}
.tools{display:flex;gap:var(--s2)}
/* Logo F2 (Joel, Photoshop 2026-11-01; source 03_Design/2026-11-01_logo-neon-breaker/neon-breaker-logo.psd).
   PNG 1608 px wide incl. glow; the ink spans 1446 px starting 83 px in → ink = content width, glow hangs into the margin. */
.title{margin-top:var(--s2);font-weight:normal;line-height:0}
.logo-f2{display:block;width:calc(100% * 1608 / 1446);margin-left:calc(-100% * 83 / 1446);height:auto;pointer-events:none}
#title+.worldblock{margin-top:calc(var(--s3) - 100% * 72 / 1446)} /* glow below BREAKER (72 px @4×) hangs into the gap → ink to line = 16 px like the PSD */
.logo-c{font-family:Hyp,sans-serif;text-transform:lowercase;color:var(--cyan);text-shadow:0 0 18px rgba(0,229,255,.45)} /* name Neon Breaker (Joel): NEON Lazer84, BREAKER Hyperion */
.worldblock{margin-top:var(--s2)}
.worldblock .row{margin-top:var(--s2)}
.worldname{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s2)}
.worldname .kanji{font:900 var(--t40) "Hiragino Sans",sans-serif;color:var(--acc)}
.worldname .hyp{font:var(--t20) Hyp,sans-serif;letter-spacing:.04em}
.bar{height:2px;background:var(--hair);margin-top:var(--s3)}
.bar div{height:2px;background:var(--paper);width:0}
.worldblock .mono{font:var(--t12) Mono}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
.big{font:var(--t28) Mono;margin-top:var(--s1)}
.menu{margin-top:var(--s2);border-top:1px solid var(--hair)}
.menu button{width:100%;height:48px;display:flex;align-items:center;border-bottom:1px solid var(--hair);text-align:left}
.menu button:active{background:var(--panel)}
.menu .n{font:var(--t10) Mono;color:var(--dim);width:32px}
.menu .t{font:var(--t16) Hyp,sans-serif;letter-spacing:.04em;flex:1}
.menu .k{font:var(--t12) "Hiragino Sans",sans-serif;color:var(--dim);margin-right:var(--s3)}
.menu .arr{font:var(--t16) Mono}

/* sub screens */
.head{margin-top:var(--s3);flex:none}
.head .kana{font-size:16px;line-height:20px}
.head h2{font:var(--t40) Hyp,sans-serif;margin-top:var(--s2);letter-spacing:.02em}
.monitor{position:relative;height:184px;margin-top:var(--s4);background:var(--panel);display:flex;align-items:center;flex:none}
.monitor::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.monitor canvas{width:136px;height:136px;margin-left:var(--s3);flex:none}
.spec{flex:1;padding:0 var(--s3)}
.specname{font:var(--t20) Hyp,sans-serif;margin:var(--s2) 0 var(--s3);letter-spacing:.04em}
.spec .row{margin-top:var(--s2)}
.spec .mono{font:var(--t12) Mono}
.br{position:absolute;width:12px;height:12px;border:solid var(--paper);opacity:.7}
.tl{top:0;left:0;border-width:1px 0 0 1px}.tr{top:0;right:0;border-width:1px 1px 0 0}.bl{bottom:0;left:0;border-width:0 0 1px 1px}.bb{bottom:0;right:0;border-width:0 1px 1px 0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s3);overflow-y:auto;flex:1;align-content:start;padding-bottom:var(--s2)}
.tile{height:88px;background:var(--panel);position:relative;text-align:left}
.tile.sel{box-shadow:inset 0 0 0 1px var(--cyan)}
.tile .sw{position:absolute;left:var(--s2);top:var(--s2);width:28px;height:28px}
.tile .nm{position:absolute;left:var(--s2);bottom:var(--s4);font:var(--t10) Hyp,sans-serif;letter-spacing:.04em}
.tile .st{position:absolute;left:var(--s2);bottom:var(--s2);font:var(--t10) Mono}
.msg{min-height:32px;padding-top:var(--s2);font:var(--t12) Mono;color:var(--red);flex:none}

.list{margin-top:var(--s4);border-top:1px solid var(--hair);overflow-y:auto;flex:1}
.uprow{min-height:72px;display:flex;align-items:center;gap:var(--s3);border-bottom:1px solid var(--hair);padding:var(--s2) 0}
.uprow .info{flex:1}
.uprow .nm{font:var(--t16) Hyp,sans-serif;letter-spacing:.04em}
.uprow .ds{font:var(--t12) Mono;color:var(--dim)}
.pips{display:flex;gap:var(--s1);margin-top:var(--s2)}
.pips i{width:16px;height:4px;background:var(--hair)}
.pips i.on{background:var(--cyan)}
.pips i.own{background:var(--dim)} /* bought, but a lower level is chosen */
/* bought out (MAX and a chosen lower level): only a cyan line (Joel 2026-11-01).
   Line drawn like .btn.ghost: cyan fill + inner ink cut, so the slanted corners keep the line */
.buy.max,.buy.lower{background:var(--cyan);color:var(--cyan);position:relative;isolation:isolate}
.buy.max::before,.buy.lower::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--ink);clip-path:polygon(0 0,calc(100% - 13.6px) 0,100% 13.6px,100% 100%,13.6px 100%,0 calc(100% - 13.6px))}
.buy{height:44px;min-width:88px;padding:0 var(--s3);background:var(--cyan);color:var(--ink);font:var(--t16) Mono}
.buy:disabled{background:var(--hair);color:var(--dim)}
.wrow{height:48px;display:flex;align-items:center;gap:var(--s3);border-bottom:1px solid var(--hair)}
.wrow .n{font:var(--t10) Mono;color:var(--dim);width:16px}
.wrow .kanji{font:900 var(--t20) "Hiragino Sans",sans-serif;width:128px;white-space:nowrap}
.wrow .kanji.long{font-size:16px}
.wrow .nm{flex:1;font:var(--t12) Hyp,sans-serif;letter-spacing:.04em}
.wrow .th{font:var(--t12) Mono;color:var(--dim);text-align:right}
.wrow.lock .kanji,.wrow.lock .nm{opacity:.35}
.wrow.cur{box-shadow:inset 2px 0 0 var(--acc)}
/* world list: play an open world (current = Spielen, older = Fun: Weltpunkte/Münzen don't count, Rekord does) */
.wrow .play{height:32px;min-width:64px;padding:0 var(--s2);background:var(--cyan);color:var(--ink);font:var(--t12) Mono}
.wrow .play.ghost{background:none;color:var(--paper);box-shadow:inset 0 0 0 1px var(--hair)}
.funtag{font:var(--t10) Mono;letter-spacing:.08em;color:var(--ink);background:var(--yellow);padding:0 4px;margin-right:6px}
.funtag[hidden]{display:none}

/* game */
.play{padding-left:0;padding-right:0;padding-bottom:var(--sb)}
.hud{display:flex;justify-content:space-between;align-items:flex-start;padding:0 var(--m);height:72px;flex:none}
.hudscore{font:var(--t40) Mono;margin-top:var(--s1)}
.hudright{display:flex;gap:var(--s3);align-items:flex-start}
.hudsmall{font:var(--t20) Mono;margin-top:var(--s1)}
.progress{height:2px;background:var(--hair);flex:none}
.progress div{height:2px;background:var(--acc);width:0}
.progresslbl{padding:var(--s2) var(--m) 0;height:24px;flex:none}
.progresslbl .kanji{font-size:10px;line-height:12px}
.arena-wrap{flex:1;position:relative;min-height:0;display:flex;justify-content:center;align-items:center}
#arena{display:block;touch-action:none}
.strip{height:80px;flex:none;border-top:1px solid var(--hair);position:relative;touch-action:none}
.strip .marker{position:absolute;top:0;bottom:0;width:56px;margin-left:-28px;opacity:.6;left:50%}
/* the two lines follow the cannon colour (--mc, set in markerColour) */
.strip .marker::before,.strip .marker::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--mc,var(--cyan))}
.strip .marker::before{left:0}.strip .marker::after{right:0}
.strip .marker.uni::before,.strip .marker.uni::after{background:linear-gradient(to bottom,#ff4d4d,#ffb82e,#f5ff3d,#3dff7a,#3dc8ff,#c25cff);animation:rainbow 3s linear infinite}
.strip .marker.dra::before,.strip .marker.dra::after{background:linear-gradient(to top,transparent 0,rgba(255,238,96,.85) 12%,transparent 24%) 0 0/100% 50% repeat-y,linear-gradient(to top,#6e0800,#be1406,#ff3412,#ff781c,#ffbe28,#ffee60);animation:heat 1.4s linear infinite}
@keyframes heat{to{background-position:0 -40px,0 0}}
.strip .lbl{position:absolute;top:34px;pointer-events:none}
.strip .l{left:var(--m)}.strip .r{right:var(--m)}
.strip .kana{font-size:10px;line-height:12px}

.newworld{position:absolute;inset:0;background:rgba(11,11,12,.82);padding:var(--s6) var(--m) 0;pointer-events:none;animation:wipe .35s steps(6) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.nw-line{height:1px;background:var(--acc);margin:0 calc(-1 * var(--m)) var(--s3)}
.nw-kanji{font-size:152px;line-height:152px;margin-top:var(--s3);transform:scaleX(.82);transform-origin:left;letter-spacing:-.04em;white-space:nowrap} /* display exception */
.nw-kanji.long{font-size:72px;line-height:72px}
.nw-name{font-size:64px;line-height:64px;margin-top:var(--s2);padding-left:var(--s2);color:var(--acc);filter:drop-shadow(0 0 11px color-mix(in srgb,var(--acc) 50%,transparent))} /* display exception */
.newworld .row{margin:var(--s3) 0}
.newworld .mono{font:var(--t12) Mono}
.pausebox{position:absolute;inset:0;background:rgba(11,11,12,.88);padding:80px var(--m) 0;display:flex;flex-direction:column;gap:var(--s2)}
.pausebox .kana{font-size:16px;line-height:20px}
.pausetitle{font:var(--t56) Hyp,sans-serif;margin:var(--s2) 0 var(--s4)}

/* game over */
#over{padding-left:0;padding-right:0}
#over>*:not(.alert){margin-left:var(--m);margin-right:var(--m)}
.alert{height:56px;flex:none;background:var(--red);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 var(--m)}
.alert .kanji{font:900 var(--t28) "Hiragino Sans",sans-serif}.alert .hyp{font:var(--t16) Hyp,sans-serif;letter-spacing:.08em}
.overtitle{font:var(--t56) Hyp,sans-serif!important}
.overscore{margin-top:var(--s5)}
.huge{font:var(--t88) Mono;margin-top:var(--s1)}
.overscore .lbl.paper{margin-top:var(--s2)}
.rows{flex:none;overflow:visible}
.orow{height:48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--hair)}
.orow .mono{font:var(--t16) Mono}
.twobtn{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s2);flex:none}
.note{font:var(--t12) Mono;color:var(--dim);margin-top:var(--s4)}
#saverows{flex:none}

/* small phones (SE): same scale, one step smaller where it must */
@media (max-height:700px){
  
  .menu button{height:44px}.big{font:var(--t20) Mono}
  .huge{font:var(--t56) Mono}.overtitle{font:var(--t40) Hyp,sans-serif!important}.overscore{margin-top:var(--s3)}
}
@media (prefers-reduced-motion:reduce){.newworld{animation:none}}

/* Einstellungen (concept 03_Design/2026-11-01_einstellungen, Joel Ja) */
.headkanji{font-size:16px;line-height:20px}
.setlist{flex:none;overflow:visible}
.set{display:block;width:100%;border-bottom:1px solid var(--hair);padding:var(--s3) 0;text-align:left}
.set .nm{font:var(--t16) Hyp,sans-serif;letter-spacing:.04em}
.set .val{font:var(--t12) Mono}
.vol{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.vol .seg{display:flex;gap:var(--s1);flex:1}
.vol .seg i{flex:1;height:16px;background:var(--hair)}
.vol .seg i.on{background:var(--cyan)}
.pm{width:44px;height:44px;flex:none;border:1px solid var(--hair);font:var(--t20) Mono;display:flex;align-items:center;justify-content:center}
.pm:active,.setlink:active{background:var(--panel)}
.pm:disabled{color:var(--hair);cursor:default}
.setlink{display:flex;align-items:baseline;gap:var(--s3);min-height:56px;align-items:center}
.setlink .nm{flex:1}.setlink .arr{font:var(--t16) Mono}

/* Einhorn swatch: rainbow line keeps turning */
.sw.rainbow{animation:rainbow 3s linear infinite}
@keyframes rainbow{to{filter:hue-rotate(360deg)}}