:root{
  --ink:#e7eaf2;--panel:#12161e;
  --btn:#e7eaf2;--btn-txt:#0b0f14;--soft-line:#2b3547;
  --activeBG:#e7eaf2; --activeFG:#0b0f14;
  --canvas-bg:#ffffff;
  --bg1:#0b1017;--bg2:#0f1a27;
  --appbar-h:56px;
  --toolbar-h:160px;
}
html[data-theme="light"]{
  --ink:#0b0f14;--panel:#ffffff;
  --btn:#0b0f14;--btn-txt:#ffffff;--soft-line:#d6dce7;
  --activeBG:#0b0f14; --activeFG:#ffffff;
  --canvas-bg:#ffffff;
  --bg1:#f5f7fb;--bg2:#eaeff7;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100dvh}
body{
  background:linear-gradient(140deg,var(--bg1),var(--bg2));
  color:var(--ink);
  font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-tap-highlight-color:transparent;
}
body.hasbar main#screens{ padding-top:56px }
html{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* DEBUG TOAST — makes it impossible to miss */
#toast{
  position:fixed;
  left:50%;
  top:70px;                 /* put it near top */
  transform:translateX(-50%) translateY(8px);
  background:rgba(20,18,15,0.95);  /* dark high contrast */
  color:#fff;
  border:2px solid rgba(255,255,255,0.9);
  border-radius:999px;
  padding:10px 16px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 8px 18px rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  z-index:9999;
  transition:opacity .18s ease, transform .18s ease;
}
#toast.toast-show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}


.hint{
  font-size:13px;
  opacity:.8;
}

/* APP BAR */
header.appbar{
  position:fixed;
  top:0;left:0;right:0;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  background:var(--panel);
  border-bottom:1px solid var(--soft-line);
  z-index:30;
}
header.appbar.hidden{display:none}
.brand-btn{
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  color:inherit;
}
.logoE{
  width:32px;height:32px;
  border-radius:8px;
  display:grid;
  place-items:center;
  box-shadow:0 0 18px rgba(123,140,255,.35),
             0 0 34px rgba(87,230,217,.25);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:transparent;
}
.logoE img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.icon-btn, .btn{border:0;cursor:pointer}
.btn{
  background:var(--btn);
  color:var(--btn-txt);
  border-radius:12px;
  padding:8px 12px;
  font-weight:800;
}
.btn.alt{background:#e9eef7;color:#111}
html:not([data-theme="light"]) .btn.alt{
  background:#1f2a38;
  color:#e7eaf2;
}
.btn.active{
  background:var(--activeBG) !important;
  color:var(--activeFG) !important;
  outline:2px solid var(--activeFG);
  outline-offset:2px;
}
.icon-btn{
  background:none;
  font-size:18px;
  color:inherit;
}

/* SCREENS */
main#screens{
  position:relative;
  height:100dvh;
  overflow:hidden;
}
.screen{
  position:absolute;
  inset:0;
  display:none;
  padding:10px;
  gap:12px;
  background:transparent;
}
.screen.on{
  display:block;
  animation:fade .18s ease;
}
@keyframes fade{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.card{
  background:var(--panel);
  border-radius:16px;
  border:1px solid var(--soft-line);
}

/* DAILY CHALLENGE – ROBOT CANVAS */
#screenDaily{
  padding:0;
  display:block;
  overflow:hidden;
}
.daily-art{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.daily-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.daily-overlay{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  pointer-events:none;
}

/* Card that lines up with the robot's canvas */
.daily-card{
  margin-top:44vh;            /* tweak to sit on the drawn canvas */
  width:70vw;
  max-width:360px;
  height:25vh;                /* tweak height to match canvas area */
  display:flex;
  flex-direction:column;
  justify-content:space-between;  /* label top, text middle, buttons bottom */
  align-items:center;
  padding:4px 10px 8px;
  background:transparent;
  border:none;
  box-shadow:none;
  transform:rotate(0deg);
  transform-origin:center;
  pointer-events:auto;
  text-align:center;
}

.daily-label{
  font-size:20px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:1;
  color:#060606;
}

/* Suggestion text in the middle */
.daily-card h2#dailyText{
  margin:0;
  font-size:30px;
  line-height:1.25;
  font-weight:600;
  font-family:'Caveat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:#1f9fb0;
}

/* Buttons row at the bottom of the canvas */
.daily-actions{
  display:flex;
  gap:10px;
  width:100%;
  justify-content:center;
}

.daily-actions .btn,
.daily-actions .btn.alt{
  flex:0 0 auto;
  min-width:40%;
  font-size:20px;
  font-weight:700;
  padding:4px 12px 6px;
  border-radius:999px;
  border:1px solid rgba(120,105,85,0.9);
  background:rgba(255, 242, 212, 0.9);
  color:#3b3327;
  box-shadow:0 2px 0 rgba(0,0,0,0.15);
  text-decoration:none;
}
.daily-actions .btn:active,
.daily-actions .btn.alt:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,0.15);
}
/* Force Daily buttons to look the same in both themes */
html[data-theme="light"] .daily-actions .btn,
html[data-theme="light"] .daily-actions .btn.alt,
html:not([data-theme="light"]) .daily-actions .btn,
html:not([data-theme="light"]) .daily-actions .btn.alt{
  flex:0 0 auto;
  min-width:40%;
  font-size:22px;
  font-weight:700;
  padding:4px 12px 6px;
  border-radius:999px;
  border:1px solid rgba(120,105,85,0.9);
  background:rgba(255, 242, 212, 0.15);
  color:#3b3327;
  box-shadow:0 2px 0 rgba(0,0,0,0.15);
  text-decoration:none;
}

html[data-theme="light"] .daily-actions .btn:active,
html[data-theme="light"] .daily-actions .btn.alt:active,
html:not([data-theme="light"]) .daily-actions .btn:active,
html:not([data-theme="light"]) .daily-actions .btn.alt:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,0.15);
}


/* HERO MENU */
#screenMenu{padding:0;display:block}
#bgWrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
#bgCanvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.menuLayer{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
}
.heroTop{
  position:absolute;
  inset:0;
  padding:0;
  display:block;
}
.titleArt{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
  box-shadow:none;
}
.heroBottom{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.bubbleList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:min(70vw,360px);
  margin:0;
  pointer-events:auto;
  transform:translateY(-40%);
}
.bubble{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 4px;
  border-radius:18px;
  font-weight:900;
  font-size:15px;
  text-align:center;
  transform:translateY(0);
  animation:float 6s ease-in-out infinite;
  will-change:transform;
  border:0;
  background:rgba(0,0,0,0.45);
  color:#fdfdfd;
  box-shadow:0 18px 32px rgba(0,0,0,.40);
}
html[data-theme="light"] .bubble{
  background:rgba(255,255,255,0.88);
  color:#111;
  border:1px solid rgba(0,0,0,0.18);
}
.bubble:active{transform:scale(.98)}
.bubble:nth-child(1){animation-delay:0s}
.bubble:nth-child(2){animation-delay:.12s}
.bubble:nth-child(3){animation-delay:.24s}
.bubble:nth-child(4){animation-delay:.36s}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* SETTINGS MODAL */
#settings{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:40;
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
#settings.on{ display:flex }
#settings .panel{
  width:min(92vw,520px);
  padding:16px;
}
#settings .row{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
}

/* DRAW SCREEN */
#screenDraw{ padding:0; }
.canvas-host{
  position:fixed;
  top:calc(var(--appbar-h) + 8px);
  bottom:calc(var(--toolbar-h) + 8px);
  left:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.canvas-wrap{
  width:100%;
  height:100%;
  max-width:920px;
  margin:0 auto;
  pointer-events:auto;
}
.canvas-wrap.card{
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;       /* so overlay can be absolutely positioned */
}

canvas#sketch{
  display:block;
  width:100%;
  height:100%;
  border-radius:14px;
  background:var(--canvas-bg);
  border:1px solid var(--soft-line);
  touch-action:none;
}




/* TOOLBAR */
.toolbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:25;
  background:var(--panel);
  border-top:1px solid var(--soft-line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  display:grid;
  gap:6px;
  grid-template-rows:auto auto auto auto;
}
.row{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  max-width:920px;
  margin:0 auto;
}
.row-tools .btn{ min-width:78px }
/* Toolbar: invert colors when a tool is active (like palette buttons) */



/* Brush + zoom row */
.row-size{
  justify-content:center;
}
.row-size .range{
  width:min(55vw,260px);
}
.zoom-group{
  display:flex;
  gap:6px;
  align-items:center;
}

.row-swatches{
  padding:4px 4px;
  border-radius:16px;
  background:#222835;
}
html[data-theme="light"] .row-swatches{
  background:#edf1fb;
}

.swatches{
  display:flex;
  gap:3px;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  overflow-x:hidden;
}
.swatch{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  width:25px;
  height:25px;
  border-radius:999px;
  position:relative;
}
.swatch::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
}
html[data-theme="light"] .swatch::before{
  box-shadow:0 0 0 1px rgba(0,0,0,.85);
}

.palette-group{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.pal{
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
}
.pal.active{
  background:var(--activeBG);
  color:var(--activeFG);
  outline:2px solid var(--activeFG);
}

/* Make the active tool button match the active palette style */
.row-tools .btn.tool-active{
  background:var(--activeBG)!important;
  color:var(--activeFG)!important;
  outline:2px solid var(--activeFG);
}


/* AI overlay */
#aiOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:120;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background:rgba(0,0,0,.35);
}
#aiCard{ width:min(92vw,420px); }
.progressbar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(0,0,0,.15);
  border:1px solid var(--soft-line);
  overflow:hidden;
}
.progressbar > div{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#7b8cff,#88e1d7);
  transition:width .28s ease;
}

/* Canvas menu (New / Save / Import) */
.canvas-menu-wrap {
  position: relative;
  display: inline-block;
}
.canvas-menu-panel {
  position: absolute;
  right: 0;
  top: 110%;
  background: var(--panel);
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  padding: 6px;
  display: none;
  z-index: 50;
  min-width: 150px;
}
.canvas-menu-panel.open {
  display: block;
}
.canvas-menu-panel .menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}
.canvas-menu-panel .menu-item:hover,
.canvas-menu-panel .menu-item:active {
  background: rgba(255,255,255,0.06);
}
html[data-theme="light"] .canvas-menu-panel .menu-item:hover,
html[data-theme="light"] .canvas-menu-panel .menu-item:active {
  background: rgba(0,0,0,0.05);
}

/* Splash: logo fades, background stays black until JS removes it */
#splash{
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
#splash img{
  width:min(70vw,520px);
  height:auto;
  display:block;
  filter:drop-shadow(0 0 24px rgba(120,170,255,.35));
  animation:splashFade 1s ease 1s forwards;
}
@keyframes splashFade{
  to{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  #splash img{
    animation:none;
  }
}
/* STORE – ROBOT SCENE STYLE (matches Daily) */

#screenStore{
  padding:0;
  display:block;
  overflow:hidden;
}

/* full-screen background art */
.store-art{
  position:absolute;
  inset: 0;
  overflow:visible;
}
.store-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  /* keep more of the RIGHT side visible */
  object-position: 62% top;  /* try 60–70% */
}

/* overlay layer */
.store-overlay{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  pointer-events:none;
}

/* main overlay card area */
.store-card{
  margin-top:10vh;            /* nudges UI into robot-pointing zone */
  width:76vw;                 /* a bit wider so tidbit breathes */
  max-width:480px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:0 10px;
  background:transparent;
  border:none;
  box-shadow:none;
  pointer-events:auto;
  text-align:left;
  color:#3b3327;
}

/* top chunk */
.store-top{
  display:grid;
  gap:8px;

  /* reserve room on right so text stays off robot */
  padding-right:140px;
}

.store-title{
  font-size:22px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#060606;
}

/* balances: big icons with count BELOW */
.store-balance{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-top:2px;
}

.balance-token{
  width:78px;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.balance-token img{
  width:78px;
  height:78px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18));
}

/* count badge under token */
.balance-count-under{
  margin-top:4px;
  min-width:48px;
  text-align:center;
  padding:2px 8px;

  background:rgba(255,242,212,0.95);
  border:1px solid rgba(120,105,85,0.9);
  border-radius:10px;

  font-size:18px;
  font-weight:900;
  line-height:1.2;
  color:#1a1611;
  box-shadow:0 1px 0 rgba(0,0,0,0.12);
}
html:not([data-theme="light"]) .balance-count-under{
  background:rgba(255,242,212,0.8);
}

/* readable “paper label” */
.store-tidbit{
  /* Slightly wider than the card by cancelling its side padding */
  width: calc(100% + 50px);
  margin-left: 0px;
  margin-right: -50px;

  max-width:none;
  background:rgba(255, 242, 212, 0.92);
  border:1px solid rgba(120,105,85,0.9);
  border-radius:12px;
  padding:8px 10px;

  font-size:14px;
  line-height:1.35;
  color:#000000;
  box-shadow:0 2px 0 rgba(0,0,0,0.12);
}

html:not([data-theme="light"]) .store-tidbit{
  background:rgba(255, 242, 212, 0.78);
}

/* action area in open space */
.store-actions{
  display:grid;
  gap:10px;
}

/* token icons used in buttons */
#screenStore .token-icon.tiny{ width:18px; height:18px; }
#screenStore .token-icon.small{ width:24px; height:24px; }
#screenStore .token-icon{ width:32px; height:32px; }

/* make Store buttons match Daily’s pill feel in BOTH themes */
.store-cta,
.store-pack-btn,
.store-back{
  border-radius:999px;
  border:1px solid rgba(120,105,85,0.9);
  background:rgba(255, 242, 212, 0.35);
  color:#3b3327;
  font-weight:800;
  box-shadow:0 2px 0 rgba(0,0,0,0.15);
}
.store-cta:active,
.store-pack-btn:active,
.store-back:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,0.15);
}

.store-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  font-size:16px;
}

.store-pack-list{
  display:grid;
  gap:8px;
}
.store-pack-btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:8px 12px;
  font-size:15px;
}
.store-pack-btn span{ flex:1; text-align:center; }

.store-note{
  font-size:12px;
  line-height:1.35;
  opacity:0.9;
  margin-top:2px;
}

.store-back{
  margin-top:4px;
  padding:8px 12px;
  font-size:16px;
}

/* narrow phones */
@media (max-width:420px){
  .store-top{ padding-right:110px; }
}

/* very small phones */
@media (max-width:360px){
  .balance-token,
  .balance-token img{
    width:68px;
    height:68px;
  }
  .balance-count-under{
    font-size:16px;
  }
}

/* short screens: trim text */
@media (max-height:700px){
  .store-note{ display:none; }
}



/* ABOUT / APP INFO MODAL */
#aboutModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:40;
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
#aboutModal.on{ display:flex; }

#aboutModal .about-panel{
  width:min(92vw,560px);
  max-height:82vh;
  overflow:auto;
  padding:16px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.about-title{
  margin:0;
  font-size:20px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  text-align:center;
}

.about-section h3{
  margin:8px 0 4px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.9;
}
.about-section p{
  margin:0;
  font-size:14px;
  line-height:1.35;
}
.about-section ul{
  margin:4px 0 0 18px;
  padding:0;
  font-size:14px;
  line-height:1.35;
}
.about-section.small p{
  font-size:12px;
  opacity:.9;
}

.about-footer{
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.about-madeby{
  font-size:12px;
  opacity:.85;
}

/* A.I. PROCESSING OVERLAY */
.ai-processing{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.ai-processing.on{ display:flex; }

.ai-processing-card{
  width:min(86vw,380px);
  padding:18px 16px;
  text-align:center;
  display:grid;
  gap:8px;
}
.ai-processing-title{
  font-size:20px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.ai-processing-sub{
  font-size:14px;
  opacity:.9;
}
.ai-spinner{
  margin:8px auto 0;
  width:42px; height:42px;
  border-radius:50%;
  border:4px solid rgba(0,0,0,0.12);
  border-top-color:rgba(0,0,0,0.55);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
/* Processing actions (hidden by default; shown only when A.I. is stuck) */
.ai-processing-actions{
  display:none;
  margin-top:10px;
  justify-content:center;
}
.ai-processing.show-cancel .ai-processing-actions{ display:flex; }


/* A.I. RESULT MODAL */
.ai-result-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:55;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.ai-result-modal.on{ display:flex; }

.ai-result-card{
  width:min(92vw,520px);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
}
.ai-result-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ai-result-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ai-result-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  background:rgba(255,255,255,0.5);
  border-radius:12px;
  padding:8px;
}
.ai-result-body img{
  max-width:100%;
  max-height:70vh;
  object-fit:contain;
  border-radius:10px;
}
.ai-result-actions{
  display:flex;
  gap:8px;
  justify-content:center;
}
/* --- Before/After compare slider inside AI result --- */
.compare-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;          /* square viewer feels nice on mobile */
  background:rgba(255,255,255,0.6);
  border-radius:12px;
  overflow:hidden;
}

.compare-wrap img{
  max-width:none;
  max-height:none;
  border-radius:0;
}

/* both images fill the viewer */
.compare-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}



/* little BEFORE / AFTER tags */
.compare-label{
  position:absolute;
  top:8px;
  padding:4px 8px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  color:white;
  opacity:.55;
  transition:opacity .18s ease, background .18s ease;
}

.compare-label.before{ left:8px; }
.compare-label.after{ right:8px; }

.compare-label.active{
  opacity:1;
  background:rgba(0,0,0,0.85);
}


/* action row can wrap on smaller phones */
.ai-result-actions{
  flex-wrap:wrap;
}



/* Daily back button – pinned near bottom, off robot canvas */
.daily-back-fixed{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(env(safe-area-inset-bottom) + 70px);
  display:flex;
  justify-content:center;
  pointer-events:auto;
  z-index:3; /* stays above the art */
}


/* A.I. CHOICE MODAL */
.ai-choose-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:52;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.ai-choose-modal.on{ display:flex; }

.ai-choose-card{
  width:min(90vw,420px);
  padding:16px 14px 12px;
  display:grid;
  gap:8px;
  text-align:center;
}
.ai-choose-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.ai-choose-sub{
  font-size:14px;
  opacity:.9;
}

.ai-choose-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:6px;
}
.ai-choice-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 8px;
  border-radius:14px;
  font-weight:900;
}
.ai-choice-btn small{
  font-size:12px;
  font-weight:700;
  opacity:.85;
}
.ai-choice-btn.disabled{
  opacity:.55;
  filter:grayscale(0.3);
}

.ai-choose-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:4px;
}


/* RESTORE SKETCH MODAL */
.restore-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:53;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.restore-modal.on{ display:flex; }
.restore-card{
  width:min(90vw,420px);
  padding:16px 14px 12px;
  display:grid;
  gap:10px;
  text-align:center;
}
.restore-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.restore-sub{
  font-size:14px;
  opacity:.9;
}
.restore-preview{
  width:100%;
  max-height:42vh;
  object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,0.55);
}
.restore-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

.ai-save-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:56;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.ai-save-modal.on{ display:flex; }

.ai-save-card{
  width:min(90vw,420px);
  max-width:420px;
  padding:18px 16px 14px;
  border-radius:18px;
  box-shadow:0 12px 35px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ai-save-title{
  font-size:18px;
  font-weight:900;
  margin-bottom:2px;
}

.ai-save-sub{
  font-size:13px;
  opacity:.85;
}

.ai-save-buttons{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}
/* Style + extra prompt inside A.I. choice card */
.ai-style-block,
.ai-extra-block {
  text-align: left;
  margin-top: 6px;
}

.ai-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.ai-optional {
  font-weight: 400;
  opacity: 0.7;
  font-size: 12px;
}

.ai-style-select,
.ai-extra-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--soft-line);
  padding: 6px 8px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
}

html[data-theme="light"] .ai-style-select,
html[data-theme="light"] .ai-extra-input {
  background: rgba(255, 255, 255, 0.9);
}

.ai-extra-input {
  resize: vertical;
  min-height: 40px;
  max-height: 90px;
}


/* --- AI CHOOSE POPUP: shrink token icons locally --- */
.ai-choose-modal .token-icon,
#aiChooseModal .token-icon,
.ai-choose-modal img,
#aiChooseModal img{
  width:28px !important;
  height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
  object-fit:contain;
}

/* keep the choice buttons tidy */
.ai-choice-btn{
  padding:10px 8px;
  gap:6px;
  border-radius:14px;
}
.ai-choice-btn span{
  font-size:14px;
  font-weight:900;
}
.ai-choice-btn small{
  font-size:12px;
  opacity:.85;
}

/* === Full-screen A.I. result viewer (safe override) === */

.ai-result-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:stretch;              /* card stretches full height */
  justify-content:center;
  z-index:55;                       /* save popup should stay higher (56+) */
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.ai-result-modal.on{ display:flex; }

.ai-result-card{
  width:90vw;
  max-width:90vw;
  height:90vh;
  max-height:90vh;
  margin:auto;
  box-sizing:border-box;
  padding:8px;
  display:flex;
  flex-direction:column;            /* header / body / actions stack */
  gap:8px;
  border-radius:12;
  border:3mm ridge rgba(65, 117, 138, 0.6);
  background:var(--panel);
}

/* Header stays at the top */
.ai-result-header{
  flex-shrink:0;
}

/* Buttons stay at the bottom and visible */
.ai-result-actions{
  flex-shrink:0;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Middle area is pure image space */
.ai-result-body{
  flex:1;
  min-height:0;
  padding:4px;
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Viewer fills the body */
.compare-wrap{
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  aspect-ratio:auto;                /* drop the forced perfect square */
  background:rgba(0,0,0,0.4);
  border-radius:8px;
  overflow:hidden;
}

/* Images scale to fit the viewer */
.compare-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.ai-main-btn {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  background: #2d8cff;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.ai-style-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px;
}

.ai-style-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.ai-style-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-style-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.ai-style-tagline {
  font-size: 0.8rem;
  opacity: 0.75;
}


.ai-style-label {
  font-size: 1.85rem;
  opacity: 0.85;
}

.ai-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}



.ai-style-option {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font-size: 0.8rem;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}


.ai-style-option:focus-visible {
  outline: 2px solid #2d8cff;
}

.ai-style-selected {
  border-color: #2d8cff;
  background: rgba(45,140,255,0.2);
}

.ai-style-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #444444;
}

/* Placeholder icon colors until you swap to real robot art */
.ai-icon-soft   { background: linear-gradient(135deg,#ffb5e8,#ffe082); }
.ai-icon-comic  { background: linear-gradient(135deg,#ff6b6b,#ffd93d); }
.ai-icon-story  { background: linear-gradient(135deg,#a0e7e5,#b4f8c8); }
.ai-icon-pixel  { background: linear-gradient(135deg,#7f5af0,#2cb67d); }
.ai-icon-photo  { background: linear-gradient(135deg,#f97316,#fed7aa); }
.ai-icon-more   { background: linear-gradient(135deg,#9ca3af,#e5e7eb); }

.ai-style-text {
  font-size: 1rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional note box */
.ai-extra-note-wrap {
  margin-top: 6px;
  padding: 0 4px; /* matches the side padding of .ai-style-row */
}


.ai-extra-note-label {
  display: block;
  font-size: 1.5rem;
  opacity: 0.8;
  margin-bottom: 2px;
}

.ai-extra-note {
  width: 100%;
  min-height: 38px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 6px;
  font-size: 1rem;
  background: rgba(0,0,0,0.35);
}

/* Actions row under the note box */
.ai-transform-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.ai-transform-actions .btn {
  flex: 1 1 0;
  font-size: 0.85rem;
  padding: 6px 10px;

  background: rgba(0,0,0,0.3);
  color: inherit;
}


/* Transform dropdown overlay anchored under the top app bar */
.ai-transform-panel{
  position:fixed;
  left:0;
  right:0;
  top:var(--appbar-h);
  z-index:40; /* above canvas/cards, below modals */
  display:none;
  pointer-events:none;

  /* NEW: subtle strip so it feels like a drop-down sheet */
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0)
  );
}

/* Light theme: use the warm Daily palette */
html[data-theme="light"] .ai-transform-panel{
  background:linear-gradient(
    to bottom,
    rgba(255,242,212,0.9),
    rgba(255,242,212,0)
  );
}
/* Light mode: make Transform dropdown LABEL text readable (not the pill buttons) */
html[data-theme="dark"] #transformPanel .ai-style-label,
html[data-theme="dark"] #transformPanel .ai-style-tagline,
html[data-theme="dark"] #transformPanel .ai-extra-note-label{
  color:#000;
}

/* Optional: if they still look faint, bump opacity for the big labels */
html[data-theme="dark"] #transformPanel .ai-style-label,
html[data-theme="dark"] #transformPanel .ai-extra-note-label{
  opacity: 1;
}


.ai-transform-panel.open{
  display:block;
  pointer-events:auto;
}


.ai-transform-panel.open{
  display:block;
  pointer-events:auto;
}

.ai-transform-inner{
  margin:8px auto;
  max-width:960px;
  padding:10px 14px 12px;
  border-radius:20px;

  /* NEW: warm Etchlo card, similar to Daily/Hero */
  background:radial-gradient(
    circle at top left,
    rgba(255,242,212,0.97),
    rgba(233,239,248,0.98)
  );
  border:1px solid rgba(120,105,85,0.9); /* same border color as Daily buttons */
  box-shadow:0 18px 40px rgba(0,0,0,0.6);
}

/* Light theme keeps basically the same look */
html[data-theme="light"] .ai-transform-inner{
  background:radial-gradient(
    circle at top left,
    rgba(255,242,212,0.97),
    rgba(233,239,248,0.98)
  );
  border-color:rgba(120,105,85,0.9);
}


html[data-theme="light"] .ai-transform-inner{
  background:rgba(245,247,251,0.96);
  border-color:rgba(11,15,20,0.12);
}

/* Slightly tighten padding for style row when used inside the overlay */
.ai-transform-inner .ai-style-row{
  padding-top:0;
}

/* Full-screen style browser opened from the "More…" pill */
.style-modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 52;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.style-modal-backdrop.on {
  display: flex;
}

.style-modal {
  width: 100%;
  max-width: 480px;
  padding: 12px;
}

.style-modal-card {
  width: 100%;
  max-height: 80vh;
  padding: 16px 14px 12px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.style-modal-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.style-modal-sub {
  font-size: 0.85rem;
  opacity: 0.85;
}

.style-modal-grid {
  margin-top: 6px;
  padding-right: 4px;
  overflow-y: auto;
  max-height: 50vh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.style-modal-item {
  width: 100%;
  text-align: left;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.9);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}

html[data-theme="light"] .style-modal-item {
  background: rgba(248,250,252,0.96);
  border-color: rgba(15,23,42,0.16);
}

.style-modal-item-main {
  font-weight: 600;
}

.style-modal-item-hint {
  font-size: 0.78rem;
  opacity: 0.8;
}

.style-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* === MAIN DRAW SCREEN – full-height fade + matching bars === */

/* Make sure the draw screen provides a full backdrop */
#screenDraw{
  padding:0;
  position:relative;
}

/* Big backdrop between app bar and toolbar */
.canvas-host{
  position:fixed;
  top:calc(var(--appbar-h) + 8px);
  bottom:calc(var(--toolbar-h) + 8px);
  left:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;

  /* NEW: soft fade from both top + bottom, not flat black */
  background:
    radial-gradient(farthest-side at top center,
      rgba(6, 9, 18, 0.96),
      transparent 70%),
    radial-gradient(farthest-side at bottom center,
      rgba(6, 9, 18, 0.96),
      transparent 70%),
    linear-gradient(to bottom,
      #05070d,
      #090f1b);
  border-radius:20px;
}

/* Light theme version of the fade */
html[data-theme="light"] .canvas-host{
  background:
    radial-gradient(farthest-side at top center,
      rgba(255, 255, 255, 0.96),
      transparent 75%),
    radial-gradient(farthest-side at bottom center,
      rgba(255, 255, 255, 0.96),
      transparent 75%),
    linear-gradient(to bottom,
      #f5f7fb,
      #eaeff7);
}

/* Canvas "paper" card framed like the Daily/Store cards */
.canvas-wrap.card{
  padding:10px;
  border-radius:20px;
  background:radial-gradient(
    circle at top left,
    rgba(255,242,212,0.96),
    rgba(233,239,248,0.97)
  );
  border:1px solid rgba(120,105,85,0.9);
  box-shadow:0 20px 40px rgba(0,0,0,0.6);
  position:relative;
}

/* subtle “paper edge” under the canvas */
.canvas-wrap.card::before{
  content:"";
  position:absolute;
  inset:8px 12px;
  border-radius:18px;
  background:rgba(255,255,255,0.04);
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  pointer-events:none;
}

/* actual sketch area stays clean + neutral */
canvas#sketch{
  border-radius:16px;
  background:#ffffff;
  border:1px solid rgba(120,105,85,0.55);
  touch-action:none;
}

/* Light theme tweaks for the paper card */
html[data-theme="light"] .canvas-wrap.card{
  background:radial-gradient(
    circle at top left,
    rgba(255,242,212,0.98),
    rgba(245,247,251,0.98)
  );
}
html[data-theme="light"] canvas#sketch{
  border-color:rgba(15,23,42,0.16);
}

/* TOOLBAR + TOP BAR – share the same vibe */

.toolbar{
  background:linear-gradient(
    to top,
    rgba(11,15,23,0.97),
    rgba(11,15,23,0.90)
  );
  border-top:1px solid rgba(120,105,85,0.65);
  box-shadow:0 -12px 22px rgba(0,0,0,0.6);
}

html[data-theme="light"] .toolbar{
  background:linear-gradient(
    to top,
    rgba(255,242,212,0.98),
    rgba(233,239,248,0.98)
  );
  border-top:1px solid rgba(120,105,85,0.85);
}

/* Header bar matches toolbar styling */
header.appbar{
  background:linear-gradient(
    to bottom,
    rgba(11,15,23,0.97),
    rgba(11,15,23,0.90)
  );
  border-bottom:1px solid rgba(120,105,85,0.65);
  box-shadow:0 12px 22px rgba(0,0,0,0.6);
}

html[data-theme="light"] header.appbar{
  background:linear-gradient(
    to bottom,
    rgba(255,242,212,0.98),
    rgba(233,239,248,0.98)
  );
  border-bottom:1px solid rgba(120,105,85,0.85);
}

/* Tool buttons keep the warm pill feel */
.row-tools .btn{
  border-radius:999px;
  border:1px solid rgba(120,105,85,0.9);
  background:rgba(255,242,212,0.25);
  color:#fdfdfd;
  box-shadow:0 2px 0 rgba(0,0,0,0.2);
}
.row-tools .btn:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,0.2);
}
html[data-theme="light"] .row-tools .btn{
  color:#3b3327;
}

/* Active tool = same language as active palette / daily pills */
.row-tools .btn.tool-active{
  background:rgba(255,242,212,0.9)!important;
  color:#3b3327!important;
  outline:2px solid rgba(120,105,85,0.9);
}


/* --- PATCH v1.4.2: keep AI result buttons clickable above compare layer --- */
.ai-result-body{ position:relative; z-index:1; }
.ai-result-actions{ position:relative; z-index:2; }
.ai-result-actions .btn{ touch-action:manipulation; }

/* ---------- Draw screen: hide canvas until it's sized (prevents 1-frame flash) ---------- */
#screenDraw .canvas-host { overflow: hidden; }
#screenDraw .canvas-host::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
body.canvas-pending #screenDraw .canvas-host::after {
  opacity: 1;
  transition: none; /* no fade-in; fade-out happens when class is removed */
}
body.canvas-pending #screenDraw .canvas-wrap {
  opacity: 0;
  pointer-events: none;
}


/* Restore modal thumbnail */
.restore-thumb-wrap{
  width:100%;
  margin:12px 0 10px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
}
.restore-thumb{
  display:block;
  width:100%;
  max-height:240px;
  height:auto;
  object-fit:contain;
}
html[data-theme="light"] .restore-thumb-wrap{
  border:1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.65);
}