/* ── ROOT ── */
:root {
  --obs: #060609;
  --v:   #7c3aed;
  --vd:  #4c1d95;
  --g:   #d4af37;
  --gd:  #a07820;
  --l:   #8ecfff;
  --d:   #c084fc;
  --s:   #6ee7b7;
  --r:   #f87171;
  --glass: rgba(6,6,9,0.82);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--obs); color: #e8e0f0; font-family: 'EB Garamond', serif; }

/* ── SCREENS ── */
.screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(rgba(0,0,0,.80), rgba(0,0,0,.88)), url('academy.png') center/cover no-repeat;
}
.hidden  { display: none !important; }
.active  { display: flex !important; }

/* ── QUIZ ── */
.quiz-wrap { text-align: center; max-width: 740px; width: 90%; }
.title-gold { font-family: 'Cinzel Decorative', serif; color: var(--g); font-size: 2.2rem; margin-bottom: .5rem; letter-spacing: .1em; }
.subtitle   { opacity: .7; font-size: 1.05rem; margin-bottom: 2rem; font-style: italic; }
.quiz-prog  { font-family: 'Cinzel Decorative', serif; font-size: .6rem; letter-spacing: .25em; color: var(--g); margin-bottom: 1.8rem; opacity: .7; }

/* ── TUTORIAL ── */
.tutorial-wrap { max-width: 800px; width: 90%; text-align: center; background: rgba(6,6,9,0.85); padding: 2.5rem; border: 1px solid rgba(212,175,55,0.3); border-radius: 8px; }
.tutorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0 3rem; text-align: left; }
.tut-item { display: flex; gap: 1rem; align-items: flex-start; }
.tut-icon { font-size: 1.5rem; filter: drop-shadow(0 0 10px var(--g)); }
.tut-text { font-size: 0.95rem; line-height: 1.6; color: #dcd2e9; }
.tut-text b { color: var(--g); font-family: 'Cinzel Decorative', serif; font-size: 0.8rem; }

/* ── PHASE INTRO ── */
.intro-wrap { text-align: center; max-width: 600px; animation: fadeIn 1.2s ease-out; }
.intro-phase-label { font-family: 'Cinzel Decorative', serif; font-size: 0.8rem; letter-spacing: 0.4em; color: var(--g); opacity: 0.6; margin-bottom: 1rem; }
.intro-desc { font-style: italic; font-size: 1.1rem; color: #c8b8e0; margin-bottom: 3rem; line-height: 1.6; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.quiz-question { font-size: 1.25rem; line-height: 1.85; font-style: italic; margin-bottom: 2.2rem; }
.quiz-opts { display: flex; flex-direction: column; gap: .9rem; }
.quiz-opts button {
  background: rgba(124,58,237,.08); border: 1px solid var(--vd); color: #e8e0f0;
  padding: .9rem 1.6rem; font-family: 'EB Garamond', serif; font-size: 1.05rem;
  font-style: italic; cursor: pointer; text-align: left; border-radius: 2px;
  transition: all .25s ease;
}
.quiz-opts button:hover { background: rgba(124,58,237,.22); border-color: var(--v); color: #fff; transform: translateX(4px); }

/* ── TAROT ── */
#s-tarot { background: linear-gradient(rgba(0,0,0,.78), rgba(3,0,10,.90)), url('harem.png') center 15%/cover no-repeat; }
.tarot-wrap { text-align: center; }
.tarot-card {
  width: 180px; height: 290px; margin: 1.5rem auto;
  perspective: 1000px; cursor: pointer;
  position: relative; transform-style: preserve-3d; transition: transform .9s ease;
}
.tarot-card.flipped { transform: rotateY(180deg); }
.tarot-front, .tarot-back {
  position: absolute; inset: 0; border-radius: 10px;
  backface-visibility: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 2px solid var(--g);
}
.tarot-back { background: var(--glass); font-size: 4rem; color: var(--g); font-style: italic; cursor: pointer; }
.tarot-front { background: var(--glass); transform: rotateY(180deg); }
.t-sym { font-size: 4rem; color: var(--g); }
.t-name { font-family: 'Cinzel Decorative', serif; font-size: .8rem; color: var(--g); margin-top: .8rem; letter-spacing: .15em; }
.tarot-info { margin-top: 1.2rem; max-width: 460px; }
.tarot-effect-text { font-style: italic; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; opacity: .85; }

/* ── GAME LAYOUT ── */
.game-screen {
  display: flex; flex-direction: column;
  background: var(--obs); align-items: stretch; justify-content: flex-start;
}

/* Animations & Juice */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes flash-frost { 0% { box-shadow: inset 0 0 100px var(--l); } 100% { box-shadow: inset 0 0 0 transparent; } }
@keyframes flash-shadow { 0% { box-shadow: inset 0 0 100px var(--vd); } 100% { box-shadow: inset 0 0 0 transparent; } }
@keyframes flash-jade { 0% { box-shadow: inset 0 0 100px var(--s); } 100% { box-shadow: inset 0 0 0 transparent; } }
@keyframes flash-blood { 0% { box-shadow: inset 0 0 100px var(--r); } 100% { box-shadow: inset 0 0 0 transparent; } }
@keyframes flash-void { 0% { box-shadow: inset 0 0 150px #000; background-color: rgba(0,0,0,0.5); } 100% { box-shadow: inset 0 0 0 transparent; background-color: transparent; } }

.flash-l { animation: flash-frost 0.8s ease-out; }
.flash-d { animation: flash-shadow 0.8s ease-out; }
.flash-s { animation: flash-jade 0.8s ease-out; }
.flash-r { animation: flash-blood 0.8s ease-out; }
.flash-v { animation: flash-void 0.8s ease-out; }

@keyframes card-draw {
  0% { transform: translateY(200px) rotate(10deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
.card-draw-anim { animation: card-draw 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }

.critical-pulse { animation: crit-pulse 0.8s infinite alternate !important; }
@keyframes crit-pulse { 
  from { filter: drop-shadow(0 0 2px var(--r)); }
  to { filter: drop-shadow(0 0 10px #ff0000); }
}

.alert-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0) 100%);
  transition: background 0.8s ease;
}

.floating-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: 'Cinzel Decorative', serif; font-size: 2rem; color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.8), 0 0 20px var(--v);
  pointer-events: none; z-index: 100;
  animation: floatUp 1.2s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -20px) scale(1.1); }
  80% { opacity: 1; transform: translate(-50%, -60px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80px) scale(0.9); }
}

/* Quest bar */
.quest-bar {
  flex-shrink: 0; background: rgba(0,0,0,.9); border-bottom: 1px solid var(--vd);
  padding: .5rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marks-row { display: flex; gap: .7rem; }
.mark-chip {
  font-family: 'Cinzel Decorative', serif; font-size: .55rem; letter-spacing: .1em;
  border: 1px solid; border-radius: 2px; padding: .25rem .7rem;
  display: flex; align-items: center; gap: .5rem;
}
.mark-chip.locked   { border-color: #555; color: #666; }
.mark-chip.unlocked { border-color: var(--g); color: var(--g); box-shadow: 0 0 8px rgba(212,175,55,.4); }
.mark-chip.btn-gold:hover { background: #d4af37; color: #000; box-shadow: 0 0 20px rgba(212,175,55,.4); transform: scale(1.05); }
.btn-tiny {
  background: #1a0a00; border: 1px solid var(--g); color: var(--g);
  font-family: 'Cinzel Decorative', serif; font-size: .75rem; padding: 6px 14px;
  cursor: pointer; transition: all .2s; letter-spacing: .08em; font-weight: bold;
}
.btn-tiny:hover { background: var(--g); color: #000; }
.hand-ctrl { display: flex; align-items: center; gap: 15px; }

/* Insignia Flash */
.insignia-overlay {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9999; pointer-events: none; animation: ins-fade 4s forwards;
  background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
}
.ins-icon { font-size: 10rem; filter: drop-shadow(0 0 30px currentColor); animation: ins-pop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.ins-text { 
  font-family: 'Cinzel Decorative', serif; font-size: 2.2rem; color: #fff; letter-spacing: .4em; margin-top: 1.5rem;
  text-shadow: 0 0 15px rgba(255,255,255,.6); animation: ins-text-in 1.2s 0.3s both; text-transform: uppercase;
}
.ins-quote {
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 1.5rem; color: #fff; max-width: 500px;
  text-align: center; margin-top: 2rem; line-height: 1.6; opacity: 0; animation: ins-text-in 1.5s 0.8s forwards;
}

@keyframes ins-fade { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ins-pop { 0% { transform: scale(0.2) rotate(-10deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes ins-text-in { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.loss-mode { animation: ins-shatter 4s forwards !important; }
@keyframes ins-shatter {
  0% { transform: scale(1); opacity: 0; }
  5% { transform: scale(1.2); opacity: 1; }
  10% { transform: scale(1) translate(5px, 5px); }
  15% { transform: scale(1) translate(-5px, -5px); }
  20% { transform: scale(0.9) translate(5px, -5px); }
  25% { transform: scale(1) translate(0, 0); }
  90% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(20px) brightness(2); transform: scale(1.5); }
}

.pj-node span { font-size: .5rem; }
.phase-row { display: flex; gap: 1.5rem; align-items: center; }
.phase-journey { display: flex; align-items: center; gap: 8px; margin-right: 10px; }
.pj-node {
  width: 24px; height: 24px; border: 1px solid #444; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel Decorative', serif; font-size: .65rem; color: #555;
  background: rgba(0,0,0,.3); transition: all .4s ease;
}
.pj-node.active { border-color: var(--g); color: var(--g); box-shadow: 0 0 10px rgba(212,175,55,.4); background: rgba(212,175,55,.1); }
.pj-node.complete { border-color: var(--s); color: var(--s); background: rgba(16,185,129,.1); }
.pj-line { width: 15px; height: 1px; background: #333; }
.phase-label { font-family: 'Cinzel Decorative', serif; font-size: .6rem; color: var(--g); letter-spacing: .12em; min-width: 130px; }
.alert-label { font-family: 'Cinzel Decorative', serif; font-size: .6rem; color: var(--r); letter-spacing: .1em; }

/* Main content */
.game-main { flex: 1; min-height: 0; display: flex; }

/* Scene panel */
.scene-panel { flex: 1; position: relative; overflow: hidden; }
.scene-bg    { position: absolute; inset: 0; background-size: cover; background-position: center 65%; transition: background-image .6s ease; }
.char-sprite {
  position: absolute; bottom: 0; right: 0; 
  width: 50%; height: 80%; pointer-events: none;
  background-size: contain; background-repeat: no-repeat; background-position: bottom right;
  z-index: 2000; opacity: 0; transition: opacity 0.5s ease;
  mix-blend-mode: screen !important;
}
.char-sprite.active { opacity: 1; animation: sprite-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
@keyframes sprite-in { from { transform: translateY(100px); } to { transform: translateY(0); } }
.scene-gradient { position: absolute; inset: 0; background: linear-gradient(to right, transparent 60%, rgba(6,6,9,.9)); pointer-events: none; z-index: 2; }


/* Boss overlay */
.boss-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  z-index: 1000; padding: 40px 0;
}
.boss-header { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.boss-name { font-family: 'Cinzel Decorative', serif; font-size: 1.4rem; color: #fff; text-shadow: 0 0 10px rgba(255,0,0,.5); letter-spacing: .1em; }
.boss-hp-text { font-family: 'Cinzel Decorative', serif; font-size: .8rem; color: #fca5a5; }
.boss-track { width: 80%; height: 12px; background: rgba(0,0,0,.6); border: 1px solid #444; border-radius: 6px; overflow: hidden; margin: 10px 0; box-shadow: 0 0 15px rgba(220,38,38,.2); }
.boss-hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #991b1b, #ef4444); transition: width .5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 10px #ef4444; }
.boss-action { 
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 1.2rem; color: #fff; 
  opacity: 0; transform: translateY(20px); transition: all 0.4s ease;
  text-align: center; max-width: 80%;
}
.boss-action.active { opacity: 1; transform: translateY(0); color: #fca5a5; }

/* HURT EFFECT */
.char-sprite.hurt {
  animation: sprite-hurt 0.4s ease-out;
  filter: sepia(1) saturate(5) hue-rotate(-50deg); /* Red tint */
}
@keyframes sprite-hurt {
  0% { transform: translateX(0); }
  20% { transform: translateX(-15px) rotate(-2deg); }
  40% { transform: translateX(15px) rotate(2deg); }
  60% { transform: translateX(-10px) rotate(-1deg); }
  80% { transform: translateX(10px) rotate(1deg); }
  100% { transform: translateX(0); }
}

/* Side panel */
.side-panel {
  width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem;
  background: rgba(4,3,10,.94); border-left: 1px solid var(--vd); padding: 1.2rem 1rem;
  overflow-y: auto;
}

/* D&D Stat block */
.stat-block {
  background: #f5e6c8; color: #1a0a00; border: 2px solid #8b0000;
  border-radius: 4px; padding: 14px 14px 10px;
}
.sb-title   { font-family: 'Cinzel Decorative', serif; font-size: .75rem; letter-spacing: .15em; margin-bottom: 6px; text-align: center; color: #3d0000; font-weight: 700; }
.sb-divider { height: 8px; background: #8b0000; margin: 6px -4px; border-top: 2px solid #5a0000; border-bottom: 2px solid #5a0000; }
.sb-row     { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.sb-label   { font-family: 'Cinzel Decorative', serif; font-size: .65rem; letter-spacing: .05em; width: 85px; flex-shrink: 0; color: #3d0000; font-weight: 700; }
.bar        { flex: 1; height: 10px; background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.3); border-radius: 2px; overflow: hidden; }
.bfill      { height: 100%; border-radius: 1px; transition: width .4s ease; }
.magic-fill { background: linear-gradient(90deg, var(--v), #d0a8ff); }
.l-fill { background: var(--l); box-shadow: 0 0 10px var(--l); }
.d-fill { background: var(--d); box-shadow: 0 0 10px var(--d); }
.s-fill { background: var(--s); box-shadow: 0 0 10px var(--s); }
.res-fill { background: #c084fc; box-shadow: 0 0 10px #c084fc; }
.alert-fill { background: linear-gradient(90deg, #991b1b, var(--r)); }
.sb-val     { font-family: 'Cinzel Decorative', serif; font-size: .7rem; width: 28px; text-align: right; color: #3d0000; flex-shrink: 0; font-weight: 700; }
.alert-label-small { color: #8b0000 !important; }

/* Event log */
.event-log  { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
.log-header { font-family: 'Cinzel Decorative', serif; font-size: .75rem; letter-spacing: .15em; color: var(--g); opacity: .8; text-align: center; margin-bottom: .6rem; }
.log-entries { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.log-entry  { font-size: .95rem; font-style: italic; line-height: 1.5; padding: 4px 6px; border-left: 3px solid var(--vd); opacity: .9; }
.log-entry.good  { border-color: var(--s); color: #a7f3d0; }
.log-entry.bad   { border-color: var(--r); color: #fca5a5; }
.log-entry.boss  { border-color: var(--r); color: #fbbf24; font-weight: 600; font-style: normal; }
.log-entry.mark  { border-color: var(--g); color: var(--g); font-style: normal; }

/* Tarot pill */
.tarot-pill { font-family: 'Cinzel Decorative', serif; font-size: .52rem; color: var(--g); border: 1px solid var(--g); padding: .3rem .6rem; text-align: center; letter-spacing: .1em; }

/* Hand area */
.hand-area {
  flex-shrink: 0; background: rgba(0,0,0,.92); border-top: 1px solid var(--vd);
  padding: .5rem .8rem .6rem;
}
.hand-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.hand-label { font-family: 'Cinzel Decorative', serif; font-size: .6rem; letter-spacing: .15em; color: var(--g); }
.plays-left { font-family: 'Cinzel Decorative', serif; font-size: .55rem; color: #a78bfa; flex: 1; }
.btn-end    {
  font-family: 'Cinzel Decorative', serif; font-size: .6rem; letter-spacing: .12em;
  border: 1px solid var(--g); color: var(--g); background: transparent; padding: .4rem 1rem;
  cursor: pointer; transition: all .2s ease;
}
.btn-end:hover { background: var(--g); color: var(--obs); }
.card-hand { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 6px; min-height: 220px; align-items: flex-end; }

/* ── CARDS ── */
.card {
  width: 150px; min-width: 150px; height: 210px;
  border-radius: 8px; border: 2px solid #555; background: rgba(8,4,18,.96);
  display: flex; flex-direction: column; cursor: pointer; position: relative;
  transition: transform .18s ease, box-shadow .18s ease; flex-shrink: 0;
}
.card:hover:not(.disabled) { transform: translateY(-22px) scale(1.08); z-index: 20; }
.card.disabled { opacity: .35; cursor: not-allowed; }
.card.played   { opacity: 0; transform: translateY(-50px) scale(.8); transition: all .3s ease; pointer-events: none; }

.card-art  { height: 65px; display: flex; align-items: center; justify-content: center; font-size: 3rem; border-bottom: 2px solid #333; }
.card-name { font-family: 'Cinzel Decorative', serif; font-size: .65rem; font-weight: bold; letter-spacing: .06em; text-align: center; padding: 6px 6px 2px; line-height: 1.3; }
.card-type { font-size: .55rem; font-weight: bold; letter-spacing: .15em; text-align: center; padding: 4px 5px; border-top: 1px solid #333; border-bottom: 1px solid #333; opacity: .85; margin: 3px 0; }
.card-desc { font-family: 'EB Garamond', serif; font-size: .85rem; font-style: italic; text-align: center; padding: 5px 8px; flex: 1; line-height: 1.35; overflow: hidden; }
.card-fx   { font-family: 'Cinzel Decorative', serif; font-size: .55rem; font-weight: bold; text-align: center; padding: 5px 6px; border-top: 2px solid #333; opacity: .9; }

/* Card color themes */
.card-bond-l  { border-color: var(--l); }
.card-bond-l  .card-type, .card-bond-l .card-fx { color: var(--l); }
.card-bond-d  { border-color: var(--d); }
.card-bond-d  .card-type, .card-bond-d .card-fx { color: var(--d); }
.card-bond-s  { border-color: var(--s); }
.card-bond-s  .card-type, .card-bond-s .card-fx { color: var(--s); }
.card-siphon  { border-color: #a78bfa; }
.card-siphon  .card-type, .card-siphon .card-fx { color: #a78bfa; }
.card-explore { border-color: #fbbf24; }
.card-explore .card-type, .card-explore .card-fx { color: #fbbf24; }
.card-rest    { border-color: #9ca3af; }
.card-rest    .card-type, .card-rest .card-fx { color: #9ca3af; }
.card-fate    { border-color: #f97316; box-shadow: 0 0 10px rgba(249,115,22,.4); }
.card-fate    .card-type, .card-fate .card-fx { color: #f97316; }
.card-magic   { border-color: #a855f7; box-shadow: 0 0 12px rgba(168,85,247,.5); }
.card-magic   .card-type, .card-magic .card-fx { color: #a855f7; }
.card-mark    { border-color: var(--g); box-shadow: 0 0 16px rgba(212,175,55,.5); animation: glow-gold 2s ease-in-out infinite; }
.card-mark    .card-type, .card-mark .card-fx { color: var(--g); }
.card-attack  { border-color: var(--r); }
.card-attack  .card-type, .card-attack .card-fx { color: var(--r); }
.card-ultimate { border-color: var(--g); box-shadow: 0 0 24px rgba(212,175,55,.7); animation: glow-gold 1.2s ease-in-out infinite; }
.card-ultimate .card-type, .card-ultimate .card-fx { color: var(--g); }
@keyframes glow-gold { 0%,100% { box-shadow: 0 0 14px rgba(212,175,55,.4); } 50% { box-shadow: 0 0 28px rgba(212,175,55,.8); } }

/* Encounter popup */
.encounter-popup {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to right, transparent 40%, rgba(0,0,0,0.9) 70%);
}
.encounter-card {
  background: rgba(6,6,9,.96); border: 2px solid var(--g); border-radius: 8px;
  padding: 2rem 2.4rem; max-width: 460px; width: 90%; text-align: center;
}
.enc-icon  { font-size: 3rem; margin-bottom: .8rem; }
.enc-title { font-family: 'Cinzel Decorative', serif; color: var(--g); font-size: 1rem; margin-bottom: 1rem; }
.enc-text  { font-style: italic; line-height: 1.85; margin-bottom: 1.5rem; font-size: 1.05rem; }
.enc-choices { display: flex; flex-direction: column; gap: .7rem; }
.enc-choices button {
  background: rgba(124,58,237,.1); border: 1px solid var(--vd); color: #e8e0f0;
  padding: .7rem 1.2rem; font-family: 'EB Garamond', serif; font-size: 1rem;
  font-style: italic; cursor: pointer; border-radius: 2px; transition: all .2s ease;
}
.enc-choices button:hover { background: rgba(124,58,237,.3); border-color: var(--v); }

/* Intro & Rewards */
.intro-wrap, .reward-wrap { text-align: center; max-width: 700px; width: 90%; animation: fade-up 0.8s ease-out; }
.i-phase { font-family: 'Cinzel Decorative', serif; color: var(--g); font-size: .8rem; letter-spacing: .5em; margin-bottom: 1rem; opacity: .8; }
.room-tracker {
  font-family: 'Cinzel Decorative', serif; color: var(--g); font-size: .85rem; letter-spacing: .1em;
  padding: 4px 12px; border-radius: 4px; border: 1px solid rgba(212,175,55,.3);
  background: rgba(0,0,0,.3); margin: 0 15px;
}
.phase-label { font-family: 'Cinzel Decorative', serif; color: #fff; font-size: .9rem; letter-spacing: .1em; opacity: .8; flex-grow: 1; text-align: center; }
.i-title { font-family: 'Cinzel Decorative', serif; color: #fff; font-size: 3.5rem; letter-spacing: .1em; margin-bottom: 1.5rem; text-shadow: 0 0 20px rgba(212,175,55,.3); }
.i-text { font-style: italic; font-size: 1.2rem; line-height: 1.8; margin-bottom: 3rem; color: #e8e0f0; opacity: .9; }

.reward-opts { display: flex; gap: 2rem; justify-content: center; margin-top: 3rem; }
.relic-card {
  width: 180px; padding: 1.5rem; border: 1px solid #444; background: rgba(255,255,255,.03);
  cursor: pointer; transition: all .3s ease; border-radius: 4px;
}
.relic-card:hover { border-color: var(--g); background: rgba(212,175,55,.08); transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,.5); }
.relic-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.relic-name { font-family: 'Cinzel Decorative', serif; font-size: .75rem; color: var(--g); margin-bottom: .8rem; font-weight: bold; }
.relic-desc { font-size: .85rem; font-style: italic; line-height: 1.4; opacity: .8; }

@keyframes fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Ending */
.ending-wrap { text-align: center; max-width: 600px; width: 90%; }
.e-icon  { font-size: 5rem; margin-bottom: 1rem; }
.e-title { font-family: 'Cinzel Decorative', serif; color: var(--g); font-size: 1.8rem; margin-bottom: 1.2rem; }
.e-text  { font-style: italic; line-height: 1.9; font-size: 1.15rem; opacity: .85; margin-bottom: 2rem; }

/* Shared buttons */
.btn      { padding: .7rem 1.8rem; font-family: 'Cinzel Decorative', serif; font-size: .72rem; letter-spacing: .14em; cursor: pointer; border: 1px solid; background: transparent; transition: all .25s ease; text-transform: uppercase; }
.btn-gold { border-color: var(--g); color: var(--g); }
.btn-gold:hover { background: var(--g); color: var(--obs); }

/* ── NARRATIVE OVERLAY (LEFT BOX) ── */
.narrative-overlay {
  position: absolute;
  top: 1.5rem; left: 1.5rem; bottom: 1.5rem;
  width: 260px;
  background: rgba(6,6,9,0.75);
  backdrop-filter: blur(8px);
  border-left: 2px solid var(--g);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  box-shadow: 10px 0 30px rgba(0,0,0,0.5);
}
.narrative-text-main {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #f0e6ff;
  text-align: left;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.narrative-text-main.active {
  opacity: 1;
}

/* ── BOSS INTRO ANIMATION ── */
.boss-intro {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(200,20,20,0.85) 0%, rgba(40,0,0,0.95) 100%);
  animation: bossFlash 3s ease-out forwards;
}
.boss-intro-text {
  font-family: 'Cinzel Decorative', serif;
  color: var(--g);
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: 0.12em;
  text-shadow: 0 0 30px rgba(212,175,55,0.6), 0 0 60px rgba(200,20,20,0.4);
  animation: bossTextPulse 3s ease-out forwards;
  line-height: 1.6;
}
@keyframes bossFlash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}
@keyframes bossTextPulse {
  0% { transform: scale(0.5); opacity: 0; }
  20% { transform: scale(1.15); opacity: 1; }
  40% { transform: scale(1); }
  85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* ── MOBILE OPTIMIZATION ── */
@media screen and (max-width: 800px) {
  html, body { overflow-y: auto; height: auto; }
  .screen { position: relative; min-height: 100vh; height: auto; padding: 20px 0; overflow-y: auto; }
  
  /* Layout */
  .game-screen { height: auto; overflow: visible; }
  .game-main { flex-direction: column; }
  
  /* Top Bar */
  .quest-bar { flex-direction: column; gap: 10px; align-items: stretch; padding: 15px; }
  .marks-row { justify-content: center; flex-wrap: wrap; }
  .phase-row { justify-content: space-between; }
  
  /* Scene */
  .scene-panel { height: 320px; width: 100%; }
  .char-sprite { width: 70%; height: 90%; }
  .narrative-overlay { width: 160px; left: 10px; top: 10px; bottom: 10px; padding: 1rem; }
  .narrative-text-main { font-size: 0.85rem; }
  
  /* Side Panel */
  .side-panel { width: 100%; border-left: none; border-top: 1px solid var(--vd); padding: 20px; }
  .stat-block { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: none; padding: 0; background: transparent; }
  .stat-block .sb-title, .stat-block .sb-divider { grid-column: span 2; }
  .event-log { height: 180px; margin-top: 20px; }
  
  /* Cards */
  .hand-area { position: sticky; bottom: 0; background: rgba(0,0,0,0.95); border-top: 2px solid var(--vd); z-index: 3000; padding: 10px; }
  .card-hand { 
    display: flex; overflow-x: auto; overflow-y: hidden; 
    gap: 10px; padding: 10px 5px; justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .card { width: 100px; height: 150px; flex-shrink: 0; }
  .card-name { font-size: 0.65rem; }
  .card-fx { font-size: 0.6rem; }
  
  /* UI Tweaks */
  .title-gold { font-size: 1.6rem; }
  .subtitle { font-size: 0.9rem; }
  .tutorial-grid { grid-template-columns: 1fr; gap: 1rem; }
  .relic-card { width: 100%; }
  .reward-opts { flex-direction: column; align-items: center; gap: 1rem; }
  .tarot-card { width: 140px; height: 220px; }
}