:root{--ink:#eee7e2;--dim:#9a9089;--line:#3a3230;--gold:#e0c063;--rot:#c07bd6;--blk:#7fd3ff;
    --red:#e0685c;--green:#6fcf7a;--yellow:#e0c063;--blue:#7aa0ff;--black:#c07bd6;}
  *{box-sizing:border-box}
  body{margin:0;background:radial-gradient(1200px 700px at 50% -10%,#1c1a24,#0b0a0e 70%);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;}
  .wrap{max-width:960px;margin:0 auto;padding:12px 12px 34px;}
  h1{font-family:"Trebuchet MS",system-ui;font-size:17px;letter-spacing:.02em;margin:0 0 2px;text-align:center;font-weight:800}
  .sub{text-align:center;color:var(--dim);font-size:12px;margin-bottom:12px}

  /* クラス選択 */
  .select{display:none} .select.on{display:block}
  .selhead{text-align:center;margin:10px 0 16px}
  .selhead .lead{font-size:15px;color:var(--gold);font-weight:800}
  .selhead .hero{font-size:12px;color:var(--dim);margin-top:4px}
  .classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .class{border:1px solid var(--line);border-radius:14px;padding:16px 14px;cursor:pointer;background:linear-gradient(180deg,#1a1820,#100e14);transition:transform .1s;text-align:center}
  .class:hover{transform:translateY(-5px)}
  .class .ci{font-size:30px;margin-bottom:6px}
  .class .cnm{font-weight:800;font-size:14px;margin-bottom:3px}
  .class .cpl{font-size:11px;color:var(--dim);min-height:30px}
  .class .cdiff{font-size:12px;font-weight:800;margin-top:6px}

  /* バトル（横画面） */
  .battle{display:none} .battle.on{display:block}
  .arena{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start;border:1px solid var(--line);border-radius:16px;padding:16px 14px;min-height:290px;
    background:radial-gradient(560px 300px at 18% 45%,rgba(80,160,90,.09),transparent 60%),radial-gradient(560px 300px at 84% 42%,rgba(150,60,160,.11),transparent 60%),linear-gradient(180deg,#0f1712,#0a0f0c);overflow:hidden}
  .side{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
  .vs{align-self:center;color:#4a5b50;font-weight:800;font-size:20px}
  .portrait{position:relative;border-radius:14px;overflow:hidden;border:2px solid #3a4d40;box-shadow:0 8px 26px rgba(0,0,0,.5);width:128px;height:128px;animation:bobA 4s ease-in-out infinite}
  .portrait.bossp{width:184px;height:184px;border-color:#5a3a63;animation:bobB 5s ease-in-out infinite}
  .portrait img{width:100%;height:100%;object-fit:cover;display:block}
  .portrait .flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,80,60,.6),transparent 70%);opacity:0;pointer-events:none}
  .portrait.hit .flash{animation:flash .45s}
  .portrait.hit{animation:hitk .4s}
  @keyframes bobA{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes bobB{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px) rotate(.4deg)}}
  @keyframes flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
  @keyframes hitk{0%,100%{transform:translateY(0)}30%{transform:translate(3px,-4px) scale(1.03)}60%{transform:translate(-3px,2px)}}
  .unitname{font-weight:800;font-size:14px} .unitname.rot{color:var(--rot)}
  .hpwrap{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
  .bar{width:180px;max-width:100%;height:18px;border-radius:10px;background:#3a1e1c;overflow:hidden;position:relative;border:1px solid #52302e}
  .bar>i{display:block;height:100%;background:linear-gradient(90deg,#e0685c,#b23f38);transition:width .45s cubic-bezier(.2,.8,.2,1)}
  .bar.me>i{background:linear-gradient(90deg,#6fcf7a,#3f8f52)}
  .bar .txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}
  .intentBig{font-size:13px;font-weight:800;padding:5px 12px;border-radius:20px;background:#2a1414;border:1px solid #7a3833;color:#ffb4a8;white-space:nowrap;animation:pulse 1.7s ease-in-out infinite}
  .intentBig.charge{background:#2a2410;border-color:#7a6a2a;color:#ffe08a}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  .enemies{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
  .enemyCard{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:5px 6px;border-radius:12px;border:2px solid transparent;transition:border-color .1s,background .1s}
  .enemyCard:hover{border-color:#6a5a3a}
  .enemyCard.tgt{border-color:#ffcf66;background:rgba(255,180,80,.09)}
  .eport{position:relative;border-radius:12px;overflow:hidden;border:2px solid #5a3a63;box-shadow:0 6px 20px rgba(0,0,0,.5);width:116px;height:116px;animation:bobB 5s ease-in-out infinite}
  .enemyCard.solo .eport{width:178px;height:178px}
  .eport img{width:100%;height:100%;object-fit:cover;display:block}
  .eport .flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,80,60,.6),transparent 70%);opacity:0;pointer-events:none}
  .enemyCard.hit .eport{animation:hitk .4s} .enemyCard.hit .flash{animation:flash .45s}
  .ename2{font-size:12px;font-weight:800;color:#f0b6e0}
  .ehp{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800}
  .ehpbar{width:120px;height:12px;border-radius:7px;background:#3a1e1c;border:1px solid #52302e;overflow:hidden}
  .ehpbar>i{display:block;height:100%;background:linear-gradient(90deg,#e0685c,#b23f38);transition:width .4s}
  .pill{font-size:12px;font-weight:800;padding:3px 9px;border-radius:14px;background:#1a1210;border:1px solid var(--line)}
  .pill.blk{color:var(--blk);border-color:#2e5568;background:#0e1a22}
  .status{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
  .st{font-size:11px;font-weight:800;padding:2px 8px;border-radius:12px}
  .st.v{background:#2a1420;border:1px solid #7a3860;color:#ff9ad0}
  .st.w{background:#141f2a;border:1px solid #386a7a;color:#9ad8ff}
  .st.p{background:#16220f;border:1px solid #4a7a2a;color:#a6e06a}
  .powers{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;max-width:200px}
  .power{font-size:10px;padding:2px 7px;border-radius:12px;background:#241a2e;border:1px solid #5a4a6a;color:#d8c6ff;font-weight:700}
  /* 相棒（ポートレート） */
  .allies{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:210px;min-height:18px;align-items:center}
  .ally{font-size:11px;font-weight:800;padding:3px 8px;border-radius:12px}
  .ally.reso{background:#2a2038;border:1px solid #8a5aa0;color:#e6b6ff}
  .allyempty{font-size:10px;color:#5a5048}
  .allyU{position:relative;width:44px;text-align:center}
  .allyU .apic{width:44px;height:44px;border-radius:9px;background-size:cover;background-position:center top;border:2px solid #6a5230;background-color:#241c14}
  .allyU.guard .apic{border-color:#3a86c8}
  .allyU .ag{position:absolute;top:-6px;right:-3px;font-size:11px}
  .allyU .ast{font-size:9px;font-weight:800;color:#ffdca0;margin-top:1px}

  .mid{display:flex;align-items:center;gap:12px;justify-content:center;margin:12px 0 4px}
  .energy{font-size:15px;font-weight:800;color:var(--gold)}
  .energy .dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--gold);margin:0 1px;box-shadow:0 0 6px rgba(224,192,99,.6)}
  .energy .dot.off{background:#312a1a;box-shadow:none}
  button.act{font-family:inherit;font-weight:800;font-size:14px;padding:10px 22px;border-radius:10px;border:1px solid #8a6a2a;background:linear-gradient(180deg,var(--gold),#a8842e);color:#1a1206;cursor:pointer}
  button.act:hover{filter:brightness(1.08)} button.act:disabled{opacity:.45;cursor:not-allowed}
  button.ghost{background:transparent;color:var(--dim);border:1px solid var(--line);font-size:12px;padding:8px 14px;font-family:inherit}
  .hint{text-align:center;font-size:12px;color:var(--gold);min-height:16px;margin:2px 0;font-weight:700}
  .handhead{font-size:11px;color:var(--dim);margin:8px 0 6px;letter-spacing:.05em;text-align:center}
  /* 手札カード枠 */
  .hand{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;min-height:168px}
  .card{width:116px;height:166px;border-radius:12px;position:relative;cursor:pointer;overflow:hidden;border:2px solid var(--line);background:#14110c;box-shadow:0 5px 14px rgba(0,0,0,.5);transition:transform .12s cubic-bezier(.2,.9,.2,1),box-shadow .12s;display:flex;flex-direction:column;user-select:none}
  .card:hover{transform:translateY(-14px) scale(1.06);box-shadow:0 16px 30px rgba(0,0,0,.6),0 0 16px rgba(224,192,99,.22);z-index:5}
  .card.A{border-color:#7a3833} .card.S{border-color:#2e5a44} .card.P{border-color:#4a3a63} .card.M{border-color:#8a6a2a}
  .card.no{opacity:.42;cursor:not-allowed}
  .card .cart{height:86px;background-size:cover;background-position:center top;position:relative;flex:0 0 auto}
  .card .cart:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,#14110c)}
  .card .cart.noart{display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(180deg,#2a2620,#16130e)}
  .card .cost{position:absolute;top:-2px;left:-2px;width:26px;height:26px;border-radius:0 0 12px 0;background:linear-gradient(135deg,#ffe9a0,#c99a2e);color:#221706;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:2px 2px 5px rgba(0,0,0,.4)}
  .card .ctag{position:absolute;top:4px;right:4px;font-size:9px;font-weight:800;padding:1px 6px;border-radius:9px;background:rgba(8,8,6,.72);z-index:2}
  .card.A .ctag{color:#ff9a8e} .card.S .ctag{color:#7fe0a0} .card.P .ctag{color:#d3b6ff} .card.M .ctag{color:#ffd88a}
  .card .cbody{padding:3px 7px 6px;flex:1;min-height:0}
  .card .cn{font-size:11.5px;font-weight:800;line-height:1.14;margin-bottom:2px}
  .card .cd{font-size:9px;color:#c2ccc4;line-height:1.26}
  .card .big{position:absolute;bottom:4px;right:7px;font-size:17px;font-weight:900;text-shadow:0 1px 3px #000}
  .card.A .big{color:#ff9a8e} .card.S .big,.card.M .big{color:#7fe0a0}

  .log{border:1px solid var(--line);border-radius:9px;background:#0b0a0e;padding:8px 10px;height:72px;overflow-y:auto;font-size:11.5px;line-height:1.5;color:var(--dim);margin-top:8px}
  .log .p{color:#ffcf8e} .log .b{color:var(--rot)} .log .sys{color:#8a8078} .log .big{color:var(--gold);font-weight:700}
  .float{position:fixed;pointer-events:none;font-weight:900;font-size:24px;z-index:20;text-shadow:0 2px 6px #000;animation:fl 1s ease-out forwards}
  @keyframes fl{0%{opacity:0;transform:translateY(8px) scale(.7)}20%{opacity:1;transform:translateY(-4px) scale(1.15)}100%{opacity:0;transform:translateY(-42px) scale(1)}}
  .overlay{position:fixed;inset:0;background:rgba(6,6,10,.85);display:none;align-items:center;justify-content:center;z-index:30}
  .overlay.on{display:flex}
  .modal{background:linear-gradient(180deg,#1a1820,#0d0c10);border:1px solid var(--line);border-radius:16px;padding:26px 32px;text-align:center;max-width:380px}
  .modal h2{margin:0 0 6px;font-size:26px} .modal.win h2{color:var(--gold)} .modal.lose h2{color:var(--red)}
  .modal p{color:var(--dim);font-size:13px;margin:0 0 18px}
  .map,.reward{display:none}.map.on,.reward.on{display:block}
  .runinfo{text-align:center;font-size:13px;color:var(--gold);font-weight:800;margin:16px 0}
  .track{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin:10px 0 20px}
  .node{width:70px;text-align:center;opacity:.45}
  .node.cur{opacity:1;transform:scale(1.12)} .node.done{opacity:.8}
  .node .ni{font-size:24px} .node.cur .ni{filter:drop-shadow(0 0 6px var(--gold))}
  .node .nn{font-size:10px;color:var(--dim)} .node.cur .nn{color:var(--gold);font-weight:800}
  .node.done .nn:after{content:' ✓';color:var(--green)}
  .edge{width:16px;height:2px;background:var(--line)}
  .mapbtns{display:flex;gap:10px;justify-content:center;align-items:center}
  .reward{text-align:center}
  .rewardhead{font-size:13px;color:var(--gold);font-weight:800;margin:16px 0}
  .rewardCards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
  .rcard{width:160px;border-radius:12px;border:2px solid var(--line);cursor:pointer;background:#16141c;position:relative;transition:transform .1s,box-shadow .1s;overflow:hidden}
  .rcard:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.55)}
  .rart{height:100px;background-size:cover;background-position:center top;position:relative}
  .rart:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#16141c)}
  .rart.noart{display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(180deg,#2a2620,#16130e)}
  .rbody{padding:3px 12px 12px;text-align:left}
  .rcolor{font-size:10px;font-weight:800;letter-spacing:.05em}
  .rn{font-size:13.5px;font-weight:800;margin:3px 0 4px}
  .rd{font-size:10.5px;color:#c9d6cd;line-height:1.32}
  .rcost{position:absolute;top:-2px;left:-2px;width:26px;height:26px;border-radius:0 0 12px 0;background:linear-gradient(135deg,#ffe9a0,#c99a2e);color:#221706;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:2}
  .pileBtn{cursor:pointer;border-bottom:1px dotted var(--dim)}
  .pileBtn:hover{color:var(--gold)}
  .pileBtn b{color:var(--ink)}
  .comboBadge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:12px;background:#2a1e10;border:1px solid #a07a2a;color:#ffd88a}
  .lvb{position:absolute;bottom:-5px;left:-4px;font-size:9px;font-weight:900;background:#e8c15c;color:#221706;border-radius:8px;padding:0 4px}
  .formation{display:none;text-align:center}.formation.on{display:block}
  .dexOv{position:fixed;inset:0;background:rgba(6,6,10,.9);display:none;align-items:center;justify-content:center;z-index:40}
  .dexOv.on{display:flex}
  .dexBox{background:#14121a;border:1px solid var(--line);border-radius:14px;padding:20px 24px;max-width:580px;max-height:72vh;overflow-y:auto;text-align:left}
  .dexBox h3{margin:0 0 10px;color:var(--gold)}
  .dexCol{margin-bottom:10px}
  .dexList{font-size:11px;color:var(--dim);line-height:1.7}
  .dexList .own{color:var(--ink);font-weight:700}
  .star{font-size:11px;color:var(--gold);margin-top:3px}
  @media(max-width:620px){.portrait.bossp{width:130px;height:130px}.portrait{width:96px;height:96px}.arena{padding:12px 8px}}