:root{
  --bg:#0b0b12; --panel:#141429; --ink:#cfe6ff; --accent:#7bdcff; --accent2:#ae84ff; --good:#00d18f; --warn:#ffcc00; --danger:#ff5078;
  --ring:#58f; --ring2:#e3f; --ring3:#4fd;
  --pix:'Press Start 2P', system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1100px 500px at 50% -20%, #1e1e3a 0, transparent 60%), var(--bg); color:var(--ink); font-family:var(--pix); letter-spacing:.5px}
a,button,input,select,textarea{font-family:var(--pix)}
h1,h2,h3{letter-spacing:1px}

.crt::after{content:''; position:fixed; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.03),rgba(0,0,0,.08)); mix-blend-mode:overlay}

.app-header{display:flex; align-items:center; justify-content:space-between; padding:8px 12px; position:sticky; top:0; background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.2)); backdrop-filter: blur(6px); z-index:20}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:70px; height:70px; filter:drop-shadow(0 0 6px #7cf)}
.hud{display:flex; align-items:center; gap:12px}
.hamb{border:1px solid #555; background:#111; color:#9fe; border-radius:10px; padding:6px 10px; cursor:pointer}
.hamb:active{transform:translateY(1px)}
.party-mini img{height:56px; border-radius:10px; margin-right:6px}
.gold{background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.35); padding:3px 8px; border-radius:10px}
.xp .bar{width:160px; height:8px; border:1px solid #6cf; border-radius:6px; overflow:hidden; display:inline-block; vertical-align:middle; margin-left:6px}
#hudXp{height:100%; width:0%; background:linear-gradient(90deg, #7cf, #e7a7ff)}

.drawer{position:fixed; right:-260px; top:0; width:260px; height:100dvh; background:rgba(10,10,22,.98); border-left:1px solid #444; padding:12px; z-index:30; transition:right .22s ease-out; overflow:auto}
.drawer.open{right:0}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(2px); z-index:25; opacity:0; pointer-events:none; transition:opacity .2s}
.scrim.show{opacity:1; pointer-events:auto}
.drawer nav button{width:100%; text-align:left; margin:6px 0; border:1px solid #445; border-radius:12px; padding:10px 12px; background:#0f1322; color:#cfe6ff; cursor:pointer}
.drawer nav button.active{border-color:#7bdcff; box-shadow:0 0 0 2px rgba(123,220,255,.2) inset}

.view{padding:12px; max-width:1200px; margin:0 auto}
.panel{background:var(--panel); border:1px solid #2a2d50; border-radius:18px; padding:12px; margin:10px 0; box-shadow:0 0 25px rgba(123,220,255,.06) inset}
.grid{display:grid; gap:12px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:#11162a; border:1px solid #3a3f68; border-radius:16px; padding:12px}

.party-banner{background:linear-gradient(180deg,#2a2338,#1a1825); border:1px solid #2a2d50; border-radius:16px; padding:12px; display:flex; align-items:center; gap:12px; overflow:hidden; max-width:1200px;}
.party-title{color:#111; background:#f2e7ff; padding:4px 8px; border-radius:8px}
.party{display:flex; align-items:flex-end; gap:20px}
.party .hero{display:flex; flex-direction:column; align-items:center}
.party .hero img{width:360px; height:460px; object-fit:contain; border-radius:12px; box-shadow:0 0 12px rgba(255,255,255,.15)}
.party .hero .name{margin-top:6px; color:#000; background:#fff; padding:2px 6px; border-radius:8px}

.breathe{display:flex; flex-direction:column; align-items:center; gap:8px}
.breathe .ring{width:200px; height:200px; overflow:visible; border-radius:50%; background:conic-gradient(var(--ring), var(--ring2), var(--ring3)); animation:pulse 3s linear infinite; box-shadow:0 0 28px #89f, 0 0 60px rgba(137,153,255,.25)}
.breathe .core{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center}
.breathe .core::after{content:''; position:absolute; inset:22px; border-radius:50%; background:#0b0b12}
@keyframes pulse{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

.meal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:10px}
.meal-grid .box{min-height:90px; border:1px dashed #4d4a77; border-radius:10px; padding:6px}

.list .row{display:flex; align-items:center; gap:8px; margin:6px 0}
input[type="text"], input[type="number"], textarea, select{width:100%; background:#0a0f1e; border:1px solid #3c4169; color:#cfe6ff; border-radius:12px; padding:8px}
button.primary{background:#1a9bd6; border:1px solid #30b0eb; color:#001019; padding:8px 12px; border-radius:12px; cursor:pointer}
button.secondary{background:#0f1424; border:1px solid #4a4f78; color:#b6d4ff; padding:8px 12px; border-radius:12px; cursor:pointer}
button.danger{background:#2a0f18; border:1px solid #ff5078; color:#ff8da7; padding:8px 12px; border-radius:12px; cursor:pointer}
button:disabled{opacity:.55}

.fx-layer{position:fixed; inset:0; pointer-events:none; z-index:50}
.spark{position:absolute; width:6px; height:6px; border-radius:50%; background:#7cf; box-shadow:0 0 8px #7cf}
.crown{position:fixed; top:-60px; width:36px; left:50%; transform:translateX(-50%); animation:drop 1.1s ease-out forwards}
@keyframes drop{0%{top:-60px}70%{top:50px}100%{top:80px; opacity:0}}

.tooltip{font-size:.7rem; opacity:.8}

/* --- Character page, bigger canvas + editor under file input --- */
.character-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap:16px;
}
.hero-side h3, .companions-side h3 { margin-top:0; }

.portrait-wrap{
  position:relative;
  width: 360px;      /* 2x-ish the old size */
  height: 460px;
  margin: 6px 0 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  outline: 1px solid rgba(180,200,255,0.2);
  overflow:hidden;
}
.hero-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  z-index: 0;
}
.acc-layer{
  position:absolute;
  inset:0;
  pointer-events: auto;
  z-index: 2;
}
.acc-img{
  position:absolute;
  left:50%; top:50%;
  transform: translate(0,0);
  transform-origin: center center;
  user-select:none;
  pointer-events: auto;
  will-change: transform;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.35));
}
.acc-img.active{
  outline: 2px dashed rgba(120,200,255,.75);
  outline-offset: 2px;
}

.file-row{ gap:10px; align-items: end; }
.acc-editor{
  margin-top: 10px;
}
.acc-editor .hint{
  margin: 0 0 6px;
  opacity: .75;
  font-size: .85rem;
}
.acc-editor .toolbar{
  display:flex; flex-wrap:wrap; gap:8px;
}
.acc-editor .toolbar button{
  padding:6px 10px; border-radius:10px;
}

/* --- Accessory Editor hotfix --- */
.accfix-big .accfix-stage { height: 360px; }            /* ~2x the old slot */
.accfix-hero-slot { margin-bottom: 16px; }
.accfix-stage {
  position: relative;
  width: 320px;            /* fits well with doubled height */
  height: 360px;
  border: 1px solid rgba(120,180,255,.35);
  border-radius: 12px;
  background: rgba(30,35,55,.35);
  overflow: hidden;
}
.accfix-hero {
  position: absolute; inset: 0; margin: auto;
  max-height: 100%; max-width: 100%;
  object-fit: contain;
  filter: none; image-rendering: auto;
}
.accfix-layer { position: absolute; inset: 0; }
.accfix-acc {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  cursor: grab;
  user-select: none;
  max-width: 70%;
  max-height: 70%;
  transition: box-shadow .12s ease;
}
.accfix-acc.is-selected { box-shadow: 0 0 0 2px rgba(110,200,255,.9); }

.accfix-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.accfix-file { display: inline-flex; gap: 8px; align-items: center; background: rgba(50,70,110,.35); padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(120,180,255,.25); }
.accfix-file span { opacity: .85; font-size: 12px; }
.accfix-file input { accent-color: #79d; }

.accfix-wrap { margin-top: 12px; }
.accfix-tip { opacity: .7; font-size: 12px; margin-bottom: 6px; }
.accfix-toolbar { display: flex; gap: 8px; margin-bottom: 6px; }
.btn.tiny { padding: 6px 10px; font-size: 12px; border-radius: 10px; }
.btn.danger { background: #8a2d2d; }
.btn.primary { background: #2d6aa8; }

/* Try to hide legacy tiny arrow buttons inside hero box if present */
.accfix-hero-slot .nudge, .accfix-hero-slot .tiny, .accfix-hero-slot .btn-nudge { display: none !important; }


/* --- v2.6 polish: character screen --- */
.character-page .file-row .field{background:rgba(10,20,35,.35); border:1px solid rgba(120,180,255,.25); border-radius:12px; padding:8px 10px; display:inline-flex; align-items:center; gap:8px;}
.character-page .file-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0;}
.character-page .hint.muted{opacity:.75}
/* companions */
.comp-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.comp-item{position:relative; border:1px dashed rgba(120,180,255,.3); border-radius:12px; overflow:hidden; padding:6px; background:rgba(5,10,20,.25)}
.comp-item img{display:block; max-width:120px; height:auto}
.comp-item button{position:absolute; top:4px; right:4px; border-radius:8px; padding:2px 6px; font-size:.8rem}
/* nuke any legacy overlay toolbars just in case */
.sb-align-bar,.sb-align-hint,.acc-toolbar{display:none!important}


/* === DEBUG ALIGNMENT MODE === */
body.sb-debug .sb-portrait-wrap>img { outline: 2px solid rgba(255,0,0,0.85) !important; outline-offset: -2px; }
body.sb-debug .sb-acc-layer { outline: 2px solid rgba(0,160,255,0.85) !important; }

.reward-row{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid #2a2d50;border-radius:10px;padding:8px 10px;margin:6px 0;background:rgba(20,20,35,.6)}
.reward-row .tok{font-size:1.1rem}
.reward-row.done{opacity:.6}

.hud .tokens{display:flex;gap:6px;margin-right:8px}
.hud .token{font-size:1.1rem;filter:drop-shadow(0 0 4px rgba(0,0,0,.4))}

.panel.breathe{max-width:360px; padding:12px; align-items:center}

/* Home layout tighten */
.home-breath{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start;overflow:visible}
.panel.breathe{max-width:360px;min-height:auto;padding:12px}
.breathe .ring svg{overflow:visible}

.panel.breathe,.breathe .ring,.breathe .ring svg{overflow:visible}

/* --- Party banner centered label --- */
.party-banner{display:block;margin-bottom:8px}
.party-banner .party-title{display:block;text-align:center;margin:4px auto 8px auto;width:fit-content;padding:6px 12px;border:1px solid #2a2d50;border-radius:12px;background:rgba(30,25,55,.45)}
.party{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px}
/* --- Breathe ring fixes --- */
.panel.breathe{max-width:340px;padding:12px;overflow:visible}
.breathe .ring{position:relative;width:220px;height:220px;margin:0 auto;overflow:visible}
.breathe .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:#000000;box-shadow:0 0 40px rgba(137,153,255,.35) inset}
#phase{text-align:center;margin-top:8px}
/* Life Hub meal layouts */
.meal-grid .row{gap:8px}
.meal-day{display:grid; grid-template-columns:1fr; gap:8px}
.meal-grid-wrap{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px}
.meal-col input{width:100%}