/* ============================================================
   hamadOS // Daily System  —  stylesheet
   Game-OS / sci-fi HUD aesthetic
   ============================================================ */

:root{
  /* core surfaces */
  --bg:        #060812;
  --bg-2:      #0a0e1c;
  --panel:     rgba(16, 22, 40, 0.72);
  --panel-line:rgba(120, 160, 255, 0.16);
  --ink:       #e8eeff;
  --ink-dim:   #8b97c4;
  --ink-faint: #5a6699;

  /* neon palette */
  --blue:   #38bdf8;
  --purple: #a855f7;
  --green:  #4ade80;
  --pink:   #f472d0;
  --amber:  #fbbf24;

  /* dynamic accent (driven by the day's mode) */
  --accent:     var(--purple);
  --accent-2:   var(--blue);
  --accent-soft:rgba(168, 85, 247, .15);

  --radius: 16px;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Chakra Petch', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
}

/* ---------- atmosphere ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:-3;
  background-image:
    linear-gradient(rgba(90,130,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,130,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
.bg-glow{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 8%, var(--accent-soft), transparent 60%),
    radial-gradient(55% 45% at 85% 12%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(50% 60% at 50% 100%, rgba(74,222,128,.08), transparent 60%);
  transition:background .6s ease;
}
.scanlines{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px);
  mix-blend-mode:overlay;
}

/* ---------- boot screen ---------- */
.boot{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .5s ease, visibility .5s;
}
.boot.gone{ opacity:0; visibility:hidden; }
.boot-inner{ text-align:center; width:min(360px, 80vw); }
.boot-logo{
  font-family:var(--font-display); font-weight:900; font-size:2.4rem;
  letter-spacing:3px; color:var(--ink); margin-bottom:24px;
  text-shadow:0 0 24px rgba(168,85,247,.6);
}
.boot-logo span{ color:var(--purple); }
.boot-bar{
  height:6px; border-radius:99px; background:rgba(255,255,255,.08);
  overflow:hidden; border:1px solid var(--panel-line);
}
.boot-bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--blue), var(--purple));
  box-shadow:0 0 16px var(--purple);
  animation:boot 1.6s ease forwards;
}
@keyframes boot{ to{ width:100%; } }
.boot-text{
  margin-top:14px; font-size:.75rem; letter-spacing:3px; color:var(--ink-dim);
  font-family:var(--font-display);
}

/* ============================================================
   TOP HUD
   ============================================================ */
.hud{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:14px clamp(14px, 3vw, 34px);
  background:linear-gradient(180deg, rgba(8,11,24,.92), rgba(8,11,24,.55));
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-line);
}
.hud-left{ flex:0 0 auto; }
.hud-center{ flex:1 1 auto; display:flex; justify-content:center; }
.hud-right{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }

.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:40px; height:40px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:900; font-size:1.15rem;
  color:#fff; border-radius:11px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 22px var(--accent-soft), inset 0 0 12px rgba(255,255,255,.18);
  transition:background .5s ease;
}
.brand-name{ font-family:var(--font-display); font-weight:700; letter-spacing:1.5px; font-size:1.05rem; }
.brand-name span{ color:var(--accent); transition:color .5s; }

/* level + xp */
.level-block{ width:min(420px, 60vw); }
.level-rank{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.rank-label{
  font-family:var(--font-display); font-weight:700; letter-spacing:2px; font-size:.82rem;
  color:var(--accent); text-shadow:0 0 14px var(--accent-soft); transition:color .5s;
}
.rank-lvl{ font-size:.72rem; letter-spacing:1.5px; color:var(--ink-dim); }
.rank-lvl b{ color:var(--ink); }
.xp-track{
  position:relative; height:16px; border-radius:99px;
  background:rgba(255,255,255,.06); border:1px solid var(--panel-line);
  overflow:hidden;
}
.xp-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 14px var(--accent);
  border-radius:99px;
  transition:width .7s cubic-bezier(.22,1,.36,1), background .5s;
}
.xp-fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-100%);
  animation:shine 2.6s ease-in-out infinite;
}
@keyframes shine{ to{ transform:translateX(220%); } }
.xp-text{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.62rem; letter-spacing:1px; font-weight:600; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}

/* chips */
.stat-chip{
  display:flex; flex-direction:column; align-items:center; line-height:1;
  padding:7px 13px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--panel-line);
  position:relative; min-width:64px;
}
.stat-chip .chip-icon{ font-size:1.05rem; margin-bottom:3px; }
.stat-chip .chip-val{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.stat-chip .chip-sub{ font-size:.55rem; letter-spacing:1px; color:var(--ink-faint); margin-top:3px; text-transform:uppercase; }
.stat-chip.streak{ border-color:rgba(251,191,36,.35); }
.stat-chip.streak .chip-val{ color:var(--amber); }
.stat-chip.streak.live .chip-icon{ animation:flame .9s ease-in-out infinite alternate; }
@keyframes flame{ from{ transform:scale(1); filter:none; } to{ transform:scale(1.18); filter:drop-shadow(0 0 8px var(--amber)); } }
.stat-chip.xp .chip-val{ color:var(--blue); }

.icon-btn{
  width:42px; height:42px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--panel-line);
  color:var(--ink); font-size:1.1rem; transition:.2s;
}
.icon-btn:hover{ border-color:var(--accent); box-shadow:0 0 14px var(--accent-soft); }
.icon-btn.muted{ opacity:.5; }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout{
  max-width:1180px; margin:0 auto;
  padding:clamp(16px, 3vw, 30px);
  display:grid; grid-template-columns:1.55fr 1fr; gap:18px;
  align-items:start;
}
.col{ display:flex; flex-direction:column; gap:18px; }

/* panel base */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:20px;
  backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.panel-corner{ position:absolute; width:14px; height:14px; border:2px solid var(--accent); opacity:.6; transition:border-color .5s; }
.panel-corner.tl{ top:8px; left:8px; border-right:0; border-bottom:0; }
.panel-corner.tr{ top:8px; right:8px; border-left:0; border-bottom:0; }
.panel-corner.bl{ bottom:8px; left:8px; border-right:0; border-top:0; }
.panel-corner.br{ bottom:8px; right:8px; border-left:0; border-top:0; }

.panel-tag{
  font-family:var(--font-display); font-weight:700; letter-spacing:2.5px;
  font-size:.66rem; color:var(--accent); text-transform:uppercase;
  display:inline-block; transition:color .5s;
}
.panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }

/* ---------- mode panel ---------- */
.mode-panel{ overflow:hidden; }
.mode-row{ display:flex; align-items:center; gap:16px; }
.mode-info{ flex:1; }
.mode-name{
  font-family:var(--font-display); font-weight:900; font-size:1.9rem;
  letter-spacing:1px; margin:6px 0 6px;
  background:linear-gradient(90deg, var(--ink), var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.mode-desc{ color:var(--ink-dim); font-size:.92rem; line-height:1.5; max-width:46ch; }
.mode-emblem{
  font-size:3.4rem; line-height:1;
  filter:drop-shadow(0 0 18px var(--accent-soft));
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.date-line{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--panel-line);
  font-size:.72rem; letter-spacing:1.5px; color:var(--ink-faint); text-transform:uppercase;
}

/* ---------- missions ---------- */
.mission-progress{ font-size:.72rem; letter-spacing:1px; color:var(--ink-dim); }
.mission-list{ list-style:none; display:flex; flex-direction:column; gap:11px; }

.mission{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:13px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--panel-line);
  cursor:pointer; overflow:hidden;
  transition:transform .15s ease, border-color .2s, background .2s;
}
.mission:hover{ transform:translateX(4px); border-color:var(--mc, var(--accent)); background:rgba(255,255,255,.05); }
.mission::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--mc, var(--accent)); box-shadow:0 0 12px var(--mc, var(--accent));
}
.m-check{
  flex:0 0 26px; width:26px; height:26px; border-radius:8px;
  border:2px solid var(--mc, var(--accent)); display:grid; place-items:center;
  font-size:.85rem; color:var(--bg); transition:.2s;
}
.m-body{ flex:1; }
.m-cat{
  font-size:.6rem; letter-spacing:1.5px; font-weight:700; text-transform:uppercase;
  color:var(--mc, var(--accent)); margin-bottom:2px; display:block;
}
.m-text{ font-size:.95rem; line-height:1.4; }
.m-xp{
  flex:0 0 auto; font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--mc, var(--accent)); white-space:nowrap;
}
/* completed state */
.mission.done{ background:rgba(74,222,128,.07); border-color:rgba(74,222,128,.4); cursor:default; }
.mission.done:hover{ transform:none; }
.mission.done .m-check{ background:var(--green); border-color:var(--green); color:#04210f; }
.mission.done .m-text{ color:var(--ink-dim); text-decoration:line-through; text-decoration-color:rgba(74,222,128,.5); }
.mission.done::before{ background:var(--green); box-shadow:0 0 12px var(--green); }
.mission.pop{ animation:pop .45s cubic-bezier(.22,1.6,.4,1); }
@keyframes pop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.035); } 100%{ transform:scale(1); } }

.all-clear{
  display:none; align-items:center; gap:14px; margin-top:14px; padding:16px;
  border-radius:13px; background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.35);
}
.all-clear.show{ display:flex; animation:pop .5s ease; }
.all-clear .ac-icon{ font-size:1.8rem; }
.all-clear strong{ font-family:var(--font-display); letter-spacing:1px; color:var(--green); font-size:.9rem; }
.all-clear p{ font-size:.82rem; color:var(--ink-dim); margin-top:3px; }

/* ---------- chaos / random challenge ---------- */
.challenge-sub{ font-size:.85rem; color:var(--ink-dim); line-height:1.5; margin:8px 0 16px; }
.chaos-btn{
  position:relative; width:100%; cursor:pointer; border:0;
  padding:20px; border-radius:14px; overflow:hidden;
  font-family:var(--font-display); font-weight:900; letter-spacing:2px; font-size:1.05rem;
  color:#fff;
  background:linear-gradient(120deg, var(--purple), var(--blue), var(--green));
  background-size:200% 100%;
  box-shadow:0 10px 30px rgba(168,85,247,.35);
  animation:gradient 5s linear infinite;
  transition:transform .15s, box-shadow .2s;
}
@keyframes gradient{ to{ background-position:200% 0; } }
.chaos-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 38px rgba(168,85,247,.5); }
.chaos-btn:active{ transform:translateY(1px) scale(.99); }
.chaos-btn:disabled{ opacity:.45; cursor:not-allowed; animation:none; transform:none; box-shadow:none; }
.chaos-label{ position:relative; z-index:2; }
.chaos-glow{
  position:absolute; inset:-50% -10%;
  background:radial-gradient(circle, rgba(255,255,255,.5), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.chaos-btn:hover .chaos-glow{ opacity:.25; }

.chaos-result{
  margin-top:14px; padding:15px; border-radius:13px;
  background:rgba(255,255,255,.04); border:1px solid var(--panel-line);
  animation:pop .4s ease;
}
.chaos-task{ font-size:1rem; line-height:1.5; margin-bottom:12px; }
.chaos-actions{ display:flex; gap:10px; }
.mini-btn{
  flex:1; cursor:pointer; padding:11px; border-radius:10px;
  font-family:var(--font-display); font-weight:700; letter-spacing:1px; font-size:.78rem;
  border:1px solid var(--panel-line); background:rgba(255,255,255,.04); color:var(--ink);
  transition:.18s;
}
.mini-btn.done{ background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.45); color:var(--green); }
.mini-btn.done:hover{ background:rgba(74,222,128,.24); }
.mini-btn.skip:hover{ border-color:var(--ink-dim); }
.chaos-cd{ margin-top:12px; text-align:center; font-size:.78rem; letter-spacing:1px; color:var(--ink-faint); }
.chaos-cd b{ color:var(--amber); }

/* ---------- stats ---------- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:14px 0; }
.stat-cell{
  padding:14px; border-radius:12px; text-align:center;
  background:rgba(255,255,255,.03); border:1px solid var(--panel-line);
}
.sc-val{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--accent); transition:color .5s; }
.sc-lbl{ font-size:.6rem; letter-spacing:1px; color:var(--ink-faint); text-transform:uppercase; margin-top:4px; display:block; }
.reset-btn{
  width:100%; margin-top:4px; cursor:pointer; padding:11px; border-radius:10px;
  font-family:var(--font-display); font-weight:600; letter-spacing:1.5px; font-size:.72rem;
  background:transparent; border:1px solid rgba(244,114,114,.35); color:#f47272; transition:.18s;
}
.reset-btn:hover{ background:rgba(244,114,114,.12); }
.reset-btn.confirm{ background:rgba(244,114,114,.2); border-color:#f47272; color:#fff; }

/* ---------- footer ---------- */
.foot{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:10px; font-size:.7rem; letter-spacing:1.5px; color:var(--ink-faint);
  text-transform:uppercase; background:linear-gradient(0deg, var(--bg), transparent);
  font-family:var(--font-display);
}
.foot-dot{ color:var(--accent); }

/* ---------- floating XP popups ---------- */
.fx-layer{ position:fixed; inset:0; z-index:55; pointer-events:none; }
.xp-pop{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:900; font-size:1.4rem;
  color:var(--green); text-shadow:0 0 14px var(--green);
  animation:xpUp 1.1s ease-out forwards;
}
@keyframes xpUp{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
  20%{ opacity:1; transform:translate(-50%,-90%) scale(1.1); }
  100%{ opacity:0; transform:translate(-50%,-200%) scale(1); }
}

/* ---------- level up overlay ---------- */
.levelup{
  position:fixed; inset:0; z-index:120; display:none;
  place-items:center; background:rgba(4,6,14,.82); backdrop-filter:blur(8px);
}
.levelup.show{ display:grid; animation:fadeIn .3s ease; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.lu-card{
  position:relative; text-align:center; padding:46px 54px; border-radius:22px;
  background:var(--panel); border:1px solid var(--accent);
  box-shadow:0 0 60px var(--accent-soft);
  animation:luIn .5s cubic-bezier(.22,1.4,.36,1);
}
@keyframes luIn{ from{ transform:scale(.7); opacity:0 } to{ transform:scale(1); opacity:1 } }
.lu-burst{
  position:absolute; inset:-2px; border-radius:22px; pointer-events:none;
  background:conic-gradient(from 0deg, transparent, var(--accent), transparent, var(--accent-2), transparent);
  opacity:.4; animation:spin 4s linear infinite; z-index:-1; filter:blur(8px);
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.lu-tag{ font-family:var(--font-display); font-weight:700; letter-spacing:5px; font-size:.8rem; color:var(--accent); }
.lu-rank{
  font-family:var(--font-display); font-weight:900; font-size:2.6rem; letter-spacing:2px; margin:12px 0 4px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lu-lvl{ color:var(--ink-dim); letter-spacing:2px; font-size:.9rem; }
.lu-lvl span{ color:var(--ink); }
.lu-btn{
  margin-top:24px; cursor:pointer; padding:13px 34px; border:0; border-radius:12px;
  font-family:var(--font-display); font-weight:700; letter-spacing:2px; font-size:.85rem; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 8px 24px var(--accent-soft); transition:transform .15s;
}
.lu-btn:hover{ transform:translateY(-2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px){
  .layout{ grid-template-columns:1fr; }
  .hud{ flex-wrap:wrap; gap:12px; }
  .hud-center{ order:3; flex-basis:100%; }
  .level-block{ width:100%; }
  .hud-right{ margin-left:auto; }
}
@media (max-width: 540px){
  .brand-name{ display:none; }
  .stat-chip{ min-width:auto; padding:6px 9px; }
  .stat-chip .chip-sub{ display:none; }
  .mode-name{ font-size:1.5rem; }
  .mode-emblem{ font-size:2.6rem; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .lu-card{ padding:36px 28px; }
  .lu-rank{ font-size:2rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============================================================
   NOVA — AI BUDDY
   ============================================================ */

.icon-btn.sm{ width:32px; height:32px; font-size:.85rem; border-radius:9px; }

/* floating launcher */
.buddy-fab{
  position:fixed; right:20px; bottom:72px; z-index:90;
  width:62px; height:62px; border-radius:50%; cursor:pointer; border:0;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--accent), var(--accent-2));
  box-shadow:0 8px 30px var(--accent-soft), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .2s ease, background .5s;
}
.buddy-fab:hover{ transform:scale(1.08) rotate(8deg); }
.buddy-fab:active{ transform:scale(.95); }
.fab-core{ font-size:1.5rem; color:#fff; z-index:2; text-shadow:0 0 10px rgba(255,255,255,.6); animation:bob 3s ease-in-out infinite; }
.fab-ring{
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--accent); opacity:.5;
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.85); opacity:.6 } 100%{ transform:scale(1.4); opacity:0 } }
.fab-dot{
  position:absolute; top:6px; right:6px; width:11px; height:11px; border-radius:50%;
  background:var(--green); border:2px solid var(--bg); box-shadow:0 0 8px var(--green);
}
.buddy-fab.hidden{ transform:scale(0); opacity:0; pointer-events:none; }

/* chat panel */
.buddy-panel{
  position:fixed; right:20px; bottom:72px; z-index:95;
  width:min(380px, calc(100vw - 32px));
  height:min(560px, calc(100vh - 120px));
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--accent);
  border-radius:18px; backdrop-filter:blur(16px);
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 40px var(--accent-soft);
  transform-origin:bottom right;
  transform:scale(.6) translateY(20px); opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.22,1.4,.36,1), opacity .22s, border-color .5s;
  overflow:hidden;
}
.buddy-panel.open{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

.buddy-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--panel-line);
  background:linear-gradient(180deg, var(--accent-soft), transparent);
}
.buddy-id{ display:flex; align-items:center; gap:11px; }
.buddy-avatar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-size:1.2rem; color:#fff;
  background:radial-gradient(circle at 35% 30%, var(--accent), var(--accent-2));
  box-shadow:0 0 16px var(--accent-soft);
}
.buddy-name{ font-family:var(--font-display); font-weight:700; letter-spacing:1.5px; font-size:1rem; }
.buddy-status{ display:flex; align-items:center; gap:6px; font-size:.66rem; color:var(--ink-dim); letter-spacing:.5px; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
.buddy-head-btns{ display:flex; gap:7px; }

/* log */
.buddy-log{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px;
  scrollbar-width:thin; scrollbar-color:var(--accent) transparent;
}
.buddy-log::-webkit-scrollbar{ width:6px; }
.buddy-log::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:99px; }

.msg{ max-width:84%; padding:11px 14px; border-radius:14px; font-size:.9rem; line-height:1.5; animation:msgIn .3s ease; white-space:pre-wrap; word-wrap:break-word; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }
.msg.nova{
  align-self:flex-start; background:rgba(255,255,255,.05);
  border:1px solid var(--panel-line); border-left:3px solid var(--accent);
  border-radius:14px 14px 14px 4px;
}
.msg.me{
  align-self:flex-end; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius:14px 14px 4px 14px;
}
.msg.note{
  align-self:center; font-size:.72rem; color:var(--ink-faint); background:transparent;
  border:1px dashed var(--panel-line); text-align:center;
}
.typing{ align-self:flex-start; display:flex; gap:4px; padding:13px 16px; background:rgba(255,255,255,.05); border:1px solid var(--panel-line); border-radius:14px 14px 14px 4px; }
.typing span{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:typing 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-5px); opacity:1 } }

/* chips */
.buddy-chips{ display:flex; gap:7px; padding:0 14px 10px; flex-wrap:wrap; }
.buddy-chips button{
  cursor:pointer; padding:7px 11px; border-radius:99px; font-family:var(--font-body);
  font-size:.74rem; font-weight:500; color:var(--ink-dim);
  background:rgba(255,255,255,.04); border:1px solid var(--panel-line); transition:.18s;
}
.buddy-chips button:hover{ color:var(--ink); border-color:var(--accent); }

/* input */
.buddy-input{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--panel-line); }
.buddy-input input{
  flex:1; padding:12px 14px; border-radius:12px; font-family:var(--font-body); font-size:.9rem;
  background:rgba(255,255,255,.05); border:1px solid var(--panel-line); color:var(--ink); outline:none; transition:.18s;
}
.buddy-input input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.buddy-input button{
  width:46px; border:0; border-radius:12px; cursor:pointer; font-size:1.05rem; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 18px var(--accent-soft); transition:transform .15s;
}
.buddy-input button:hover{ transform:translateY(-2px); }
.buddy-input button:active{ transform:scale(.94); }

/* settings drawer */
.buddy-settings{
  position:absolute; inset:0; z-index:5; padding:18px;
  background:var(--panel); backdrop-filter:blur(18px); overflow-y:auto;
  animation:msgIn .25s ease;
}
.buddy-settings h3{ font-family:var(--font-display); letter-spacing:1.5px; font-size:1rem; margin-bottom:16px; color:var(--accent); }
.toggle-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
.toggle-row span{ font-weight:600; }
.toggle-row input{ width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.set-note{ font-size:.76rem; color:var(--ink-dim); line-height:1.5; margin-bottom:16px; }
.set-label{ display:block; font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); margin:12px 0 6px; }
.buddy-settings input[type=password], .buddy-settings input[type=text]{
  width:100%; padding:11px 13px; border-radius:10px; font-family:var(--font-body); font-size:.85rem;
  background:rgba(255,255,255,.05); border:1px solid var(--panel-line); color:var(--ink); outline:none;
}
.buddy-settings input:focus{ border-color:var(--accent); }
.set-warn{ font-size:.72rem; color:var(--amber); line-height:1.5; margin:14px 0; padding:10px; border-radius:10px; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.25); }
.set-actions{ display:flex; gap:10px; }

@media (max-width: 540px){
  .buddy-panel{ right:8px; left:8px; width:auto; bottom:66px; height:min(70vh, calc(100vh - 110px)); }
  .buddy-fab{ right:14px; bottom:64px; width:56px; height:56px; }
}

/* ============================================================
   MOBILE SUPPORT — refinements (authoritative; loaded last)
   ============================================================ */

/* stop iOS auto text-resizing; kill blue tap-flash; smoother taps */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*{ -webkit-tap-highlight-color:transparent; }
button, .mission, .buddy-chips button{ touch-action:manipulation; }

/* respect iPhone notch + home-indicator safe areas */
body{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
.hud{ padding-top:calc(14px + env(safe-area-inset-top)); }
.foot{ padding-bottom:calc(10px + env(safe-area-inset-bottom)); }

/* on touch screens, don't leave hover transforms "stuck" after a tap —
   use a clear pressed state instead */
@media (hover: none){
  .mission:hover{ transform:none; background:rgba(255,255,255,.03); border-color:var(--panel-line); }
  .chaos-btn:hover{ transform:none; box-shadow:0 10px 30px rgba(168,85,247,.35); }
  .buddy-fab:hover, .buddy-input button:hover, .lu-btn:hover, .mini-btn:hover, .reset-btn:hover{ transform:none; }
  .icon-btn:hover{ box-shadow:none; border-color:var(--panel-line); }
  .buddy-chips button:hover{ border-color:var(--panel-line); color:var(--ink-dim); }
  .mission:active{ transform:scale(.99); background:rgba(255,255,255,.06); }
  .chaos-btn:active{ transform:scale(.98); }
  .buddy-chips button:active{ color:var(--ink); border-color:var(--accent); }
}

/* keep inputs ≥16px on phones so iOS doesn't auto-zoom the page on focus */
@media (max-width: 640px){
  .buddy-input input{ font-size:16px; }
  .buddy-input{ padding:10px 12px; }
}

/* tablet / large phone */
@media (max-width: 880px){
  .layout{ gap:14px; padding:14px; }
  .hud{ gap:10px; padding-left:14px; padding-right:14px; }
  .panel{ padding:16px; }
  .icon-btn.sm{ width:36px; height:36px; }
}

/* phones */
@media (max-width: 540px){
  .mode-name{ font-size:1.35rem; }
  .mode-row{ gap:10px; }
  .mode-emblem{ font-size:2.2rem; }
  .mode-desc{ font-size:.86rem; }
  .m-text{ font-size:.92rem; }
  .m-xp{ font-size:.8rem; }
  .mission{ padding:13px 14px; gap:11px; }
  .stat-cell{ padding:12px 8px; }
  .sc-val{ font-size:1.3rem; }
  .chaos-btn{ font-size:.95rem; padding:18px; }
  .foot{ font-size:.62rem; gap:7px; letter-spacing:1px; }

  /* launcher clears the footer + home indicator */
  .buddy-fab{ right:14px; bottom:calc(72px + env(safe-area-inset-bottom)); width:56px; height:56px; }

  /* NOVA becomes a proper bottom sheet; dvh keeps it usable when the
     mobile keyboard / browser bars appear (vh fallback for old browsers) */
  .buddy-panel{
    right:8px; left:8px; width:auto;
    bottom:calc(8px + env(safe-area-inset-bottom));
    height:min(80vh, calc(100vh - 96px));
    height:min(80dvh, calc(100dvh - 96px));
    max-height:none;
  }
  .buddy-log{ -webkit-overflow-scrolling:touch; padding:14px; }
}

/* very small phones */
@media (max-width: 380px){
  .boot-logo{ font-size:1.9rem; }
  .mode-name{ font-size:1.2rem; }
  .layout{ padding:12px; }
  .panel{ padding:14px; }
  .stat-chip{ padding:6px 7px; }
}

/* ---------- mission "undo done" button — only renders on completed missions ---------- */
.m-undo{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; cursor:pointer;
  display:grid; place-items:center; line-height:1;
  font-size:.85rem; font-weight:800; color:#ff5b5b;
  border:1px solid rgba(255,80,80,.6);
  background:rgba(255,80,80,.16);
  box-shadow:0 0 12px rgba(255,80,80,.32), inset 0 0 8px rgba(255,80,80,.12);
  animation:undoPulse 2s ease-in-out infinite;
  transition:transform .15s ease, background .15s, box-shadow .15s, color .15s;
}
.m-undo:hover{
  color:#fff; background:rgba(255,80,80,.4);
  box-shadow:0 0 22px rgba(255,80,80,.7);
  transform:scale(1.12) rotate(90deg);
}
.m-undo:active{ transform:scale(.9); }
@keyframes undoPulse{
  0%,100%{ box-shadow:0 0 10px rgba(255,80,80,.28), inset 0 0 8px rgba(255,80,80,.1); }
  50%{ box-shadow:0 0 18px rgba(255,80,80,.55), inset 0 0 10px rgba(255,80,80,.2); }
}
/* let the text column shrink so the buttons never get clipped on small screens */
.m-body{ min-width:0; }
.m-text{ overflow-wrap:anywhere; }