/* ============================================================
   コスモロボ MVP — design tokens (from cosmorobo.css)
   ============================================================ */
:root {
  --navy-0:#050A1E;
  --navy-1:#0E1A3A;
  --navy-2:#1B2C5A;
  --cyan:#00C8FF;
  --cyan-l:#9BF0FF;
  --magenta:#FF3CAA;
  --lime:#B4FF3C;
  --amber:#FFB400;
  --ink:#E8F4FF;
  --ink-dim:#7B8BB0;
  --font-jp:"M PLUS Rounded 1c", system-ui, sans-serif;
  --font-display:"Orbitron", "M PLUS Rounded 1c", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#02040d;color:var(--ink);font-family:var(--font-jp);overflow:hidden}
button{font-family:inherit;color:inherit;cursor:pointer}

/* iPad 1366x1024 固定ステージ。小さい画面では拡大縮小 */
.stage{
  position:relative;
  width:1366px;height:1024px;
  margin:0 auto;
  display:grid; grid-template-rows: 56px 1fr 110px;
  font-family:var(--font-jp); color:var(--ink);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0,200,255,.07), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(255,60,170,.05), transparent 55%),
    linear-gradient(180deg,#0a1336 0%,#050a1e 60%,#02040d 100%);
  overflow:hidden;
}
@media (max-width:1400px),(max-height:1050px){
  body{display:flex;align-items:center;justify-content:center}
  .stage{transform-origin:center center; transform:scale(min(calc(100vw/1366), calc(100vh/1024)))}
}

.scanlines{position:absolute;inset:0;
  background-image:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,200,255,.04) 3px,transparent 4px);
  mix-blend-mode:screen;pointer-events:none;z-index:25}
.hud-corners{position:absolute;inset:24px;pointer-events:none;z-index:30}
.corner{position:absolute;width:22px;height:22px;border:2px solid var(--cyan);opacity:.7}
.corner.tl{top:0;left:0;border-right:none;border-bottom:none}
.corner.tr{top:0;right:0;border-left:none;border-bottom:none}
.corner.bl{bottom:0;left:0;border-right:none;border-top:none}
.corner.br{bottom:0;right:0;border-left:none;border-top:none}

#app{position:absolute;inset:0;z-index:10;display:flex}

/* ============================================================
   共通 UI
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;min-height:48px;
  border:1px solid var(--cyan);
  background:linear-gradient(180deg,rgba(0,200,255,.18),rgba(0,200,255,.05));
  color:var(--cyan-l); font-weight:700; letter-spacing:.06em;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  text-transform:uppercase;
  transition:transform .1s, filter .15s;
}
.btn:hover{filter:brightness(1.2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--cyan),#0080b0);color:#021018;border-color:var(--cyan-l)}
.btn.ghost{background:transparent;color:var(--ink-dim);border-color:rgba(123,139,176,.4)}
.btn.warn{border-color:var(--amber);color:var(--amber);background:rgba(255,180,0,.08)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}

.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  padding:5px 10px;border:1px solid rgba(0,200,255,.35);background:rgba(0,200,255,.05);
  color:var(--cyan-l);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

.h-display{font-family:var(--font-display);font-weight:900;letter-spacing:.12em;text-transform:uppercase}

/* ============================================================
   Splash / Title
   ============================================================ */
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.logo{
  font-family:var(--font-display);font-weight:900;font-size:96px;letter-spacing:.18em;
  background:linear-gradient(180deg,#fff 0%,var(--cyan) 60%,#0080b0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(0,200,255,.3);
}
.logo em{font-style:normal;color:var(--magenta);-webkit-text-fill-color:var(--magenta)}
.subtitle{font-family:var(--font-mono);color:var(--cyan-l);letter-spacing:.18em;font-size:14px}
.splash-progress{width:380px;height:6px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.35);position:relative;overflow:hidden}
.splash-progress span{position:absolute;left:0;top:0;height:100%;background:var(--cyan);width:0%;transition:width 1.4s ease-out}

/* Pilot form */
.panel{
  border:1px solid rgba(0,200,255,.3);
  background:linear-gradient(180deg,rgba(11,22,58,.45),rgba(5,10,30,.7));
  padding:28px 32px; min-width:480px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.panel h2{margin:0 0 16px;font-family:var(--font-display);letter-spacing:.14em;color:var(--cyan);font-size:18px}
.panel label{display:block;font-size:12px;color:var(--ink-dim);letter-spacing:.1em;margin:14px 0 6px}
.input{
  width:100%;padding:12px 14px;background:rgba(0,200,255,.05);
  border:1px solid rgba(0,200,255,.4);color:var(--ink);
  font-family:var(--font-jp);font-size:16px;outline:none;
}
.input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,200,255,.2)}

/* ============================================================
   Home (司令室)
   ============================================================ */
.home{display:grid;grid-template-rows:56px 1fr 110px;width:100%}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;border-bottom:1px solid rgba(0,200,255,.18);
  background:linear-gradient(180deg,rgba(11,22,58,.6),rgba(11,22,58,0));position:relative;z-index:20;
}
.tb-cluster{display:flex;align-items:center;gap:14px}
.tb-logo{font-family:var(--font-display);font-weight:800;letter-spacing:.12em;color:#fff;font-size:14px}
.tb-logo em{font-style:normal;color:var(--cyan);margin-left:6px}

.home-grid{display:grid;grid-template-columns:1fr 480px;gap:20px;padding:24px 32px;overflow:hidden}

/* ===== Home v2 layout ===== */
.home-v2{display:grid;grid-template-rows: minmax(0,1fr) auto auto auto;gap:12px;padding:12px 24px 0;overflow:hidden}
.home-row{display:grid;gap:14px;min-height:0}
.home-row.r1{grid-template-columns: 1fr 380px;min-height:0}
.home-row.r2{grid-template-columns: 1fr 1fr;min-height:0}
/* ロボ名バッジは robo-stage 内に限定(下にあふれないように) */
.robo-stage{overflow:hidden}
.robo-name-badge{position:absolute;right:18px;top:18px;font-family:var(--font-display);font-size:24px;font-weight:900;letter-spacing:.14em;color:var(--cyan-l);text-shadow:0 0 18px rgba(0,200,255,.55);z-index:3;pointer-events:none;background:rgba(2,4,13,.55);padding:4px 12px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

/* Vital cards column */
.vital-col{display:grid;grid-template-rows:repeat(6,1fr);gap:8px;min-height:0;overflow:hidden}
.vital-card{display:flex;align-items:center;gap:12px;padding:8px 14px;border:1px solid rgba(0,200,255,.3);background:linear-gradient(90deg,rgba(11,22,58,.6),rgba(5,10,30,.6));clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);min-height:0}
.vital-card.streak{border-color:var(--amber);background:linear-gradient(90deg,rgba(80,40,5,.45),rgba(11,22,58,.6))}
.vital-card.gold{border-color:var(--amber)}
.vital-card.hp{border-color:var(--lime)}
.vital-card.level{border-color:var(--cyan)}
.vital-card.best{border-color:var(--magenta)}
.vital-card.ach{border-color:var(--cyan-l);cursor:pointer;transition:filter .15s}
.vital-card.ach:hover{filter:brightness(1.3)}
.vital-icon{font-size:30px;flex:0 0 36px;text-align:center}
.vital-card.streak .vital-icon{animation:flicker 1.5s infinite}
@keyframes flicker{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.85}}
.vital-body{flex:1;min-width:0}
.vital-label{font-family:var(--font-mono);font-size:9px;color:var(--ink-dim);letter-spacing:.14em}
.vital-value{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;line-height:1.1;margin-top:2px}
.vital-card.gold .vital-value{color:var(--amber)}
.vital-card.hp .vital-value{color:var(--lime)}
.vital-card.streak .vital-value{color:var(--amber)}
.vital-card.best .vital-value{color:var(--magenta)}
.vital-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);margin-top:2px}
.vital-bar{height:5px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);position:relative;margin-top:4px}
.vital-bar span{position:absolute;left:0;top:0;height:100%;background:var(--cyan)}
.vital-bar.hp span{background:var(--lime)}

/* Daily quota progress */
.quota-panel{padding:12px 18px;border:1px solid var(--amber);background:linear-gradient(90deg,rgba(80,55,0,.4),rgba(11,22,58,.6));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);display:flex;flex-direction:column;gap:6px}
.quota-panel.done{border-color:var(--lime);background:linear-gradient(90deg,rgba(40,80,5,.45),rgba(11,22,58,.6))}
.quota-head{display:flex;justify-content:space-between;align-items:baseline}
.quota-title{font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:.12em;color:var(--amber)}
.quota-panel.done .quota-title{color:var(--lime)}
.quota-sub{font-family:var(--font-mono);font-size:13px;color:#fff}
.quota-bar{height:14px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);position:relative}
.quota-bar span{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--amber),var(--lime));transition:width .6s ease-out}
.quota-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);letter-spacing:.06em}

/* Story panel */
.story-panel{padding:16px 20px;border:1px solid rgba(0,200,255,.3);background:linear-gradient(180deg,rgba(11,22,58,.7),rgba(5,10,30,.85));position:relative;overflow:hidden;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.story-chapter{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--cyan);margin-bottom:4px}
.story-title{margin:0 0 8px;font-family:var(--font-display);font-size:20px;color:#fff;letter-spacing:.08em}
.story-body{margin:0;color:var(--ink);font-size:13px;line-height:1.7}
.story-meta{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--font-mono);font-size:11px;color:var(--cyan-l);border-top:1px solid rgba(0,200,255,.15);padding-top:8px}

/* Recent panel */
.recent-panel{padding:16px 20px;border:1px solid rgba(0,200,255,.3);background:linear-gradient(180deg,rgba(11,22,58,.5),rgba(5,10,30,.75));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);display:flex;flex-direction:column;min-height:0}
.recent-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.recent-head h3{margin:0;font-family:var(--font-display);font-size:14px;color:var(--cyan);letter-spacing:.12em}
.recent-list{display:flex;flex-direction:column;gap:6px;overflow:auto}
.recent-item{display:grid;grid-template-columns:40px 1fr auto;gap:8px;padding:6px 8px;background:rgba(0,200,255,.04);border:1px solid rgba(0,200,255,.15);font-size:12px;align-items:center}
.recent-item.boss{border-color:var(--magenta);background:rgba(255,60,170,.06)}
.recent-ch{font-family:var(--font-mono);color:var(--cyan-l);font-size:11px}
.recent-name{color:#fff;font-weight:700}
.recent-rew{font-family:var(--font-mono);color:var(--amber);font-size:11px}
.recent-empty{color:var(--ink-dim);font-size:13px;text-align:center;padding:18px}

/* Menu grid (compact 8 buttons) */
.menu-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:6px}
.menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;border:1px solid rgba(0,200,255,.3);background:linear-gradient(180deg,rgba(11,22,58,.55),rgba(5,10,30,.75));color:var(--ink);font-family:inherit;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:filter .15s, transform .1s}
.menu-btn:hover{filter:brightness(1.25)}
.menu-btn:active{transform:translateY(1px)}
.menu-btn.primary{border-color:var(--magenta);background:linear-gradient(180deg,rgba(80,15,55,.6),rgba(40,5,30,.85))}
.mb-icon{font-size:22px;line-height:1}
.mb-label{font-size:11px;font-weight:800;color:#fff;letter-spacing:.04em}
.mb-sub{font-family:var(--font-mono);font-size:9px;color:var(--ink-dim);letter-spacing:.1em}
.menu-btn.primary .mb-label{color:var(--magenta)}

/* Achievement toast */
.ach-toast{position:fixed;top:80px;right:-380px;width:340px;background:linear-gradient(135deg,rgba(80,40,5,.95),rgba(11,22,58,.95));border:1px solid var(--amber);padding:14px;display:flex;gap:12px;align-items:center;z-index:500;transition:right .4s cubic-bezier(.2,1.6,.4,1);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:0 0 40px rgba(255,180,0,.4)}
.ach-toast.show{right:24px}
.ach-icon{font-size:40px}
.ach-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--amber)}
.ach-title{font-family:var(--font-display);font-weight:900;font-size:16px;color:#fff;letter-spacing:.06em;margin-top:2px}
.ach-desc{font-size:11px;color:var(--ink-dim);margin-top:2px}

/* Achievement grid screen */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px}
.ach-card{padding:14px;border:1px solid rgba(0,200,255,.3);background:linear-gradient(180deg,rgba(11,22,58,.6),rgba(5,10,30,.8));text-align:center;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.ach-card.locked{opacity:.45;filter:grayscale(.7)}
.ach-card-icon{font-size:48px;margin-bottom:6px}
.ach-card-title{font-family:var(--font-display);font-weight:800;color:var(--amber);font-size:14px;letter-spacing:.08em}
.ach-card.locked .ach-card-title{color:var(--ink-dim)}
.ach-card-desc{font-size:12px;color:var(--ink-dim);margin-top:4px;min-height:32px}
.ach-card-date{font-family:var(--font-mono);font-size:10px;color:var(--cyan-l);margin-top:6px;letter-spacing:.08em}
.robo-stage{
  position:relative;border:1px solid rgba(0,200,255,.3);
  background:linear-gradient(180deg,rgba(11,22,58,.45),rgba(5,10,30,.7));
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.robo-art{font-size:240px;line-height:1;filter:drop-shadow(0 0 20px rgba(0,200,255,.6))}
/* React-mounted SVG art container */
.art-box{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.art-box svg{width:100%;height:100%;max-width:560px;max-height:90%}
.robo-stage .art-box{padding:8px}
.robo-stage .art-box svg{filter:drop-shadow(0 0 22px rgba(0,200,255,.5))}
.enemy-stage .art-box svg{filter:drop-shadow(0 0 28px rgba(255,60,170,.45))}
.robo-mini .icon.art-box{width:120px;height:120px;flex:0 0 120px}
.robo-mini .icon.art-box svg{max-width:120px;max-height:120px}
.evo-stage .evo-icon.art-box{width:200px;height:200px}
.evo-stage .evo-icon.art-box svg{max-width:200px;max-height:200px}

/* Planet background — sits behind .robo-stage / .enemy-stage */
.planet-bg{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:.55;pointer-events:none}
.planet-bg svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.robo-stage,.enemy-stage{position:relative}
.robo-stage > .robo-meta,.robo-stage > .art-box,
.enemy-stage > .enemy-meta,.enemy-stage > .art-box,
.enemy-stage > .enemy-hp,.enemy-stage > .flash{position:relative;z-index:2}

/* Compendium */
.comp-wrap{padding:24px 32px;overflow:auto;display:flex;flex-direction:column;min-height:0;flex:1}
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:14px;align-content:start}
.comp-card{
  border:1px solid rgba(0,200,255,.3);
  background:linear-gradient(180deg,rgba(11,22,58,.55),rgba(5,10,30,.75));
  padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  min-height:200px;
}
.comp-card.locked{opacity:.45;filter:grayscale(.7)}
.comp-card.boss{border-color:var(--magenta)}
.comp-card.equipped{border-color:var(--lime)}
.comp-art{width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.comp-art svg{max-width:120px;max-height:120px}
.comp-art.locked-art{font-size:64px;color:var(--ink-dim);font-family:var(--font-mono)}
.comp-name{font-weight:800;color:#fff;font-size:14px;text-align:center}
.comp-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);letter-spacing:.08em;text-align:center}

/* Evolution animation */
.evo-flash{position:fixed;inset:0;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.9), rgba(0,200,255,.5) 35%, rgba(2,4,13,0) 70%);z-index:300;opacity:0;transition:opacity .15s ease-out;pointer-events:none}
.evo-flash.show{opacity:1;animation:evo-flash-fade .9s forwards}
@keyframes evo-flash-fade{0%{opacity:1}60%{opacity:1}100%{opacity:0}}
.evo-heading{animation:evo-title 1.2s ease-out}
@keyframes evo-title{0%{transform:scale(.6);opacity:0;letter-spacing:.5em}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.evo-icon.fade-out{animation:fade-out 1.2s forwards;opacity:.4}
@keyframes fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:.35;transform:scale(.9)}}
/* F7 protractor */
.protractor-wrap{display:flex;justify-content:center;padding:8px 0}
.protractor-svg{width:380px;max-width:100%;height:auto;touch-action:none;cursor:grab;user-select:none}
.protractor-svg:active{cursor:grabbing}

/* F3 handwriting */
.handwrite{width:100%;max-width:560px;height:240px;background:#0a1336;border:1px solid var(--cyan);border-radius:6px;touch-action:none;cursor:crosshair;display:block}
.ocr-status{margin-top:6px;padding:6px 10px;font-size:13px;font-family:var(--font-mono);color:var(--ink);min-height:24px}
.ocr-status.busy{color:var(--cyan-l);background:rgba(0,200,255,.06)}
.ocr-status.ok{color:var(--lime);background:rgba(180,255,60,.08)}
.ocr-status.warn{color:var(--amber);background:rgba(255,180,0,.06)}

/* F5 reorder chips */
.reorder-tray{display:flex;flex-wrap:wrap;gap:8px;padding:14px;border:1px dashed rgba(0,200,255,.4);background:rgba(0,200,255,.04);min-height:80px;border-radius:6px}
.reorder-chip{padding:10px 16px;background:rgba(0,200,255,.12);border:1px solid var(--cyan);color:var(--ink);font-weight:700;font-size:18px;cursor:grab;user-select:none}
.reorder-chip.drag{opacity:.4}

/* F6 matching */
.matching-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.matching-col{display:flex;flex-direction:column;gap:8px}
.matching-btn{padding:12px;border:2px solid rgba(0,200,255,.3);background:rgba(0,200,255,.04);color:var(--ink);font-size:16px;font-weight:700;text-align:left;transition:border-color .15s, background .15s, outline .15s}
.matching-btn:hover{border-color:var(--cyan)}

/* Parent dashboard */
.parent-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.parent-stat{border:1px solid rgba(0,200,255,.25);padding:10px 12px;background:rgba(0,200,255,.05);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.parent-stat .lbl{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);letter-spacing:.12em}
.parent-stat .val{font-family:var(--font-display);font-weight:800;font-size:16px;color:#fff;margin-top:4px}
.parent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.parent-panel{border:1px solid rgba(0,200,255,.3);background:linear-gradient(180deg,rgba(11,22,58,.55),rgba(5,10,30,.75));padding:14px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.parent-panel h3{margin:0 0 6px;font-family:var(--font-display);letter-spacing:.1em;color:var(--cyan-l);font-size:14px}
.parent-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);margin-bottom:10px}
.unit-list{display:flex;flex-direction:column;gap:6px}
.unit-row{display:grid;grid-template-columns:1fr 90px 36px;align-items:center;gap:8px;font-size:12px}
.unit-row.muted{color:var(--ink-dim);grid-template-columns:1fr}
.unit-bar{height:6px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);position:relative}
.unit-bar span{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime))}
.unit-stage{font-family:var(--font-mono);font-size:11px;color:var(--cyan-l);text-align:right}

/* Certificate preview (modal) */
.cert-preview{max-height:60vh;overflow:auto;background:#0a1336;border:1px solid rgba(0,200,255,.3);padding:18px;font-size:12px;color:#cfe}
.cert-preview .cert-frame{border:2px double #9BF0FF;padding:18px}
.cert-preview .cert-logo{font-family:var(--font-display);font-size:22px;font-weight:900;text-align:center}
.cert-preview .cert-logo em{color:var(--cyan);font-style:normal}
.cert-preview .cert-title{text-align:center;letter-spacing:.18em;color:var(--cyan-l);font-size:11px;margin-top:4px;border-bottom:1px solid rgba(155,240,255,.3);padding-bottom:10px;margin-bottom:14px}
.cert-preview table{width:100%;border-collapse:collapse;margin:10px 0}
.cert-preview th,.cert-preview td{padding:6px 10px;text-align:left;border-bottom:1px solid rgba(155,240,255,.12)}
.cert-preview th{color:var(--cyan-l);width:40%}
.cert-preview .cert-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;color:var(--ink-dim);border-top:1px solid rgba(155,240,255,.2);padding-top:6px}

.evo-icon.pulse-in{animation:pulse-in 1.4s ease-out}
@keyframes pulse-in{0%{transform:scale(.4) rotate(-20deg);opacity:0;filter:drop-shadow(0 0 80px var(--lime))}55%{transform:scale(1.2) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

/* ===== Henshin Bank (Phase 4) ===== */
.henshin-overlay{position:fixed;inset:0;z-index:400;background:radial-gradient(circle at 50% 50%, #0E1A3A 0%, #02040d 80%);overflow:hidden;display:flex;align-items:center;justify-content:center}
.henshin-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:henshin-blink 4.5s ease-out forwards}
@keyframes henshin-blink{
  0%{opacity:1}5%{opacity:.2}10%{opacity:.8}15%{opacity:.1}
  35%{opacity:1}40%{opacity:.2}
  55%{opacity:.8}60%{opacity:.1}
  100%{opacity:0}
}
.henshin-rays{position:absolute;inset:-50%;background:conic-gradient(from 0deg, transparent 0deg, rgba(0,200,255,.25) 8deg, transparent 16deg, transparent 24deg, rgba(255,60,170,.2) 32deg, transparent 40deg);animation:henshin-rotate 4s linear infinite;opacity:.7}
@keyframes henshin-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.henshin-vignette{position:absolute;inset:0;background:radial-gradient(circle at center, transparent 30%, rgba(2,4,13,.85) 80%)}
.henshin-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px}
.henshin-count{font-family:var(--font-display);font-weight:900;font-size:200px;color:#fff;text-shadow:0 0 60px var(--cyan), 0 0 120px var(--magenta);letter-spacing:.05em;animation:henshin-count 1.8s ease-out}
@keyframes henshin-count{from{transform:scale(2);opacity:0}50%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:.6}}
.henshin-silhouette,.henshin-new{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0}
.henshin-silhouette .art-box.silh svg{filter:brightness(0) drop-shadow(0 0 50px var(--cyan));max-width:380px;max-height:480px}
.henshin-new .art-box.neo svg{filter:drop-shadow(0 0 80px var(--lime)) drop-shadow(0 0 40px var(--cyan));max-width:380px;max-height:480px;transform:scale(.4) rotate(-25deg);opacity:0;transition:transform 1.2s cubic-bezier(.2,1.6,.4,1), opacity .6s ease-out}
.henshin-name{font-family:var(--font-display);font-weight:900;font-size:80px;letter-spacing:.2em;background:linear-gradient(180deg,#fff,var(--cyan-l),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(0,200,255,.4);opacity:0;transform:translateY(40px);transition:opacity .6s, transform .6s}
.henshin-sub{font-family:var(--font-mono);color:var(--cyan-l);letter-spacing:.18em;font-size:14px;opacity:0;transition:opacity .6s}
.henshin-overlay.phase1 .henshin-silhouette{opacity:.9;animation:henshin-shake .15s infinite alternate}
@keyframes henshin-shake{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
.henshin-overlay.phase2 .henshin-silhouette{opacity:1;filter:brightness(2)}
.henshin-overlay.phase3 .henshin-silhouette{opacity:0;transition:opacity .4s}
.henshin-overlay.phase3 .henshin-new{opacity:1}
.henshin-overlay.phase3 .henshin-new .art-box.neo svg{transform:scale(1) rotate(0);opacity:1}
.henshin-overlay.phase4 .henshin-name{opacity:1;transform:translateY(0)}
.henshin-overlay.phase4 .henshin-sub{opacity:1}
.henshin-overlay.phase4 .henshin-count{opacity:0;transition:opacity .3s}

/* Phase transition flash (final boss) */
.phase-flash{position:fixed;inset:0;z-index:380;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:radial-gradient(circle, rgba(255,60,170,.5), rgba(2,4,13,.85) 70%);opacity:0;transition:opacity .25s}
.phase-flash.show{opacity:1;animation:phase-fade 1.6s forwards}
@keyframes phase-fade{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
.phase-title{font-family:var(--font-display);font-weight:900;font-size:120px;letter-spacing:.15em;background:linear-gradient(180deg,#fff,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 80px rgba(255,60,170,.6)}
.phase-sub{font-family:var(--font-mono);letter-spacing:.16em;color:var(--magenta);font-size:18px}
.robo-meta{position:absolute;left:20px;top:18px;display:flex;flex-direction:column;gap:8px}
.robo-meta .tag.lvl{font-size:14px;border-color:var(--cyan);color:var(--cyan-l)}
.home-right{display:flex;flex-direction:column;gap:14px;overflow:hidden}
.menu-card{
  border:1px solid rgba(0,200,255,.3);
  background:linear-gradient(180deg,rgba(11,22,58,.55),rgba(5,10,30,.75));
  padding:18px 22px; cursor:pointer;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:filter .15s,transform .1s;
}
.menu-card:hover{filter:brightness(1.2)}
.menu-card:active{transform:translateY(1px)}
.menu-card h3{margin:0 0 6px;font-family:var(--font-display);letter-spacing:.12em;color:var(--cyan);font-size:14px}
.menu-card p{margin:0;color:var(--ink-dim);font-size:13px}
.menu-card.battle{border-color:var(--magenta)}
.menu-card.battle h3{color:var(--magenta)}

/* HUD bottom bar */
.statusbar{
  display:flex;align-items:center;gap:18px;padding:14px 32px;
  border-top:1px solid rgba(0,200,255,.18);
  background:linear-gradient(0deg,rgba(11,22,58,.6),rgba(11,22,58,0));
}
.stat{display:flex;flex-direction:column;gap:6px;min-width:120px}
.stat .lbl{font-family:var(--font-mono);font-size:10px;color:var(--ink-dim);letter-spacing:.14em}
.stat .row{display:flex;align-items:center;gap:10px}
.stat .val{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff}
.stat .val.gold{color:var(--amber)}
.bar{flex:1;height:6px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);position:relative;min-width:120px}
.bar span{position:absolute;left:0;top:0;height:100%;background:var(--cyan)}
.bar.hp span{background:var(--lime)}
.bar.exp span{background:var(--cyan)}

/* ============================================================
   Battle screen
   ============================================================ */
.battle{display:grid;grid-template-rows:56px 1fr 110px;width:100%}
.battle-grid{display:grid;grid-template-columns:1fr 520px;gap:16px;padding:18px 28px;overflow:hidden}
.b-left{display:grid;grid-template-rows:1fr 140px;gap:14px;min-height:0}
.enemy-stage{
  position:relative;border:1px solid rgba(255,60,170,.35);
  background:radial-gradient(circle at 50% 40%, rgba(255,60,170,.06), transparent 60%), linear-gradient(180deg,rgba(40,15,40,.5),rgba(5,10,30,.85));
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.enemy-art{font-size:200px;filter:drop-shadow(0 0 30px rgba(255,60,170,.45))}
.enemy-meta{position:absolute;left:20px;top:18px;display:flex;flex-direction:column;gap:6px}
.enemy-meta .name{font-family:var(--font-display);font-size:18px;color:var(--magenta);letter-spacing:.12em}
.enemy-hp{position:absolute;left:20px;right:20px;bottom:18px}
.enemy-hp .bar{height:10px}
.enemy-hp .bar span{background:var(--magenta)}
.enemy-hp .label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);margin-bottom:6px}

.robo-mini{
  border:1px solid rgba(0,200,255,.3);
  background:linear-gradient(180deg,rgba(11,22,58,.5),rgba(5,10,30,.7));
  display:flex;align-items:center;gap:18px;padding:12px 20px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.robo-mini .icon{font-size:88px;filter:drop-shadow(0 0 14px rgba(0,200,255,.5))}
.robo-mini .stats{flex:1;display:flex;flex-direction:column;gap:6px}
.robo-mini .name{font-family:var(--font-display);font-size:14px;letter-spacing:.12em;color:var(--cyan)}

/* Chapter clearance progress (battle hud) */
.chap-progress{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.cp-label{font-family:var(--font-mono);font-size:10px;color:var(--cyan-l);letter-spacing:.1em}
.cp-bar{height:4px;background:rgba(0,200,255,.1);border:1px solid rgba(0,200,255,.3);position:relative}
.cp-bar span{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta))}

/* Subject indicator */
.subject-strip{display:flex;align-items:center;gap:10px;padding:8px 0}
.subject-pill{
  display:flex;align-items:center;gap:8px;padding:6px 14px;
  border:1px solid rgba(0,200,255,.25);color:var(--ink-dim);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.subject-pill.active{color:var(--cyan-l);border-color:var(--cyan);background:rgba(0,200,255,.1)}
.subject-pill.next{opacity:.5}

/* Question panel */
.q-panel{
  display:flex;flex-direction:column;gap:14px;
  border:1px solid rgba(0,200,255,.3);
  background:linear-gradient(180deg,rgba(11,22,58,.5),rgba(5,10,30,.75));
  padding:20px 22px; min-height:0; overflow:hidden;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.q-meta{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);letter-spacing:.1em}
.q-text{font-size:26px;font-weight:700;color:#fff;line-height:1.5;min-height:80px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.speak-btn{align-self:flex-start;padding:6px 14px;font-size:13px;font-weight:700;border:1px solid var(--cyan);background:rgba(0,200,255,.12);color:var(--cyan-l);cursor:pointer;font-family:inherit;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.speak-btn:hover{filter:brightness(1.3)}
.speak-btn:active{transform:translateY(1px)}
.math-illust{align-self:center;margin:6px 0;padding:8px;background:rgba(0,200,255,.04);border:1px solid rgba(0,200,255,.2);border-radius:4px}
.math-illust svg{display:block}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{
  padding:18px;font-size:18px;font-weight:700;
  background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.35);
  color:var(--ink);text-align:left;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:filter .15s,transform .1s;
}
.choice:hover{filter:brightness(1.25)}
.choice:active{transform:translateY(1px)}
.choice.correct{background:rgba(180,255,60,.15);border-color:var(--lime);color:var(--lime)}
.choice.wrong{background:rgba(255,60,170,.15);border-color:var(--magenta);color:var(--magenta)}
.choice:disabled{cursor:not-allowed}

/* Numeric pad */
.input-row{display:flex;gap:10px;align-items:center}
.q-input{
  flex:1;padding:16px 18px;font-size:22px;font-family:var(--font-mono);
  background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.4);color:#fff;outline:none;
  letter-spacing:.06em;
}
.q-input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,200,255,.18)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.keypad button{
  padding:14px;font-size:20px;font-weight:800;font-family:var(--font-mono);
  background:rgba(0,200,255,.08);border:1px solid rgba(0,200,255,.3);color:var(--ink);
}
.keypad button.ctrl{background:rgba(255,180,0,.08);border-color:rgba(255,180,0,.4);color:var(--amber)}

/* Hint + actions */
.q-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hint-area{
  margin-top:6px;padding:12px 14px;border-left:3px solid var(--amber);
  background:rgba(255,180,0,.06);color:var(--ink);font-size:14px;line-height:1.6;
}
.hint-area.reveal{border-left-color:var(--lime);background:rgba(180,255,60,.08)}

/* Feedback overlay */
.flash{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;font-family:var(--font-display);font-weight:900;font-size:140px;letter-spacing:.1em;
  opacity:0;transition:opacity .25s; z-index:40;
}
.flash.show{opacity:1}
.flash.correct{color:var(--lime);text-shadow:0 0 60px rgba(180,255,60,.6)}
.flash.wrong{color:var(--magenta);text-shadow:0 0 60px rgba(255,60,170,.6)}

/* ============================================================
   Modal
   ============================================================ */
#modal-root{position:fixed;inset:0;pointer-events:none;z-index:200}
.modal-bg{
  position:absolute;inset:0;background:rgba(2,4,13,.78);
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  min-width:560px;max-width:80%;max-height:80%;overflow:auto;
  border:1px solid var(--cyan);
  background:linear-gradient(180deg,rgba(11,22,58,.95),rgba(5,10,30,.95));
  padding:28px 32px;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.modal h2{margin:0 0 12px;font-family:var(--font-display);letter-spacing:.14em;color:var(--cyan)}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* Shop legacy (compendium reuses) */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.shop-item{
  border:1px solid rgba(0,200,255,.3);padding:14px;display:flex;flex-direction:column;gap:6px;
  background:rgba(0,200,255,.04);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.shop-item .icon{font-size:48px;text-align:center}
.shop-item .name{font-weight:800;color:#fff}
.shop-item .price{font-family:var(--font-mono);color:var(--amber);font-size:13px}
.shop-item .desc{color:var(--ink-dim);font-size:12px;min-height:32px}
.shop-item.equipped{border-color:var(--lime);background:rgba(180,255,60,.06)}
.shop-tabs{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.shop-tab{padding:8px 16px;font-family:var(--font-display);letter-spacing:.1em;font-size:12px;background:transparent;border:1px solid rgba(0,200,255,.3);color:var(--ink-dim);cursor:pointer}
.shop-tab.on{background:rgba(0,200,255,.12);border-color:var(--cyan);color:var(--cyan-l)}

/* === Full Shop Screen === */
.shop-screen{padding:18px 28px;overflow:auto;display:flex;flex-direction:column;gap:14px;min-height:0;flex:1}
.shop-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.shop-gold{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--amber);letter-spacing:.1em;padding:6px 14px;border:1px solid var(--amber);background:rgba(255,180,0,.08);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}

.shop-hero{display:grid;grid-template-columns: 280px 1fr;gap:14px;padding:14px;border:1px solid rgba(0,200,255,.3);background:linear-gradient(180deg,rgba(11,22,58,.7),rgba(5,10,30,.85));clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.hero-robo{display:flex;align-items:center;gap:12px}
.hero-art{width:120px;height:120px;flex:0 0 120px}
.hero-art svg{max-width:120px;max-height:120px;filter:drop-shadow(0 0 20px rgba(0,200,255,.5))}
.hero-name{font-family:var(--font-display);font-size:18px;color:var(--cyan);letter-spacing:.1em;font-weight:800}
.hero-stats{font-family:var(--font-mono);font-size:11px;color:var(--ink);margin-top:4px}
.eq-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start}
.eq-slot{display:flex;justify-content:space-between;padding:6px 10px;background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.2);font-size:11px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.eq-cat{color:var(--ink-dim);font-family:var(--font-mono);letter-spacing:.1em}
.eq-name{color:#fff;font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.shop-card-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px}
.shop-card{
  position:relative;
  padding:14px 12px 12px;display:flex;flex-direction:column;gap:6px;
  border:2px solid var(--rar-color);
  background:linear-gradient(180deg, rgba(11,22,58,.85), rgba(5,10,30,.95));
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:0 0 24px var(--rar-glow);
  transition:transform .15s;
}
.shop-card:hover{transform:translateY(-2px)}
.shop-card.equipped{background:linear-gradient(180deg,rgba(40,80,5,.6),rgba(5,15,5,.85));box-shadow:0 0 30px rgba(180,255,60,.6)}
.shop-card.locked{opacity:.55;filter:grayscale(.5)}
.shop-rarity{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--rar-color);text-align:right;font-weight:800;text-shadow:0 0 8px var(--rar-glow)}
.shop-icon{font-size:56px;text-align:center;line-height:1;filter:drop-shadow(0 0 12px var(--rar-glow))}
.shop-name{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;text-align:center;letter-spacing:.04em}
.shop-desc{color:var(--cyan-l);font-size:12px;text-align:center;line-height:1.4;min-height:32px}
.shop-flavor{color:var(--ink-dim);font-size:11px;font-style:italic;text-align:center;line-height:1.4}
.shop-price{font-family:var(--font-display);font-size:18px;color:var(--amber);text-align:center;font-weight:900}
.shop-status{font-family:var(--font-mono);font-size:11px;color:var(--lime);text-align:center;letter-spacing:.1em}
.shop-lock{font-family:var(--font-mono);font-size:11px;color:var(--amber);text-align:center}
.shop-action{margin-top:auto}
.shop-action .btn{width:100%}

/* レア度別アニメ */
.shop-card.r-SR{animation:rare-pulse 3s infinite}
.shop-card.r-UR{animation:ur-shine 2.5s infinite}
@keyframes rare-pulse{0%,100%{box-shadow:0 0 24px var(--rar-glow)}50%{box-shadow:0 0 40px var(--rar-glow)}}
@keyframes ur-shine{0%,100%{box-shadow:0 0 30px var(--rar-glow)}50%{box-shadow:0 0 60px var(--rar-glow), inset 0 0 30px rgba(255,255,255,.1)}}

/* 購入トースト */
.buy-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);background:linear-gradient(135deg,rgba(80,55,5,.95),rgba(11,22,58,.95));border:2px solid var(--lime);padding:20px 30px;display:flex;gap:14px;align-items:center;z-index:600;opacity:0;transition:transform .35s cubic-bezier(.2,1.7,.4,1), opacity .25s;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:0 0 60px rgba(180,255,60,.6);font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;letter-spacing:.05em}
.buy-toast.show{transform:translate(-50%,-50%) scale(1);opacity:1}
.bt-icon{font-size:48px}

/* Evolution */
.evo-stage{display:flex;align-items:center;justify-content:center;gap:40px;padding:30px 0}
.evo-stage .arrow{font-family:var(--font-display);color:var(--cyan);font-size:36px;animation:pulse 1s infinite alternate}
@keyframes pulse{from{transform:translateX(-6px);opacity:.6}to{transform:translateX(6px);opacity:1}}
.evo-icon{font-size:160px;filter:drop-shadow(0 0 30px rgba(0,200,255,.6))}
.evo-icon.next{filter:drop-shadow(0 0 50px rgba(180,255,60,.7))}
.evo-title{text-align:center;font-family:var(--font-display);font-size:30px;color:var(--lime);letter-spacing:.16em}