/* OIL SENTINEL — style.css — CLEAN REWRITE */
:root{
  --bg:#000a00;--pb:rgba(0,20,0,.85);--bd:#003300;--gk:#002200;
  --t:#00FF41;--g:#00FF41;--gd:#00AA30;--gg:rgba(0,255,65,.3);--td:#005500;
  --r:#FF3333;--b:#00AAFF;--y:#FFD700;
  --f:'Press Start 2P',monospace;
}
html{font-size:13px}
body{background:var(--bg);color:var(--t);font-family:var(--f);margin:0;padding:0;overflow:hidden;width:100vw;height:100vh;image-rendering:pixelated}

/* BOOT */
.boot-overlay{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .8s}
.boot-overlay.fade-out{opacity:0;pointer-events:none}
.boot-log{color:var(--g);font-size:.85rem;max-width:700px;max-height:80vh;overflow-y:auto;text-shadow:0 0 10px var(--gg);line-height:1.8}
.hidden{display:none!important}

/* DASHBOARD 16:9 */
.dashboard{display:flex;flex-direction:column;width:100vw;height:100vh;max-height:56.25vw; /* 16:9 */;margin:0 auto;overflow:hidden}

/* HEADER */
.header{border:1px solid var(--bd);background:var(--pb);flex-shrink:0}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:5px 14px}
.title{font-size:2rem;letter-spacing:4px;text-shadow:0 0 20px var(--gg),0 0 40px var(--gg);animation:gl 3s infinite}
.subtitle{display:block;font-size:.6rem;color:var(--td);margin-top:2px}
.header-right{display:flex;align-items:center;gap:14px}
.dot{width:10px;height:10px;background:var(--r);border-radius:50%;box-shadow:0 0 10px var(--r);animation:db 1s infinite}
.live-text{font-size:.9rem;color:var(--r);margin-right:4px}
@keyframes db{0%,100%{opacity:1}50%{opacity:.15}}
.clock{font-size:1.5rem;color:var(--g);text-shadow:0 0 12px var(--gg)}
.date{font-size:.65rem;color:var(--td)}
@keyframes gl{0%,85%,100%{transform:translate(0)}87%{transform:translate(-3px,1px)}89%{transform:translate(3px,-1px)}91%{transform:translate(-2px,-1px)}93%{transform:translate(2px,1px)}}

/* NEWS BAR */
.news-bar{display:flex;align-items:center;gap:8px;padding:3px 14px;border-top:1px solid var(--gk);overflow:hidden}
.news-tag{font-size:.6rem;background:#330000;color:var(--r);padding:2px 8px;border:1px solid #440000;white-space:nowrap}
.news-scroll{flex:1;overflow:hidden;white-space:nowrap}
.news-scroll span{display:inline-block;animation:scroll 50s linear infinite;font-size:.6rem;color:var(--gd)}
@keyframes scroll{0%{transform:translateX(100%)}100%{transform:translateX(-200%)}}
.blink{animation:db 1s infinite}
.blink-box{animation:bb 1.5s infinite}
@keyframes bb{0%,100%{box-shadow:0 0 8px var(--gg)}50%{box-shadow:0 0 25px var(--g)}}

/* SCANLINE */
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0px,transparent 1px,transparent 3px);pointer-events:none;z-index:9998}

/* MAIN GRID — 3 columns 16:9 */
.main-grid{display:grid;grid-template-columns:22% 42% 36%;gap:4px;padding:4px;flex:1;min-height:0;overflow:hidden}
.col-left,.col-center,.col-right{display:flex;flex-direction:column;gap:4px;overflow:hidden;min-height:0}

/* PANELS */
.panel{background:var(--pb);border:1px solid var(--bd);padding:6px;position:relative;overflow:hidden;flex-shrink:0}
.panel::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--g),transparent);opacity:.4}
.panel-header{font-size:.9rem;color:var(--g);margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid var(--gk);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge{font-size:.5rem;background:var(--gk);color:var(--g);padding:2px 6px;border:1px solid var(--gd);margin-left:auto}
.badge-live{background:#220000;color:var(--r);border-color:#440000}
.badge-ai{background:#222200;color:var(--y);border-color:#444400}
.pikopiko{animation:piko 4s infinite}
@keyframes piko{0%,90%,100%{border-color:var(--bd)}95%{border-color:var(--gd)}}

/* CARDS */
.card{background:rgba(0,255,65,.03);border:1px solid var(--gk);padding:6px;text-align:center;margin-bottom:3px}
.card-label{font-size:.75rem;color:var(--td);margin-bottom:3px}
.card-val{font-size:2.2rem;color:var(--g);text-shadow:0 0 12px var(--gg)}
.card-val small{font-size:.65rem;color:var(--td)}
.card-delta{font-size:.75rem;margin-top:2px;color:var(--td)}
.card-delta.up{color:var(--r)}
.card-delta.down{color:var(--b)}
.card-row{display:flex;gap:4px;margin-bottom:3px}
.card-row .card{flex:1;margin-bottom:0}
.card-max{border-color:#330000}.card-max .card-val{color:var(--r);font-size:1.5rem;text-shadow:0 0 10px rgba(255,51,51,.3)}
.card-min{border-color:#002233}.card-min .card-val{color:var(--b);font-size:1.5rem;text-shadow:0 0 10px rgba(0,170,255,.3)}

/* PREF SELECTOR */
.pref-card{cursor:pointer;border-color:var(--gd);transition:all .2s}
.pref-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
#prefName{font-size:1rem;color:var(--g)}
.pref-btn{background:none;border:1px solid var(--gk);color:var(--g);font-family:var(--f);font-size:.9rem;padding:2px 6px;cursor:pointer;transition:all .15s}
.pref-btn:hover{color:var(--y);border-color:var(--y);background:rgba(255,215,0,.1)}

/* AI */
.ai-body{padding:3px}
.ai-verdict{font-size:1rem;color:var(--y);border:1px solid var(--y);display:inline-block;padding:3px 8px;margin-bottom:4px}
.ai-text{font-size:.7rem;line-height:1.7;color:var(--gd);margin-bottom:4px}
.ai-text strong{color:var(--g)}
.score-row{display:flex;align-items:center;gap:6px;font-size:.65rem}
.score-bar{flex:1;height:6px;background:var(--gk);border:1px solid var(--bd);position:relative}
.score-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--g),var(--y),var(--r))}
.val-y{color:var(--y)}

/* GAUGES ROW */
.gauges-row{display:flex;gap:4px;flex-shrink:0}
.g{flex:1;background:var(--pb);border:1px solid var(--bd);padding:3px;text-align:center}
.g-label{font-size:.5rem;color:var(--td);margin-bottom:2px}
.g-val{font-size:.7rem;color:var(--g);margin-top:2px}
.g canvas{display:block;margin:0 auto}

/* CHART */
.flex-chart{flex:1;display:flex;flex-direction:column;min-height:0}
.flex-chart canvas{flex:1;width:100%;display:block}
.legend{display:flex;gap:8px;font-size:.5rem;margin-left:auto;color:var(--td)}
.ld{width:7px;height:7px;display:inline-block;vertical-align:middle;margin-right:2px}
.ld-g{background:var(--g)}.ld-gd{border:1px dashed var(--gd)}.ld-b{background:var(--b)}.ld-y{background:var(--y)}

/* JAPAN HEATMAP */
.japan-map-panel{flex-shrink:0}
.japan-map-wrap{display:flex;gap:4px;align-items:stretch}
.japan-map-wrap canvas{flex:1;cursor:crosshair;display:block;min-height:100px}
.japan-map-legend{display:flex;flex-direction:column;align-items:center;width:30px;flex-shrink:0}
.jml-bar{flex:1;width:10px;background:linear-gradient(180deg,#FF3333,#FFD700,#00FF41,#00AAFF);border:1px solid var(--gk);min-height:50px}
.jml-labels{display:flex;flex-direction:column;font-size:.35rem;color:var(--td);text-align:center;gap:2px;margin-top:2px}
.jml-labels span:first-child{color:var(--r)}
.jml-labels span:last-child{color:var(--b)}
.japan-map-info{font-size:.55rem;color:var(--gd);text-align:center;padding:2px}

/* INFO PAIR */
.info-pair{display:flex;gap:4px;flex-shrink:0}
.info-pair .panel{flex:1}
.info-body{display:flex;gap:6px;align-items:flex-start}
.info-body canvas{flex-shrink:0;display:block}
.info-text{font-size:.55rem;line-height:2;color:var(--gd)}
.info-text .flash-val{color:var(--g)}
.tt{cursor:help;position:relative}
.tt:hover::after{content:attr(data-tip);position:absolute;bottom:100%;left:0;background:#001100;border:1px solid var(--gd);color:var(--g);font-size:.9rem;padding:6px 12px;white-space:nowrap;z-index:99;text-shadow:0 0 8px var(--gg)}

/* TANKER MAP — LIVE EMBED */
.map-panel{flex:1;display:flex;flex-direction:column}
.tanker-map-container{flex:1;position:relative;overflow:hidden;min-height:0}
.tanker-map-container iframe{width:100%;height:100%;border:none;display:block}
.map-filter-overlay{position:absolute;inset:0;background:rgba(0,20,0,.30);mix-blend-mode:multiply;pointer-events:none;z-index:2}
.map-scanline{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0px,transparent 1px,transparent 3px);pointer-events:none;z-index:3}
.map-click-hint{font-size:.5rem;color:var(--td);text-align:center;padding:3px;flex-shrink:0}

/* FOOTER */
.footer{display:flex;justify-content:space-between;padding:3px 14px;font-size:.45rem;color:var(--td);border-top:1px solid var(--gk);flex-shrink:0}