/* Fellwing: a grown-up flight-sim look. Deep navy glass panels, amber accent, condensed uppercase type for labels
   (Barlow Condensed, OFL, self-hosted), monospaced instruments. No emoji, no cartoon shapes. (c) 2026 CyberMax. */
@font-face{font-family:"FW";src:url(fonts/barlow-condensed-800.woff2) format("woff2");font-weight:600 900;font-display:swap}
:root{--game:#3E8BFF;--game2:#FF9B4A;--acc:#FF9B4A;--fw:"FW","Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;--bg:#060A12;--bg2:#0B1322;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
body{background:radial-gradient(900px 520px at 50% -10%,rgba(62,139,255,.14),transparent 70%),radial-gradient(700px 480px at 100% 40%,rgba(255,155,74,.07),transparent 70%),linear-gradient(180deg,#060A12,#0B1322)}
.wrap{max-width:1240px}
.seo,.under,footer,.credit{max-width:760px;margin-left:auto;margin-right:auto}
.credit{font-size:12px;line-height:1.5;margin-top:6px}
.headline h1{margin:6px 0 0;font:800 clamp(30px,5vw,44px)/1 var(--fw);letter-spacing:.05em;text-transform:uppercase}
.headline .h1kw{font-family:system-ui,sans-serif;text-transform:none;letter-spacing:0}
.tag{margin:4px 0 10px}
.top .icon{font:800 13px var(--fw);letter-spacing:.12em}
.stage{position:relative;margin-top:8px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 80px rgba(0,0,0,.55);background:linear-gradient(180deg,#3B6FAE,#9DB8D6 60%,#4A5A44);isolation:isolate}
#c{display:block;width:100%;height:clamp(460px,calc(100svh - 150px),800px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none;background:transparent}
.hudc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
@media (max-width:900px),(pointer:coarse){body.playing{overflow:hidden}body.playing .stage{position:fixed;inset:0;margin:0;border-radius:0;z-index:60}body.playing #c{height:100svh;height:100dvh}}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;color:#EEF2F7;overflow:auto;text-align:center;z-index:6;background:linear-gradient(180deg,rgba(3,6,12,.18),rgba(3,6,12,.7))}
.ov.load{background:radial-gradient(120% 90% at 50% 30%,#14233C,#05080F)}
.logo{font:800 italic clamp(60px,12vw,120px)/.86 var(--fw);letter-spacing:.02em;margin:0;color:#F4F6F8;text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.logo i{font-style:italic;color:var(--acc)}
.logo.sm{font-size:56px}
.lbar{width:min(320px,70%);height:4px;background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px}.lbar i{display:block;height:100%;width:4%;background:linear-gradient(90deg,#3E8BFF,#FF9B4A);transition:width .2s}
.hint{color:#A9B3C2;font-size:14px;margin:0}.hint.keys{max-width:560px;font-size:13px}
.mday{margin:0;font-weight:700;max-width:460px}
.btn{font-family:var(--fw);letter-spacing:.1em;text-transform:uppercase;border-radius:4px}
.btn.fly{min-height:58px;padding:10px 34px;font-size:24px;font-weight:800;background:var(--acc);color:#140A02;box-shadow:0 0 0 1px rgba(255,200,140,.6),0 10px 40px rgba(255,155,74,.35)}
.btn.fly.sm{min-height:44px;font-size:18px;padding:6px 20px}
.btn.ghost{border-color:rgba(255,255,255,.2);color:#E8ECF2}
.btn.pass{background:linear-gradient(135deg,#FFC067,#FF8A3D)}
.mbtn{font:800 18px var(--fw);letter-spacing:.12em;color:#E8ECF2;background:rgba(8,14,24,.6);border:1px solid rgba(255,255,255,.2);padding:10px 18px;min-height:46px;cursor:pointer;border-radius:4px;backdrop-filter:blur(6px)}
.mbtn:hover{border-color:var(--acc);color:#fff}.mbtn.sm{font-size:15px;min-height:40px;padding:6px 14px}
.chip{font:700 14px var(--fw);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;border:1px solid rgba(255,255,255,.18);background:rgba(8,14,24,.55);color:#E6EAF0;padding:7px 12px;cursor:pointer;min-height:36px}
.chip[aria-pressed=true]{border-color:var(--acc);background:rgba(255,155,74,.18);color:#fff}
.chip .lk,.pk-i .lk{font-style:normal;font-size:11px;color:#FFC067;margin-left:5px;letter-spacing:.1em}
html.cmx-pro .chip .lk,html.cmx-pro .pk-i .lk{display:none}
/* menu */
#menu{justify-content:flex-start;padding-top:max(20px,4vh);gap:14px;background:linear-gradient(180deg,rgba(3,6,12,0) 0,rgba(3,6,12,.25) 35%,rgba(3,6,12,.85) 100%)}
.m-head{margin-top:1vh}.m-sub{margin:6px 0 0;font:700 15px var(--fw);letter-spacing:.42em;color:#D2DAE6;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.m-daily,.m-chal{border-left:3px solid var(--acc);background:rgba(6,11,20,.74);padding:10px 16px;text-align:left;max-width:540px;width:100%;backdrop-filter:blur(8px)}
.m-daily b,.m-chal b{font:800 20px var(--fw);letter-spacing:.08em;display:block}.m-daily span,.m-chal span{color:#BAC4D2;font-size:14px}
.m-chal{border-left-color:#3E8BFF}
.m-play{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.m-opts{display:flex;flex-direction:column;gap:8px;max-width:760px;width:100%;background:rgba(6,11,20,.72);border:1px solid rgba(255,255,255,.08);padding:12px;backdrop-filter:blur(8px);border-radius:6px}
.m-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-start;text-align:left}
.m-lbl{font:800 13px var(--fw);letter-spacing:.2em;color:#93A0B3;min-width:84px}
.m-foot{margin:0;color:#A9B3C2;font-size:13px}
/* place picker */
.picker{justify-content:flex-start;background:rgba(4,8,14,.9);backdrop-filter:blur(10px)}
.pk-top{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:900px}.pk-top b{font:800 26px var(--fw);letter-spacing:.08em;text-transform:uppercase}
.pk-tabs{max-width:900px;width:100%}
.pk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;max-width:900px;width:100%;text-align:left}
.pk-i{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:6px;cursor:pointer;color:#EEF2F7;font:inherit;text-align:left}
.pk-i:hover{border-color:var(--acc)}.pk-i b{font:800 18px var(--fw);letter-spacing:.06em;text-transform:uppercase}.pk-i span{color:#A9B3C2;font-size:13px}
.pk-any{display:flex;flex-direction:column;gap:10px;align-items:flex-start;grid-column:1/-1;text-align:left}
.pk-any input{font:600 16px var(--mono);padding:10px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;width:min(360px,100%)}
/* in flight */
.place{position:absolute;left:14px;top:12px;z-index:3;display:flex;flex-direction:column;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);pointer-events:none;transition:opacity 1s}
.place b{font:800 26px var(--fw);letter-spacing:.06em;text-transform:uppercase}.place span{font:600 14px var(--fw);letter-spacing:.2em;text-transform:uppercase;color:#D5DCE6}
.rt{position:absolute;right:14px;top:58px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;color:#fff;background:rgba(6,10,16,.5);padding:6px 10px;border-radius:5px;font-family:var(--mono);pointer-events:none}
.rt span{font-size:12px;color:#FFB070;letter-spacing:.08em}.rt b{font-size:22px}
.tbar{position:absolute;right:10px;bottom:52px;z-index:4;display:flex;gap:6px}
.tbar button,.tbtn button{font:800 13px var(--fw);letter-spacing:.12em;color:#fff;background:rgba(6,10,16,.55);border:1px solid rgba(255,255,255,.22);border-radius:4px;min-width:46px;min-height:40px;padding:4px 10px;cursor:pointer;backdrop-filter:blur(4px)}
.tbtn button[aria-pressed=true]{border-color:var(--acc);color:var(--acc)}
.touch{position:absolute;inset:0;z-index:3;pointer-events:none}
.thr{position:absolute;left:14px;bottom:70px;width:62px;height:min(44%,240px);border-radius:8px;background:rgba(6,10,16,.42);border:1px solid rgba(255,255,255,.22);pointer-events:auto;touch-action:none}
.thr i{position:absolute;left:4px;right:4px;height:30px;border-radius:5px;background:var(--acc);bottom:0;box-shadow:0 0 18px rgba(255,155,74,.5)}
.thr span{position:absolute;top:-20px;left:0;right:0;text-align:center;font:800 12px var(--fw);letter-spacing:.2em;color:#fff}
.tbtn{position:absolute;left:88px;bottom:70px;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.yoke{position:absolute;right:0;top:20%;bottom:0;width:58%;pointer-events:auto;touch-action:none}
.yoke i{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.02));display:none}
.yoke i::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,155,74,.85);transform:translate(var(--kx,0),var(--ky,0))}
.yoke.on i{display:block}
.rec{position:absolute;left:50%;top:60px;transform:translateX(-50%);z-index:4;font:800 14px var(--fw);letter-spacing:.2em;color:#fff;background:#C8261B;padding:4px 10px;border-radius:4px}
.msg{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);z-index:5;text-align:center;color:#fff;font:800 clamp(26px,5vw,44px)/1.05 var(--fw);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 3px 20px rgba(0,0,0,.7);pointer-events:none}
.msg small{display:block;font:600 16px system-ui,sans-serif;letter-spacing:0;text-transform:none;margin-top:8px;color:#DDE3EA}
/* result panel */
.over{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;width:min(640px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:rgba(6,11,20,.9);color:#EEF2F7;text-align:center;border-radius:8px}
.o-kick{margin:0;font:800 14px var(--fw);letter-spacing:.3em;color:#FFB070}.o-res{margin:2px 0;font:800 64px/1 var(--mono)}.o-sub{margin:0 0 8px;color:#C3CCD8}
.o-vs{font:800 18px var(--fw);letter-spacing:.06em}
.over .row{justify-content:center;margin-top:8px}
#callsign{font:700 15px var(--mono);padding:8px 10px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;width:130px}
.clipv{width:100%;max-height:220px;border-radius:6px;margin-top:8px;background:#000}
.mrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.under{justify-content:space-between;margin-top:10px}
@media (max-width:640px){.logo{font-size:64px}.o-res{font-size:46px}.m-opts{padding:8px}.m-lbl{min-width:0;width:100%}.place b{font-size:20px}.rt{top:50px}.tbar{bottom:auto;top:10px;right:10px}}
.cap{position:absolute;left:0;right:0;bottom:12%;z-index:8;text-align:center;color:#fff;font:800 clamp(30px,6vw,64px)/1.05 var(--fw);letter-spacing:.05em;text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.75);pointer-events:none;padding:0 6%}
.cap b{color:var(--acc)}.cap small{display:block;font:700 clamp(15px,2.4vw,24px) var(--fw);letter-spacing:.24em;margin-top:10px;color:#E6EBF2}
.cap .logo{font-size:clamp(70px,14vw,150px)}
body.capmode .top,body.capmode .headline,body.capmode .under,body.capmode .credit,body.capmode main>.seo,body.capmode footer{display:none}
body.capmode .wrap{max-width:none;padding:0}body.capmode .stage{position:fixed;inset:0;margin:0;border-radius:0}body.capmode #c{height:100vh}