/* The Long Line v0.2 */
*{box-sizing:border-box;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body,#app{touch-action:none}
html,body{margin:0;height:100%;background:#120e08;color:#e6d9b8;font:14px/1.3 "Courier New",ui-monospace,monospace;overflow:hidden;overscroll-behavior:none}
#app{position:fixed;inset:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:1px solid #6b5a3a;background:#2b2418;border-radius:6px;cursor:pointer;min-height:48px;min-width:44px;padding:4px 10px}
button:active{background:#44381f}
button:focus-visible{outline:3px solid #ffd76a;outline-offset:1px}
button:disabled{opacity:.6}
/* HUD */
#hud{position:absolute;left:0;right:0;top:0;height:56px;padding:max(2px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) 2px max(6px,env(safe-area-inset-left));display:flex;align-items:center;gap:5px;background:linear-gradient(#0d0a06e8,#0d0a0600);pointer-events:none}
#hud>*{pointer-events:auto}
.sp{flex:1;pointer-events:none!important}
.chip{min-width:64px;height:52px;padding:3px 7px;background:#1d1810d0;border:1px solid #4d3f27;border-radius:5px;display:flex;flex-direction:column;justify-content:center;line-height:1.05}
.chip i,.bar i{font-style:normal;font-size:12px;letter-spacing:.03em;color:#bba980}
.chip b{font-size:18px;color:#f0e2bd}.chip small{font-size:12px;color:#e0a07c;margin-top:1px;min-height:12px;white-space:nowrap}
.chip.low b{color:#ff7a62}.chip.warn b{color:#f0c050}
.bar{width:88px;height:52px;padding:4px 6px;background:#1d1810d0;border:1px solid #4d3f27;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between}
.bar u{display:block;height:11px;background:#0c0905;border:1px solid #4d3f27;border-radius:2px;overflow:hidden}
.bar s{display:block;height:100%;width:50%;background:#a99a52;transition:width .3s}
#bLine s{background:#9a7c52}.bar.low s{background:#d4513a}
#waveBtn{height:52px;min-width:132px;max-width:214px;text-align:left;line-height:1.1;padding:3px 8px}
#waveBtn b{display:block;font-size:14px;color:#f0e2bd}#waveBtn small{display:block;font-size:12px;color:#c4b283;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{width:48px;height:48px;padding:0;font-size:18px;font-weight:bold;background:#1d1810e0}
#helpBtn{color:#ffd76a;border-color:#a8903e}
/* always-visible hint line */
#hint{position:absolute;left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));top:56px;min-height:22px;display:flex;justify-content:center;pointer-events:none;z-index:3}
#hint span{display:block;max-width:100%;background:#0f0b07d9;border:1px solid #4d3f27;border-left:3px solid #d9b866;border-radius:4px;padding:2px 10px;font-size:12px;line-height:16px;color:#f4e8c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#hint.warn span{border-left-color:#e0624a;color:#ffe0d4;background:#2a110cdd}
#hint.good span{border-left-color:#8fd47a}
/* bottom build bar */
#bar{position:absolute;left:0;right:0;bottom:0;height:64px;padding:4px max(6px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:flex;gap:5px;align-items:stretch;background:linear-gradient(#0d0a0600,#0d0a06f0 40%)}
#bar button{flex:0 0 auto}
.bb{width:76px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12px;line-height:1.1;padding:2px;background:#2b2418ea;color:#e6d9b8}
.bb .r{display:flex;align-items:center;gap:4px}.bb svg{width:24px;height:24px;display:block}
.bb b{font-size:12px;color:#f0e2bd;white-space:nowrap}.bb span{color:#f0cf6e;font-weight:bold;font-size:13px}
.bb.sel{border-color:#ffd76a;background:#54451f;box-shadow:0 0 0 2px #ffd76a77}
.bb.no{opacity:.5}
#goBtn{margin-left:auto;min-width:122px;height:56px;background:#5a2c1c;border-color:#b8643f;font-weight:bold;font-size:15px;color:#ffe8d0;line-height:1.1}
#goBtn small{display:block;font-size:12px;font-weight:normal;color:#ecc8ae}
#teaBtn{height:56px;width:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;line-height:1.1;padding:2px}
#teaBtn .r{display:flex;align-items:center;gap:4px}#teaBtn svg{width:24px;height:24px}#teaBtn span{color:#f0cf6e;font-weight:bold;font-size:13px}
#teaBtn.cd{opacity:.5}
#confirm{position:absolute;display:flex;gap:6px;transform:translate(-50%,-100%);z-index:5}
#confirm button{width:58px;height:58px;font-size:26px;border-radius:29px;padding:0}
#cfOk{background:#2f5a2a;border-color:#8fd47a;color:#d8ffd0}#cfNo{background:#5a2a24;border-color:#d4857a;color:#ffd8d0}
#panel{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);width:min(440px,94vw);background:#241d12f4;border:1px solid #6b5a3a;border-radius:8px;padding:8px 10px;z-index:6}
#panel h3{margin:0 0 2px;font-size:15px;color:#ffd76a}#panel p{margin:2px 0 6px;font-size:12px;color:#d4c49a}
#panel .prow{margin:0}
#banner{position:absolute;left:0;right:0;top:24%;text-align:center;font-size:clamp(20px,4.6vw,38px);letter-spacing:.2em;color:#f0e2bd;text-shadow:0 2px 6px #000;opacity:0;pointer-events:none;transition:opacity .8s;white-space:pre-line}
#banner.show{opacity:1;transition:opacity .15s}
#toast{position:absolute;right:8px;top:84px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none;max-width:56vw;z-index:4}
#toast div{background:#150f09d8;border-right:3px solid #d99d7a;padding:3px 8px;font-size:12px;color:#f0e2bc;animation:tf 5s forwards;text-align:right}
#toast div.bad{border-color:#d4513a}#toast div.good{border-color:#8fc26a}
@keyframes tf{0%{opacity:0;transform:translateX(8px)}6%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
/* overlays and cards: header + scrolling body + pinned footer */
.overlay{position:absolute;inset:0;background:#0a0704d9;display:flex;align-items:center;justify-content:center;z-index:20;padding:6px}
.card{background:linear-gradient(#2b2316,#1c160d);border:1px solid #6b5a3a;border-radius:10px;padding:12px 16px;text-align:center;max-width:96vw;max-height:calc(100% - 4px);overflow:hidden;box-shadow:0 8px 40px #000a}
.card.wide{width:min(660px,96vw);text-align:left}
.card.col{display:flex;flex-direction:column}
.cbody{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:2px}
.cfoot{flex:0 0 auto;margin:8px 0 0;padding-top:8px;border-top:1px solid #4d3f27}
.card h1{margin:0;font-size:clamp(24px,6vw,40px);letter-spacing:.16em;color:#f0e2bd;font-weight:bold}
.card h2{margin:0 0 6px;font-size:19px;letter-spacing:.1em;color:#ffd76a}
.card h3{margin:10px 0 3px;font-size:15px;color:#ffd76a}
.tag{margin:4px 0 8px;color:#d0c096;font-style:italic}
.small{font-size:12px;color:#c4b283;margin:4px 0}
.rem{font-size:11.5px;color:#a8966a;max-width:540px;margin:8px auto 2px;font-style:italic}
.btn{min-height:48px;padding:8px 14px}.btn.big{min-width:140px;font-size:16px;background:#4a3c20;border-color:#c0a040;color:#fff1cc}
.prow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.card p{margin:6px 0;font-size:13px}
.hg{display:grid;grid-template-columns:36px 1fr;gap:4px 8px;align-items:start;margin:6px 0}
.hg svg{width:30px;height:30px;color:#e6d9b8}.hg div{font-size:13px}.hg b{color:#f0e2bd}.hg em{font-style:normal;color:#f0cf6e}
.med{background:#17120a;border:1px solid #6b5a3a;border-left:4px solid #8fd47a;border-radius:6px;padding:6px 10px;margin:8px 0}
.med p{margin:4px 0;font-size:13px}
#wcList{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.wchip{background:#150f09;border:1px solid #4d3f27;border-radius:5px;padding:5px 9px;font-size:12px;min-width:92px}
.wchip b{font-size:18px;color:#f0e2bd;display:block}.wchip small{color:#b8a57a}
#wcTip{font-size:12px;font-style:italic;color:#dccb9b}
table.rep{width:100%;border-collapse:collapse;font-size:12px;margin:6px 0}
table.rep td{padding:2px 6px;border-bottom:1px solid #3a2f1c}table.rep td:last-child{text-align:right;color:#f0e2bd}
.medline{background:#17120a;border-left:4px solid #8fd47a;padding:5px 9px;font-size:13px;color:#e8f3d8;margin:6px 0}
.cols{display:flex;gap:14px;flex-wrap:wrap}.cols>div{flex:1 1 220px}
.wl{font-size:11px;max-height:110px;overflow:auto;color:#bba980;touch-action:pan-y}
#rotate{position:absolute;inset:0;background:#0a0704fa;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:10px}
#rotate .ri{font-size:60px;color:#c9a64e}
@media (orientation:portrait) and (pointer:coarse) and (max-width:700px){#rotate{display:flex}}
body.noRot #rotate{display:none!important}
/* tutorial */
#tutDim{position:absolute;inset:0;background:#080603a8;pointer-events:none;z-index:4}
#tutRings{position:absolute;inset:0;pointer-events:none;z-index:4}
#tutRings div{position:absolute;border:3px solid #ffd76a;border-radius:9px;box-shadow:0 0 14px #ffd76acc,inset 0 0 8px #ffd76a88;animation:rp 1s ease-in-out infinite alternate}
@keyframes rp{from{opacity:.65}to{opacity:1}}
#tutCard{position:absolute;right:8px;top:86px;width:min(300px,44vw);z-index:14;background:linear-gradient(#33291a,#221b10);border:2px solid #d9b866;border-radius:10px;padding:8px 12px 10px;box-shadow:0 6px 30px #000c;max-height:calc(100% - 140px);overflow:hidden}
#tutCard h3{margin:0 0 3px;font-size:16px;color:#ffd76a}
#tutCard p{margin:3px 0;font-size:13.5px;line-height:1.3;color:#f4e8c6}
#tutCard #tutNote{color:#ffb090;font-size:12.5px;min-height:0}
#tutNote:empty{display:none}
.tcount{float:right;font-size:11px;color:#bba980;margin-left:6px}
.trow{display:flex;gap:8px;justify-content:space-between;margin-top:6px}
.trow .btn{flex:1 1 auto;padding:6px 8px;font-size:13px}.trow .btn.big{min-width:0;font-size:15px}
#tutCard.mini{width:min(260px,40vw)}#tutCard.mini p#tutText{font-size:12.5px}
#tutCard.mini .trow{margin-top:3px}
#tutCard.mini .btn{min-height:44px}
body.tut #toast{display:none}
body.tut #hud>*,body.tut #bar>*{transition:opacity .2s}
/* compact landscape phones */
@media (max-height:430px){.card{padding:8px 14px}.card h1{font-size:26px}.rem{margin:4px auto;font-size:11px}.tag{margin:2px 0 4px}.prow{margin:5px 0}.cfoot{margin-top:5px;padding-top:5px}}
@media (max-width:760px) and (min-aspect-ratio:9/10){#hud{gap:3px}.chip{min-width:52px;padding:3px 3px;flex-shrink:0}.chip i,.bar i{letter-spacing:0}.bar{width:64px;padding:4px 4px}#waveBtn{min-width:96px;padding:3px 5px}.bb,#teaBtn{width:64px}#goBtn{min-width:100px}}
@media (max-width:620px) and (min-aspect-ratio:9/10){.chip{min-width:48px}.bar{width:60px}#waveBtn{min-width:90px}#waveBtn small{display:none}.ib{width:44px}}
/* portrait phones (also after "Play anyway"): two-row HUD and bar, field zoomed in */
@media (max-aspect-ratio:9/10){
  #hud{height:auto;flex-wrap:wrap;align-content:flex-start;gap:4px;padding-top:max(3px,env(safe-area-inset-top));padding-bottom:3px;background:linear-gradient(#0d0a06f4,#0d0a06c0)}
  .chip{order:1;flex:1 1 0;min-width:0;padding:3px 3px;letter-spacing:0}
  .chip i,.bar i{letter-spacing:.01em}
  #waveBtn{order:2;flex:1.8 1 0;min-width:0;max-width:none}
  .sp{order:3;flex:0 0 100%!important;height:0}
  .bar{order:4;flex:1 1 0;width:auto;min-width:0}
  .ib{order:5;width:44px;height:44px;min-width:44px;min-height:44px;font-size:16px}
  #hint{top:auto}
  #hint span{white-space:normal;text-overflow:clip;line-height:15px;font-size:12px}
  #bar{height:auto;flex-wrap:wrap;gap:5px;padding-top:6px}
  #bar .bb,#bar #teaBtn{flex:1 0 calc(25% - 5px);width:auto;height:54px}
  #bar #goBtn{margin-left:0;flex:1 0 calc(25% - 5px);min-width:44px;height:54px;font-size:14px}
  #toast{top:auto;bottom:140px;right:6px;max-width:80vw}
  #panel{bottom:136px}
  #tutCard{left:6px;right:6px;width:auto;top:140px}
  #tutCard.mini{width:auto}
}
@media (prefers-reduced-motion:reduce){#tutRings div{animation:none}#toast div{animation-duration:5s}#banner,#banner.show{transition:none}}
.why{background:#17120a;border-left:4px solid #d9a050;padding:5px 9px;margin:6px 0;font-size:13px;color:#f0e2bd}.why ul{margin:3px 0 0;padding-left:18px}.why li{margin:2px 0}
.nxh{flex:1 0 100%;font-size:12px;color:#bba980;margin-top:2px}.wchip.nx{opacity:.85;min-width:110px}.wchip.nx b{font-size:13px}
@media (max-width:380px){.chip i,.bar i{letter-spacing:-.02em}}

/* ===== v0.3 ===== */
/* ability buttons: they take the Stand To slot while a wave runs (landscape), float above the bar in portrait */
#abBox{display:none;gap:2px;margin-left:auto;align-items:stretch}
body.wave #abBox{display:flex}
body.wave #goBtn{display:none}
.ab{position:relative;overflow:hidden;width:60px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:2px 1px 5px;font-size:12px;line-height:1.05;background:#2b2418f2;color:#e6d9b8;border:2px solid #ffd76a}
.ab svg{width:22px;height:22px;display:block}
.ab b{font-size:12px;color:#f0e2bd;letter-spacing:0}
.ab i{position:absolute;top:1px;right:4px;font-style:normal;font-size:12px;font-weight:bold;color:#ffd76a}
.ab em{display:none;font-style:normal;font-weight:bold;color:#fff1cc}
.ab u{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#ffb347;transform-origin:left;transform:scaleX(0);text-decoration:none}
.ab.on{background:#7a5320;border-color:#ffcf6a}.ab.on em{display:block;font-size:18px}.ab.on svg,.ab.cd svg{display:none}
.ab.cd{opacity:.6;border-color:#6b5a3a}.ab.cd em{display:block;font-size:14px}.ab.cd i{display:none}
.ab.cd u{background:#8a7a55}
.ab.cue{border-color:#ffd27a;animation:abpulse .6s ease-in-out infinite;z-index:2}
.ab.coach{box-shadow:0 0 0 3px #ffd76a,0 0 14px 4px #ffd76a99}
@keyframes abpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.ab.cue{animation:none;box-shadow:0 0 0 3px #ffd27a}}
@media (max-aspect-ratio:9/10){
  #abBox{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:calc(var(--barh,130px) + 8px);gap:8px;margin:0;z-index:6}
  .ab{width:56px;height:56px}
}
@media (max-width:760px) and (min-aspect-ratio:9/10){.ab{width:56px}}
/* stand-down card */
#stand{position:absolute;left:max(8px,env(safe-area-inset-left));top:82px;display:flex;align-items:stretch;gap:4px;max-width:min(400px,64vw);min-height:48px;background:#150f09f2;border:1px solid #4d3f27;border-left:3px solid #8fc26a;border-radius:4px;padding:0 0 0 8px;z-index:4;font-size:12px;line-height:14px;color:#f0e2bc;box-sizing:border-box}
#stand.fb{border-left-color:#e0a050}
#stTxt{align-self:center;padding:2px 0}#stTxt div{margin:0}
#stand .btn{min-height:48px;min-width:56px;padding:0 8px;font-size:12px;border-radius:0 3px 3px 0;border-width:0 0 0 1px}
/* forecast card */
.wcgrid{display:grid;grid-template-columns:1fr;gap:8px 12px}
@media (min-width:700px) and (orientation:landscape){.wcgrid{grid-template-columns:1.05fr 1fr}}
.wcgrid h4{margin:0 0 3px;font-size:13px;color:#ffd76a;letter-spacing:.06em}
.tl{position:relative;height:44px;background:#150f09;border:1px solid #4d3f27;border-radius:4px;margin:2px 0 6px;overflow:hidden;cursor:pointer}
.tl .tk{position:absolute;bottom:0;font-size:11px;line-height:11px;color:#9d8c68;transform:translateX(-50%);white-space:nowrap}
.tl .bd{position:absolute;top:3px;height:17px;background:#c9803c99;border:1px solid #e0a060;border-radius:2px;font-size:11px;line-height:15px;color:#fff1cc;overflow:hidden;white-space:nowrap;padding-left:3px;box-sizing:border-box}
.tl .gs,.tl .tkm,.tl .ft{position:absolute;top:22px;font-size:11px;line-height:11px;transform:translateX(-50%);white-space:nowrap}
.tl .gs{color:#d6e05a}.tl .tkm{color:#e8d18a}.tl .ft{color:#cdb98d}
.tl .tipx{display:none}
.tags{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tagc{min-height:48px;background:#150f09;border:1px solid #4d3f27;border-radius:5px;padding:3px 7px;font-size:12px;line-height:14px;color:#cdbd96}
.tagc b{display:block;font-size:13px;color:#f0e2bd;letter-spacing:.04em}.tagc b span{color:#ffd76a}
.smap{display:flex;gap:8px;align-items:center}
.smap .mm{flex:0 0 80px;height:48px;border:1px solid #6b5a3a;border-radius:3px;position:relative;background:#1a1409;overflow:hidden}
.smap .mm i{position:absolute;left:0;right:0;border-top:1px dashed #4d3f27}
.smap .mm s{position:absolute;left:0;right:0;background:#ff7846aa;text-decoration:none}
.smap .mm u{position:absolute;left:0;top:0;bottom:0;width:6px;background:#8fd47a66;text-decoration:none}
.smap p{margin:0;font-size:12px}
.rdl{display:flex;flex-direction:column;gap:3px}
.rd{display:flex;align-items:center;gap:6px;min-height:40px;font-size:12px;line-height:14px;border-left:3px solid #8fc26a;background:#150f09;padding:1px 4px 1px 6px}
.rd.bad{border-left-color:#e0624a;background:#2a110c}
.rd .rk{flex:0 0 18px;font-weight:bold;color:#8fd47a}.rd.bad .rk{color:#ff9a82}
.rd .rt{flex:1 1 auto}
.rd .btn{flex:0 0 auto;min-height:48px;min-width:48px;padding:0 10px;font-size:12px}
.nxl{font-size:12px;color:#bba980;margin:3px 0 0}
#waveBtn.attn{box-shadow:0 0 0 2px #ffb347}
/* end report: wave strip */
.strip{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;padding:2px 0;margin:4px 0}
.sc{flex:0 0 48px;min-width:48px;height:96px;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:1px;background:#17120a;border:1px solid #3a2f1c;border-radius:3px;font-size:11px;line-height:12px;color:#cdbd96}
.sc.sel{border-color:#ffd76a;background:#2a2112}.sc.nil{opacity:.35}
.sc .st{display:flex;flex-direction:column-reverse;width:22px;max-height:64px;justify-content:flex-start}
.sc .st div{width:22px}
.sc .mk{height:12px;font-size:11px;line-height:12px;color:#ffd76a}
.leg{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:11px;line-height:14px;color:#bba980;margin:2px 0}.leg span i{display:inline-block;width:9px;height:9px;margin-right:3px;vertical-align:-1px}
#oDet{font-size:12px;background:#17120a;border-left:4px solid #6b5a3a;padding:4px 8px;margin:4px 0;color:#e8dcc0;min-height:16px}#oDet div{margin:1px 0}
/* audio rows */
.vol{display:flex;flex-direction:column;align-items:stretch;justify-content:center;font-size:12px;color:#cdbd96;min-height:48px;min-width:132px}
.vol input{width:100%;height:48px;margin:0;accent-color:#c0a040;touch-action:pan-x}
.aud{align-items:center}
#bLine.fell{border-color:#ffd27a;box-shadow:inset 0 0 0 1px #ffd27a80}
body.tutTools #abBox{display:flex}body.tutTools #goBtn{display:none}