/* ===========================================================
   KLXard — production stylesheet.
   Ported verbatim from klxard_app_prototype_v2.html, with two
   deliberate changes:
     1. the phone frame now scales to fit short desktop windows
        instead of collapsing to full-bleed (see --phone-scale,
        set from app.js), so a preview always opens phone-shaped;
     2. a couple of small additions for states the prototype did
        not have: content boot, and a "result not saved" notice.
=========================================================== */
:root{
  --stage-bg-1:#0d0817;
  --stage-bg-2:#1e1230;
  --card-bg:#fbf2e2;
  --ink:#2b2332;
  --ink-soft:#5b4d63;
  --gold-1:#e7c477;
  --gold-2:#fff3d0;
  --silver-1:#aebdd1;
  --silver-2:#eef3fb;
  --emerald-1:#57c495;
  --emerald-2:#d6ffe9;
  --violet-1:#a988e8;
  --violet-2:#efe3ff;
  --ember-1:#e8895a;
  --phone-scale:1;
  font-family:"Playpen Sans Thai",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh; min-height:100dvh;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.05) 0, transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(255,255,255,.05) 0, transparent 40%),
    linear-gradient(160deg, var(--stage-bg-1), var(--stage-bg-2));
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding:0;
  overflow:hidden;
  position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,.55) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 10%, rgba(255,255,255,.45) 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 60% 70%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 85%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1.8px 1.8px at 92% 55%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 45% 40%, rgba(255,255,255,.35) 0, transparent 60%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{ 0%{opacity:.5;} 100%{opacity:1;} }

/* ===================== PHONE FRAME ===================== */
.phone{
  position:relative; z-index:1;
  width:390px; height:844px;
  flex:0 0 auto;
  transform:scale(var(--phone-scale));
  transform-origin:center center;
  background: linear-gradient(180deg,#171022,#0b0713);
  border-radius:44px;
  padding:14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.phone::before{
  content:""; position:absolute; inset:0; border-radius:44px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), transparent 30%);
  pointer-events:none; z-index:9;
}
.phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:22px; background:#0b0713; border-radius:0 0 16px 16px; z-index:8;
}
.phone-screen{
  position:relative;
  width:100%; height:100%;
  background: linear-gradient(160deg, var(--stage-bg-1), var(--stage-bg-2));
  border-radius:32px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
/* A real handset gets the whole viewport; desktop always keeps the frame. */
@media (max-width:430px){
  .phone{ width:100vw; height:100dvh; border-radius:0; padding:0; box-shadow:none; transform:none; }
  .phone::before{ display:none; }
  .phone-screen{ border-radius:0; }
  .phone-notch{ display:none; }
}
.phone-screen.shake{ animation: screenShake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes screenShake{
  10%,90%{ transform:translate3d(-1px,0,0); }
  20%,80%{ transform:translate3d(2px,0,0); }
  30%,50%,70%{ transform:translate3d(-4px,0,0); }
  40%,60%{ transform:translate3d(4px,0,0); }
}
.impact-flash{
  position:absolute; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(circle, rgba(255,120,90,.5), rgba(120,20,20,0) 70%);
  opacity:0; animation: impactFade .5s ease-out forwards;
}
@keyframes impactFade{ 0%{opacity:.9;} 100%{opacity:0;} }

.app-badge{
  position:absolute; top:34px; left:0; right:0; text-align:center; z-index:3;
  font-size:10.5px; letter-spacing:.08em; color:#e7defb; opacity:.55;
  pointer-events:none;
}

.mute-toggle{
  position:absolute; top:30px; right:14px; z-index:6;
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#e7defb; font-size:12px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* ===================== SCREEN CONTENT ===================== */
#screen{
  position:relative; flex:1; overflow-y:auto; overflow-x:hidden;
  padding:64px 26px 26px;
  display:flex; flex-direction:column;
  scrollbar-width:none;
}
#screen::-webkit-scrollbar{ display:none; }
.screen-inner{ margin:auto 0; width:100%; position:relative; z-index:2; }
.screen-inner.warp-host{ margin:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }

@keyframes stepIn{
  0%{ opacity:0; transform:translateY(16px) scale(.98); filter:blur(3px); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
.step-anim{ animation: stepIn .55s cubic-bezier(.2,.9,.25,1) both; }

/* ---- decorative particle field (per-scene) ---- */
.particle-field{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.particle{
  position:absolute; border-radius:50%;
  animation: floatUp linear infinite;
  opacity:0;
}
@keyframes floatUp{
  0%{ opacity:0; transform:translateY(0) translateX(0) scale(.6); }
  12%{ opacity:1; }
  85%{ opacity:.7; }
  100%{ opacity:0; transform:translateY(-160px) translateX(var(--drift,12px)) scale(1.1); }
}
.field-mana .particle{ background:radial-gradient(circle, #fff3d0, #e7c477 55%, transparent 75%); box-shadow:0 0 8px rgba(231,196,119,.8); }
.field-mana .particle.alt{ background:radial-gradient(circle, #d6ffe9, #57c495 55%, transparent 75%); box-shadow:0 0 8px rgba(87,196,149,.7); }
.field-hall .particle{ background:radial-gradient(circle, rgba(255,244,220,.9), rgba(255,244,220,0) 70%); box-shadow:none; }
.field-ember .particle{ background:radial-gradient(circle, #ffd9a0, #e8895a 55%, transparent 75%); box-shadow:0 0 7px rgba(232,137,90,.7); }
.field-twist .particle{ background:radial-gradient(circle, #ffdcd0, #ff6b5b 55%, transparent 75%); box-shadow:0 0 9px rgba(255,107,91,.85); }

/* ---- notice / plain text screens ---- */
.notice-title{
  text-align:center; color:#fff3d0; font-size:19px; font-weight:800; margin:0 0 16px;
  text-shadow:0 0 14px rgba(231,196,119,.5);
}
.notice-body{ color:#e7defb; font-size:14px; line-height:1.85; text-align:center; }
.notice-body strong{ color:#fff3d0; }
.notice-body p{ margin:0 0 14px; }

/* ---- chapter title screens ---- */
.chapter-top{ text-align:center; font-size:12px; letter-spacing:.25em; color:#c9b6ff; opacity:.75; margin-bottom:6px; }
.chapter-bottom{
  text-align:center; font-size:27px; font-weight:800; line-height:1.3; margin:0 0 18px;
  background: linear-gradient(90deg, #e7c477 0%, #fff3d0 45%, #e7c477 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmerText 3.6s linear infinite;
}
@keyframes shimmerText{ 0%{background-position:0% center;} 100%{background-position:220% center;} }
.chapter-divider{ display:flex; align-items:center; gap:10px; margin:0 auto 20px; max-width:220px; }
.chapter-divider .line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, #e7c477, transparent); opacity:.6; }
.chapter-divider .gem{ color:#e7c477; font-size:12px; }

/* ---- narrative prose ---- */
.prose{ color:#e7defb; font-size:14.5px; line-height:1.85; }
.prose p{ margin:0 0 14px; opacity:0; transform:translateY(10px); animation: proseIn .6s ease forwards; }
@keyframes proseIn{ to{ opacity:1; transform:translateY(0); } }
.prose strong{ color:#fff3d0; font-weight:700; }

/* ---- dialogue / quote plaque ---- */
.quote-plaque{
  position:relative; margin:6px 0 16px; padding:20px 20px 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(231,196,119,.35); border-radius:16px;
  color:#fff3d0; font-size:14.5px; line-height:1.8; font-weight:600; text-align:center;
  opacity:0; transform:scale(.92); animation: plaqueIn .6s cubic-bezier(.2,.9,.25,1) .15s forwards;
}
.quote-plaque.shock{ border-color:rgba(255,107,91,.55); }
@keyframes plaqueIn{ to{ opacity:1; transform:scale(1); } }
.quote-plaque::before{ content:"\201C"; position:absolute; top:-6px; left:14px; font-size:44px; color:#e7c477; opacity:.5; font-family:Georgia,serif; }
.quote-signoff{ display:block; margin-top:10px; font-size:11.5px; color:#c9b6ff; font-weight:500; }

/* ---- warp video scene ---- */
.warp-stage{ position:absolute; inset:-26px -26px auto -26px; height:calc(100% + 26px); z-index:0; overflow:hidden; }
.warp-stage video{ width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
.warp-flash{
  position:absolute; inset:-26px; z-index:1; background:#fff3d0; opacity:0; pointer-events:none;
}
.warp-flash.go{ animation: flashFade .55s ease-out forwards; }
@keyframes flashFade{ 0%{opacity:.95;} 100%{opacity:0;} }
.warp-text{ position:relative; z-index:2; opacity:0; }
.warp-text.show{ animation: fadeUp .6s ease forwards; }

/* ---- continue button (arrow-style, used for every advance after the story begins) ---- */
.btn-continue-wrap{ text-align:center; margin-top:8px; opacity:0; animation: fadeUp .5s ease forwards; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.btn-continue{
  border:none; border-radius:999px; padding:13px 30px;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  color:#3a2c1a; background:linear-gradient(135deg,var(--gold-2),var(--gold-1));
  box-shadow:0 8px 20px rgba(231,196,119,.4);
  transition: transform .15s ease;
}
.btn-continue:active{ transform:scale(.95); }

.arrow-btn-wrap{ text-align:center; margin-top:6px; opacity:0; animation: fadeUp .5s ease forwards; }
.arrow-btn{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,.02) 60%), rgba(255,255,255,.06);
  border:1px solid rgba(231,196,119,.45);
  box-shadow:0 0 0 0 rgba(231,196,119,.5);
  animation: arrowPulse 2.2s ease-in-out infinite;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .15s ease;
}
.arrow-btn img{ width:34px; height:34px; object-fit:contain; }
.arrow-btn:active{ transform:scale(.9); }
@keyframes arrowPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(231,196,119,.35);} 50%{ box-shadow:0 0 0 10px rgba(231,196,119,0);} }
.arrow-caption{ margin-top:6px; font-size:10.5px; color:#c9b6ff; opacity:.7; }

/* ---- cover screen ---- */
.cover-wrap{ text-align:center; }
.logo-stage{ position:relative; width:220px; height:150px; margin:0 auto 8px; }
.logo-stage img{ position:relative; z-index:2; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 26px rgba(231,196,119,.45)); }
.logo-sparkle{ position:absolute; z-index:1; font-size:12px; animation: sparkleTwinkle 1.8s ease-in-out infinite; }
@keyframes sparkleTwinkle{ 0%,100%{ opacity:.15; transform:scale(.7) rotate(0deg);} 50%{ opacity:1; transform:scale(1.15) rotate(20deg);} }
.cover-title{ font-size:22px; font-weight:800; line-height:1.35; margin:6px 0 10px; color:#fff3d0; text-shadow:0 0 20px rgba(231,196,119,.5); }
.cover-title .hl{
  display:block; font-size:19px;
  background: linear-gradient(90deg, #a988e8, #e7c477, #a988e8);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmerText 4s linear infinite;
}
.cover-hint{ color:#cfc4de; font-size:12.5px; margin-bottom:26px; }
.btn-start{
  border:none; border-radius:999px; padding:15px 40px;
  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.02em; cursor:pointer;
  color:#3a2c1a; background:linear-gradient(135deg,var(--gold-2),var(--gold-1));
  box-shadow:0 10px 26px rgba(231,196,119,.45);
  transition: transform .15s ease;
}
.btn-start:active{ transform:scale(.95); }

/* ===================== QUESTION SCREEN ===================== */
.q-label{ text-align:center; font-size:11px; letter-spacing:.1em; color:#c9b6ff; opacity:.8; margin-bottom:10px; }
.q-narrative{ color:#e7defb; font-size:13.5px; line-height:1.8; text-align:center; margin-bottom:14px; opacity:0; animation: proseIn .55s ease forwards; }
.q-ask{
  position:relative; text-align:center; margin:0 0 20px; padding:16px 16px;
  background: linear-gradient(160deg, rgba(231,196,119,.14), rgba(231,196,119,.03));
  border:1px solid rgba(231,196,119,.4); border-radius:14px;
  color:#fff3d0; font-size:15.5px; font-weight:700; line-height:1.6;
  opacity:0; transform:scale(.94); animation: plaqueIn .5s cubic-bezier(.2,.9,.25,1) .35s forwards;
}
.choice-list{ display:flex; flex-direction:column; gap:11px; }
.choice-btn{
  position:relative; text-align:left; border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color:#f3edff; font-family:inherit; font-size:13.5px; line-height:1.55; font-weight:500;
  border-radius:14px; padding:13px 16px 13px 42px; cursor:pointer;
  opacity:0; transform:translateY(10px);
  animation: choiceIn .45s ease forwards;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
@keyframes choiceIn{ to{ opacity:1; transform:translateY(0); } }
.choice-btn::before{
  content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(231,196,119,.6);
}
.choice-btn:active{ transform:scale(.98); }
.choice-btn.selected{ border-color:#e7c477; background:rgba(231,196,119,.16); box-shadow:0 0 0 1px rgba(231,196,119,.5), 0 0 18px rgba(231,196,119,.35); }
.choice-btn.selected::before{ background:#e7c477; box-shadow:0 0 8px rgba(231,196,119,.9); }
.choice-btn.dim{ opacity:.4 !important; }
.choice-btn.pulse::after{
  content:""; position:absolute; inset:0; border-radius:14px; box-shadow:0 0 0 0 rgba(231,196,119,.6);
  animation: choicePulse .6s ease-out;
}
@keyframes choicePulse{ 0%{ box-shadow:0 0 0 0 rgba(231,196,119,.55);} 100%{ box-shadow:0 0 0 18px rgba(231,196,119,0);} }
.confirm-wrap{ margin-top:16px; text-align:center; height:0; overflow:visible; }
.confirm-wrap .arrow-btn-wrap{ animation:fadeUp .35s ease forwards; }

/* ---- id entry ---- */
.id-input{
  width:100%; font-family:inherit; font-size:14px; padding:13px 14px; border-radius:12px;
  border:1px solid rgba(231,196,119,.4); background:rgba(255,255,255,.06); color:#fff3d0;
  margin-bottom:6px; text-align:center;
}
.id-input::placeholder{ color:rgba(255,243,208,.4); }
.id-input.err{ animation: screenShake .4s; border-color:#ff6b5b; }
.id-hint{ text-align:center; font-size:11px; color:#c9b6ff; opacity:.75; margin-bottom:18px; }
.id-error{ text-align:center; font-size:11.5px; color:#ff9d91; min-height:16px; margin:0 0 10px; }

/* ===================== LOADING / CASTING ===================== */
.casting-wrap{ text-align:center; }
.casting-ring{ width:96px; height:96px; margin:0 auto 22px; position:relative; }
.casting-ring svg{ width:100%; height:100%; animation: raySpin 2.2s linear infinite; }
@keyframes raySpin{ 100%{ transform:rotate(360deg); } }
.casting-text{ color:#e7defb; font-size:13.5px; letter-spacing:.05em; }
.casting-dots span{ animation: dotBlink 1.2s infinite; opacity:.2; }
.casting-dots span:nth-child(2){ animation-delay:.2s; }
.casting-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes dotBlink{ 0%,100%{opacity:.2;} 50%{opacity:1;} }

/* ---- boot / fatal error ---- */
.boot-error{ color:#ffc9c2; font-size:13px; line-height:1.8; text-align:center; }
.boot-error .btn-continue{ margin-top:16px; }

/* ===================== RESULT CARD ===================== */
.result-wrap{ padding:0; }
.card-wrap{ position:relative; width:100%; }
.card-wrap::before{
  content:""; position:absolute; inset:-30px;
  background: radial-gradient(closest-side, var(--aura-a, rgba(174,189,209,.35)), transparent 72%);
  filter: blur(6px); z-index:-1; animation: auraPulse 3.6s ease-in-out infinite;
}
@keyframes auraPulse{ 0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:.9; transform:scale(1.05);} }
.card{
  position:relative; border-radius:26px; padding:3px;
  background: var(--frame-a, linear-gradient(135deg,var(--silver-1),var(--silver-2),var(--silver-1)));
  background-size:220% 220%;
  animation: frameSweep 7s linear infinite, cardIntro .7s cubic-bezier(.2,.9,.25,1) both;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 40px var(--glow-a, rgba(174,189,209,.35));
}
@keyframes frameSweep{ 0%{background-position:0% 50%;} 100%{background-position:220% 50%;} }
@keyframes cardIntro{ 0%{opacity:0; transform:scale(.85);} 100%{opacity:1; transform:scale(1);} }
.card-inner{ background: var(--card-bg); border-radius:23px; overflow:hidden; position:relative; }
.portrait-stage{ position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; background:linear-gradient(160deg,var(--ph-a,#cfd8e6),var(--ph-b,#8fa2bd)); }
.portrait-img{ position:absolute; inset:0; z-index:0; }
.portrait-stage img{ width:100%; height:100%; object-fit:cover; display:block; }
.portrait-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(20,10,25,.55) 88%, rgba(20,10,25,.72) 100%); pointer-events:none; z-index:1; }
.p-flourish{ position:absolute; width:32px; height:32px; z-index:2; color:var(--ring-a,#b8862f); filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.p-flourish svg{ width:100%; height:100%; display:block; }
.p-flourish.tl{ top:9px; left:9px; } .p-flourish.tr{ top:9px; right:9px; transform:scaleX(-1); }
.p-flourish.bl{ bottom:9px; left:9px; transform:scaleY(-1); } .p-flourish.br{ bottom:9px; right:9px; transform:scale(-1,-1); }
.rarity-pill{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px; color:#fff; background:var(--tag-bg,#7f8fa6); box-shadow:0 4px 10px rgba(0,0,0,.35); }
.seal{ position:absolute; right:12px; bottom:12px; z-index:2; width:50px; height:50px; }
.seal svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.badge-row{ display:flex; justify-content:center; gap:7px; margin:14px 0 4px; position:relative; z-index:1; }
.rune-badge{ width:27px; height:27px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:#fff; background:#d8dee6; box-shadow:0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.25); transform:rotate(45deg); opacity:.4; }
.rune-badge.on{ background:var(--rune-bg,#b9c3d1); opacity:1; }
.rune-badge span{ transform:rotate(-45deg); display:block; }
.card-body{ padding:6px 18px 20px; position:relative; }
.title-row{ display:flex; align-items:center; justify-content:center; gap:7px; margin:8px 0 0; position:relative; z-index:1; }
.title-row .spark{ font-size:13px; color:var(--hairline-strong,#b8862f); opacity:.85; }
.title{ text-align:center; margin:0; font-size:19px; font-weight:800; line-height:1.3;
  background: linear-gradient(90deg, var(--shimmer-a,#7d8ba0) 0%, var(--shimmer-b,#4a5b6e) 50%, var(--shimmer-a,#7d8ba0) 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmerText2 3.6s linear infinite; }
@keyframes shimmerText2{ 0%{background-position:0% center;} 100%{background-position:220% center;} }
.title-en{ text-align:center; font-size:10.5px; color:var(--ink-soft); margin:2px 0 12px; font-style:italic; }
.radar-wrap{ display:flex; justify-content:center; margin:2px 0 12px; }
.radar-wrap svg{ width:118px; height:118px; overflow:visible; }
.radar-grid{ fill:none; stroke:rgba(43,35,50,.14); stroke-width:1; }
.radar-axis{ stroke:rgba(43,35,50,.16); stroke-width:1; }
.radar-label{ font-size:9.5px; fill:var(--ink-soft); font-weight:700; }
.divider{ display:flex; align-items:center; gap:8px; margin:2px 4px 10px; }
.divider .line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--hairline-strong,#b8862f), transparent); opacity:.5; }
.divider .gem{ color:var(--hairline-strong,#b8862f); font-size:10px; opacity:.8; }
.plaque{ background:rgba(255,255,255,.5); border:1px solid rgba(43,35,50,.08); border-radius:13px; padding:12px 14px; font-size:12.5px; line-height:1.65; text-align:center; color:var(--ink); margin-bottom:12px; font-weight:500; }
.media-label{ text-align:center; font-size:10.5px; color:var(--ink-soft); margin-bottom:6px; }
.quote-ribbon{ margin:0 2px 6px; padding:11px 18px; text-align:center; font-size:11.5px; font-weight:600; color:#fff; background:var(--ribbon-bg, linear-gradient(135deg,#7d8ba0,#5b6b82)); clip-path: polygon(3% 0%, 97% 0%, 100% 50%, 97% 100%, 3% 100%, 0% 50%); line-height:1.5; }
.card-actions{ display:flex; gap:9px; margin-top:14px; }
.btn{ flex:1; border:none; border-radius:999px; padding:11px 8px; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.btn-primary{ color:#3a2c1a; background:linear-gradient(135deg,var(--gold-2),var(--gold-1)); box-shadow:0 6px 14px rgba(231,196,119,.4); }
.btn-ghost{ color:var(--ink); background:rgba(43,35,50,.08); }
.sign-off{ text-align:center; font-size:10.5px; color:var(--ink-soft); opacity:.7; margin-top:12px; }

/* result could not be written to D1 — never blocks the card */
.save-warning{
  margin:12px 0 0; padding:10px 12px; border-radius:12px;
  background:rgba(255,107,91,.14); border:1px solid rgba(255,107,91,.4);
  color:#ffd7d1; font-size:11.5px; line-height:1.6; text-align:center;
}
.save-warning button{
  margin-top:8px; border:none; border-radius:999px; padding:7px 16px; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:700; color:#3a2c1a;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-1));
}
.save-warning.ok{ background:rgba(87,196,149,.14); border-color:rgba(87,196,149,.45); color:#d6ffe9; }

.card[data-rarity="common"]{ --frame-a:linear-gradient(135deg,var(--silver-1),var(--silver-2),var(--silver-1)); --glow-a:rgba(174,189,209,.4); --hairline-strong:#7d93ab; --shimmer-a:#7d93ab; --shimmer-b:#48576a; --ring-a:#9fb4c7; --tag-bg:#7f8fa6; --ribbon-bg:linear-gradient(135deg,#7d93ab,#5c6f85); }
.card[data-rarity="uncommon"]{ --frame-a:linear-gradient(135deg,var(--emerald-1),var(--emerald-2),var(--emerald-1)); --glow-a:rgba(87,196,149,.4); --hairline-strong:#3f9e73; --shimmer-a:#3f9e73; --shimmer-b:#1f5c42; --ring-a:#57c495; --tag-bg:#3f9e73; --ribbon-bg:linear-gradient(135deg,#3f9e73,#2a7053); }
.card[data-rarity="rare"]{ --frame-a:linear-gradient(135deg,var(--violet-1),var(--violet-2),var(--violet-1)); --glow-a:rgba(169,136,232,.45); --hairline-strong:#8a5fc7; --shimmer-a:#8a5fc7; --shimmer-b:#5a3d85; --ring-a:#a988e8; --tag-bg:#8a5fc7; --ribbon-bg:linear-gradient(135deg,#8a5fc7,#5f3f92); }
.card[data-rarity="legendary"]{ --frame-a: conic-gradient(from 0deg, var(--gold-1), var(--violet-1), var(--emerald-1), var(--ember-1), var(--gold-1)); --glow-a: rgba(231,196,119,.55); --hairline-strong:#b8862f; --shimmer-a:#b8862f; --shimmer-b:#7a5720; --ring-a:#e7c477; --tag-bg:#b8862f; --ribbon-bg:linear-gradient(135deg,#c99a3d,#8a651f); }

/* ===================== DEV BAR (only with ?dev=1) ===================== */
.devbar{
  position:absolute; top:0; left:0; right:0; z-index:9;
  display:flex; gap:4px; align-items:center; padding:5px 8px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  font-size:9px; color:#e7defb; white-space:nowrap; overflow-x:auto;
}
.devbar span{ flex-shrink:0; }
.devbar select{ font-family:inherit; font-size:9px; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:2px 3px; max-width:110px; flex-shrink:0; }
.devbar button{ font-family:inherit; font-size:9px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:3px 6px; cursor:pointer; flex-shrink:0; }