@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Chakra+Petch:wght@400;500;600;700&family=Shippori+Mincho:wght@700;800&display=swap');

:root{
  --void:#14101f;
  --void-deep:#0a0812;
  --panel:#241b3a;
  --panel-hi:#332750;
  --ink:#0a0812;
  --red:#e6425e;
  --red-dark:#a12a41;
  --gold:#ffcc4d;
  --gold-dark:#c99a2e;
  --green:#5fd67a;
  --green-dark:#3a9c54;
  --cyan:#4fd3e8;
  --text:#f4f1ff;
  --text-dim:#9d93c2;
}

*{ box-sizing:border-box; image-rendering:pixelated; }
text, p, span, div, button{ image-rendering:auto; }

html,body{
  margin:0; min-height:100%;
  background:var(--void);
  color:var(--text);
  font-family:'Chakra Petch', sans-serif;
  overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply; opacity:0.35;
}
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(79,211,232,0.10), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(230,66,94,0.10), transparent 40%);
}

.stage{
  position:relative; z-index:1;
  max-width:560px; margin:0 auto;
  min-height:100vh;
  display:flex; flex-direction:column;
  padding:14px 12px 30px;
}

.pix{ font-family:'Press Start 2P', monospace; }

/* ---------- pixel frame (bordered panel) ---------- */
.pixel-frame{
  --stair:8px;
  background:var(--ink);
  padding:5px;
  clip-path: polygon(
    0 var(--stair), var(--stair) var(--stair), var(--stair) 0,
    calc(100% - var(--stair)) 0, calc(100% - var(--stair)) var(--stair), 100% var(--stair),
    100% calc(100% - var(--stair)), calc(100% - var(--stair)) calc(100% - var(--stair)), calc(100% - var(--stair)) 100%,
    var(--stair) 100%, var(--stair) calc(100% - var(--stair)), 0 calc(100% - var(--stair))
  );
}
.pixel-frame > .inner{
  --s2:4px;
  background:var(--panel);
  clip-path: polygon(
    0 var(--s2), var(--s2) var(--s2), var(--s2) 0,
    calc(100% - var(--s2)) 0, calc(100% - var(--s2)) var(--s2), 100% var(--s2),
    100% calc(100% - var(--s2)), calc(100% - var(--s2)) calc(100% - var(--s2)), calc(100% - var(--s2)) 100%,
    var(--s2) 100%, var(--s2) calc(100% - var(--s2)), 0 calc(100% - var(--s2))
  );
}
.pixel-frame.danger > .inner{ background:#3a1522; }

/* ---------- HEADER ---------- */
.hdr{ margin-bottom:8px; }
.title-badge .inner{ padding:8px 12px; display:flex; align-items:baseline; gap:10px; }
.title-jp{ font-family:'Shippori Mincho',serif; font-weight:800; font-size:25px; color:var(--gold); line-height:1; white-space:nowrap; }
.title-sub{ font-size:11px; letter-spacing:0.05em; color:var(--cyan); white-space:nowrap; }
.hdr-controls{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; }
.hdr-controls-left{ display:flex; align-items:center; gap:10px; }
.lives{ display:flex; gap:4px; }
.heart-svg{ width:24px; height:18px; color:var(--red); }
.heart-svg.lost{ color:#3d3654; }
.score-badge .inner{ padding:8px 10px; display:flex; align-items:center; gap:6px; }
.coin{ width:14px; height:14px; background:var(--gold); border:2px solid var(--gold-dark); }
.score-num{ font-size:16px; color:var(--gold); letter-spacing:1px; }

/* ---------- META / TIMER (normal stage) ---------- */
.meta-row{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-bottom:6px; letter-spacing:0.03em; }
.combo-tag{ color:var(--green); }
.seg-track{ display:flex; gap:2px; height:14px; margin-bottom:16px; background:var(--void-deep); padding:3px; border:2px solid var(--ink); }
.seg{ flex:1; background:#3d3654; }
.seg.on{ background:var(--green); }
.seg.on.warn{ background:var(--gold); }
.seg.on.danger{ background:var(--red); }

/* ---------- BOSS HUD ---------- */
.boss-hud{ margin-bottom:14px; }
.boss-title{ text-align:center; font-size:15px; color:var(--red); margin-bottom:10px; letter-spacing:0.02em; }
.boss-row{ display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.boss-sprite-wrap{ width:84px; height:72px; flex:0 0 auto; background:var(--void-deep); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; }
.boss-sprite{ width:70px; height:60px; }
.boss-sprite.hit{ animation:hitFlash .25s steps(2); }
.boss-sprite.heal{ animation:healFlash .4s steps(3); }
@keyframes hitFlash{ 0%{filter:brightness(1);} 50%{filter:brightness(2.4) saturate(0);} 100%{filter:brightness(1);} }
@keyframes healFlash{ 0%{filter:brightness(1);} 50%{filter:hue-rotate(90deg) brightness(1.5);} 100%{filter:brightness(1);} }
.boss-bars{ flex:1; display:flex; flex-direction:column; gap:6px; }
.boss-label{ font-size:10px; letter-spacing:0.05em; color:var(--text-dim); }
.boss-hp-track{ display:flex; gap:2px; height:12px; background:var(--void-deep); padding:2px; border:2px solid var(--ink); }
.boss-hp-seg{ flex:1; background:#3d3654; }
.boss-hp-seg.on{ background:var(--red); }
.boss-timer-track{ display:flex; gap:2px; height:8px; background:var(--void-deep); padding:2px; border:2px solid var(--ink); }
.boss-timer-seg{ flex:1; background:#3d3654; }
.boss-timer-seg.on{ background:var(--gold); }
.boss-timer-seg.on.danger{ background:var(--red); }
.boss-phase{ text-align:center; font-size:11px; color:var(--text-dim); }

/* ---------- CARD ---------- */
.card-frame{ margin-bottom:14px; }
.card-frame > .inner{ padding:20px 14px 18px; position:relative; }
.meaning-tag{ text-align:center; font-size:22px; font-weight:600; color:var(--text); margin-bottom:2px; }
.meaning-en{ text-align:center; font-size:11px; color:var(--cyan); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px; }
.slots-row{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; min-height:122px; }
.slots-row.shake{ animation: shakeIt .32s steps(4); }
@keyframes shakeIt{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-7px);} 50%{transform:translateX(7px);} 75%{transform:translateX(-4px);} }
.slot{ width:84px; height:100px; background:var(--void-deep); border:2px solid var(--ink); box-shadow: inset 0 0 0 2px #443a63; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.slot::before, .slot::after{ content:''; position:absolute; width:6px; height:6px; background:var(--text-dim); opacity:0.5; }
.slot::before{ top:3px; left:3px; }
.slot::after{ bottom:3px; right:3px; }
.slot .hint{ font-size:13px; color:var(--text-dim); text-align:center; padding:0 3px; line-height:1.3; }
.slot .filled-char{ font-family:'Shippori Mincho',serif; font-size:40px; font-weight:700; color:var(--text); }
.slot.filled{ border-color:var(--green); box-shadow: inset 0 0 0 2px var(--green-dark); animation: popIn .22s steps(3); }
.slot.flash-wrong{ border-color:var(--red); box-shadow: inset 0 0 0 2px var(--red-dark); }
@keyframes popIn{ 0%{transform:scale(0.6);} 60%{transform:scale(1.12);} 100%{transform:scale(1);} }
.plus{ font-family:'Press Start 2P',monospace; font-size:15px; color:var(--text-dim); }

.clear-layer{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.clear-banner{ font-family:'Press Start 2P', monospace; font-size:17px; color:var(--void-deep); background:var(--gold); border:3px solid var(--ink); padding:10px 14px; opacity:0; transform:scale(0.4) rotate(-4deg); text-align:center; white-space:nowrap; }
.clear-banner.show{ animation: bannerPop .5s steps(6) forwards; }
.clear-banner.danger{ background:var(--red); color:var(--text); }
@keyframes bannerPop{ 0%{opacity:0; transform:scale(0.4) rotate(-6deg);} 40%{opacity:1; transform:scale(1.15) rotate(2deg);} 70%{transform:scale(0.94) rotate(-1deg);} 100%{opacity:1; transform:scale(1) rotate(0deg);} }

.feedback{ text-align:center; height:24px; margin-top:8px; font-size:15px; font-weight:700; letter-spacing:0.02em; }
.feedback.good{ color:var(--green); }
.feedback.bad{ color:var(--red); }

.tray-label{ font-size:13px; color:var(--text-dim); letter-spacing:0.08em; margin:6px 0 8px 2px; }
.tray{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.tile{ width:84px; height:84px; background:var(--panel-hi); border:2px solid var(--ink); box-shadow: 3px 3px 0 var(--void-deep); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; user-select:none; -webkit-user-select:none; }
.tile:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--void-deep); }
.tile .rchar{ font-family:'Shippori Mincho',serif; font-size:32px; font-weight:700; line-height:1; color:var(--text); }
.tile .rlabel{ font-size:12px; color:var(--text-dim); margin-top:4px; text-align:center; padding:0 3px; line-height:1.2; }
.tile.selected{ border-color:var(--cyan); box-shadow:3px 3px 0 var(--cyan); transform:translate(-1px,-1px); }
.tile.used{ visibility:hidden; }

.strip-label{ font-size:13px; color:var(--text-dim); letter-spacing:0.08em; margin:18px 0 8px 2px; }
.strip{ display:flex; flex-wrap:wrap; gap:6px; padding:10px; border:2px dashed #3d3654; min-height:44px; }
.strip-badge{ width:34px; height:34px; background:var(--gold); border:2px solid var(--gold-dark); display:flex; align-items:center; justify-content:center; font-family:'Shippori Mincho',serif; font-size:16px; font-weight:700; color:var(--void-deep); opacity:0; animation:fadeBadge .2s steps(3) forwards; }
.strip-badge.boss{ background:var(--red); border-color:var(--red-dark); color:var(--text); }
@keyframes fadeBadge{ from{opacity:0; transform:scale(0.4);} to{opacity:1; transform:scale(1);} }

.btn{ font-family:'Press Start 2P', monospace; font-size:14px; background:var(--red); color:var(--text); border:2px solid var(--ink); padding:14px 22px; cursor:pointer; box-shadow:4px 4px 0 var(--void-deep); }
.btn:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--void-deep); }
.btn.secondary{ background:var(--panel-hi); color:var(--text-dim); margin-top:10px; }
.btn.small{ font-size:12px; padding:9px 13px; }
.btn.ghost{ background:transparent; color:var(--text-dim); box-shadow:none; border:2px solid #443a63; font-size:11px; padding:9px 13px; margin-top:8px; }

.overlay{ position:fixed; inset:0; z-index:10; background:rgba(10,8,18,0.78); display:flex; align-items:center; justify-content:center; padding:18px; }
.panel-frame{ max-width:420px; width:100%; }
.panel-frame > .inner{ padding:26px 20px; text-align:center; }
.panel .big-kanji{ font-family:'Shippori Mincho',serif; font-size:58px; font-weight:800; color:var(--red); margin-bottom:8px; }
.panel h1, .panel h5{ font-size:14px; margin:0 0 14px; color:var(--gold); }
.panel p{ font-size:18px; color:var(--text-dim); line-height:1.7; margin:0 0 18px; }
.rule-list{ text-align:left; font-size:17px; color:var(--text-dim); line-height:2; margin:0 0 20px; padding-left:16px; }
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.stat-box{ background:var(--void-deep); border:2px solid var(--ink); padding:12px 6px; }
.stat-box .num{ font-family:'Press Start 2P',monospace; font-size:19px; color:var(--gold); }
.stat-box .lbl{ font-size:11px; color:var(--text-dim); letter-spacing:0.05em; margin-top:6px; }
.hidden{ display:none !important; }
.info-btn{ width:36px; height:36px; background:var(--panel-hi); border:2px solid var(--ink); color:var(--text); font-family:'Press Start 2P',monospace; font-size:14px; cursor:pointer; }

/* ---------- FX LAYER (Balatro-style juice) ---------- */
#fxLayer{ position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.score-popup{ position:absolute; left:0; top:0; font-family:'Press Start 2P', monospace; font-size:17px; color:var(--gold); text-shadow:2px 2px 0 var(--void-deep); white-space:nowrap; }
.confetti-piece{ position:absolute; left:0; top:0; width:6px; height:6px; }

#screenFlash{ position:fixed; inset:0; pointer-events:none; z-index:55; opacity:0; mix-blend-mode:screen; }

.stage.impact-shake{ animation: screenShakeKF .4s steps(5); }
@keyframes screenShakeKF{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,3px); }
  40%{ transform:translate(5px,-4px); }
  60%{ transform:translate(-4px,-2px); }
  80%{ transform:translate(4px,3px); }
}

.combo-wrap{ display:inline-flex; align-items:center; gap:4px; }
.combo-flames{ display:none; align-items:center; gap:2px; }
.combo-flames.show{ display:inline-flex; }
.combo-flames .flame-icon{ position:relative; width:13px; height:13px; }
.combo-flames .flame-icon.f2{ display:none; }
.combo-flames.blazing .flame-icon.f2{ display:inline-block; }
.flame-svg{ position:absolute; inset:0; width:100%; height:100%; }
.flame-outer{ color:var(--gold); animation: flameFlickerA .5s steps(2) infinite; transform-origin:50% 100%; }
.flame-inner{ color:var(--text); transform:scale(0.55) translateY(15%); transform-origin:50% 100%; animation: flameFlickerB .4s steps(2) infinite; }
.combo-flames.blazing .flame-outer{ color:var(--red); }
.combo-flames.blazing .flame-inner{ color:var(--gold); }
@keyframes flameFlickerA{ 0%,100%{ transform:scaleY(1) scaleX(1) translateX(0); } 50%{ transform:scaleY(0.88) scaleX(1.1) translateX(0.5px); } }
@keyframes flameFlickerB{ 0%,100%{ transform:scale(0.55) translateY(15%) scaleY(1); } 50%{ transform:scale(0.6) translateY(10%) scaleY(0.82); } }

/* ---------- LEVEL HUB (root landing page) ---------- */
.hub-list{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.hub-link{ display:block; text-decoration:none; }
.hub-link .inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
.hub-link .hub-tag{ font-family:'Press Start 2P',monospace; font-size:18px; color:var(--gold); }
.hub-link .hub-desc{ font-size:16px; color:var(--text-dim); margin-top:4px; }
.hub-link .hub-arrow{ font-size:22px; color:var(--cyan); }