/* DOODLEBOB — paper, graphite, Bikini Bottom blue. */
:root{
  --ink:#12325f;            /* Bikini Bottom navy */
  --graphite:#2c2c2c;
  --paper:#fffdf3;
  --rule:#dfe7ef;
  --yellow:#ffdf3a;
  --yellow-d:#e5b800;
  --sky1:#6fd8ff;
  --sky2:#1c8fdc;
  --sea:#0d549e;
  --coral:#ff6f8d;
  --green:#3ecf8e;
  --shadow:0 10px 0 rgba(0,0,0,.16);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100%;
  font-family:"Fredoka","Baloo 2",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 12% -10%, rgba(255,255,255,.42), transparent 60%),
    linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 42%,var(--sea) 100%);
  background-attachment:fixed;
  padding:0 0 26px;
}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* bubbles of the sea */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(circle at 8% 84%, rgba(255,255,255,.55) 0 5px, transparent 6px),
    radial-gradient(circle at 22% 62%, rgba(255,255,255,.4) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 74%, rgba(255,255,255,.5) 0 6px, transparent 7px),
    radial-gradient(circle at 71% 22%, rgba(255,255,255,.35) 0 4px, transparent 5px),
    radial-gradient(circle at 46% 92%, rgba(255,255,255,.4) 0 4px, transparent 5px);
  animation:drift 22s linear infinite;
}
@keyframes drift{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:0 -300px,0 -420px,0 -260px,0 -520px,0 -380px}}

/* ── header ──────────────────────────────────────────────────────── */
header{position:relative;z-index:1;padding:20px 22px 12px;text-align:center}
.brand{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
h1{
  font-family:"Luckiest Guy",cursive;font-weight:400;letter-spacing:.03em;
  font-size:clamp(38px,7vw,74px);line-height:1;color:var(--yellow);
  -webkit-text-stroke:3px #12325f;paint-order:stroke fill;
  text-shadow:0 7px 0 rgba(0,0,0,.22);
}
.tag{font-family:"Caveat",cursive;font-weight:700;font-size:clamp(18px,3.2vw,30px);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.sub{margin-top:5px;color:#eaf7ff;font-size:clamp(13px,2vw,17px);font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.pencil-badge{position:absolute;right:18px;top:16px;font-size:26px;transform:rotate(14deg);animation:pfloat 3.4s ease-in-out infinite}
@keyframes pfloat{50%{transform:rotate(-8deg) translateY(-8px)}}

/* ── layout ──────────────────────────────────────────────────────── */
main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;max-width:1500px;margin:8px auto 0;padding:0 18px}
.pane{min-width:0}
.panel{
  background:rgba(255,253,243,.97);border:4px solid var(--ink);border-radius:20px;
  box-shadow:var(--shadow);padding:14px;height:100%;display:flex;flex-direction:column;gap:12px;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel-head h2{font-family:"Baloo 2",cursive;font-weight:800;font-size:20px;letter-spacing:.02em}
.templates{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tl{font-size:13px;opacity:.7;font-weight:500}
.tpl{
  font-family:"Patrick Hand",cursive;font-size:16px;background:#fff;color:var(--graphite);
  border:2.5px solid var(--graphite);border-radius:255px 14px 225px 14px/14px 225px 14px 255px;
  padding:4px 12px;cursor:pointer;transition:transform .12s,background .12s,box-shadow .12s;
}
.tpl:hover{background:var(--yellow);transform:translateY(-2px) rotate(-1deg);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.tpl:active{transform:translateY(0)}

/* ── the paper ───────────────────────────────────────────────────── */
#paper-wrap{width:100%;display:flex;justify-content:center}
#paper{
  position:relative;width:min(100%,max(360px,calc((100vh - 452px) * 4 / 3)));aspect-ratio:4/3;
  border:3px solid var(--graphite);border-radius:8px;
  background-color:var(--paper);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px);
  background-size:100% 5.2%;
  box-shadow:inset 0 0 40px rgba(180,170,140,.22),0 6px 0 rgba(0,0,0,.12);
  overflow:hidden;
}
#paper::after{ /* margin line, like real paper */
  content:"";position:absolute;left:7%;top:0;bottom:0;width:1px;background:rgba(255,120,120,.35);
}
#pad{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}
#paper.tool-text #pad{cursor:text}
#paper.tool-eraser #pad{cursor:cell}
#paper-hint{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:"Patrick Hand",cursive;
  font-size:15px;color:#a89f88;pointer-events:none;transition:opacity .3s;
}
#paper.dirty #paper-hint{opacity:0}
#text-entry{
  position:absolute;font-family:"Patrick Hand",cursive;font-size:20px;color:var(--graphite);
  background:rgba(255,255,255,.9);border:2px dashed var(--graphite);border-radius:6px;padding:2px 6px;
  outline:none;min-width:130px;z-index:3;
}

/* ── toolbar ─────────────────────────────────────────────────────── */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tgroup{display:flex;gap:6px;background:#eef3f8;border:2.5px solid var(--ink);border-radius:14px;padding:5px}
.tool{
  display:flex;align-items:center;gap:5px;font-family:"Fredoka",sans-serif;font-size:13px;font-weight:600;
  background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:5px 9px;cursor:pointer;
  transition:transform .1s,background .12s;
}
.tool b{font-weight:600}
.tool:hover{background:var(--yellow)}
.tool.on{background:var(--yellow);box-shadow:inset 0 -3px 0 var(--yellow-d)}
.tool:active{transform:translateY(2px)}
.widths .w{width:34px;height:30px;display:grid;place-items:center;background:#fff;border:2px solid var(--ink);border-radius:10px;cursor:pointer}
.widths .w i{display:block;width:18px;background:var(--graphite);border-radius:99px}
.widths .w.on{background:var(--yellow);box-shadow:inset 0 -3px 0 var(--yellow-d)}

/* ── controls ────────────────────────────────────────────────────── */
.controls{display:flex;gap:8px;flex-wrap:wrap}
#hint{
  flex:1 1 240px;min-width:0;font-family:"Fredoka",sans-serif;font-size:14px;color:var(--ink);
  background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:9px 12px;outline:none;
}
#hint:focus{box-shadow:0 0 0 3px rgba(255,223,58,.75)}
#hint::placeholder{color:#9fb0c4}
.style-toggle{display:flex;background:#eef3f8;border:2.5px solid var(--ink);border-radius:12px;padding:4px;gap:4px}
.style-toggle button{
  font-family:"Fredoka",sans-serif;font-size:13px;font-weight:600;color:var(--ink);background:#fff;
  border:2px solid var(--ink);border-radius:9px;padding:5px 13px;cursor:pointer;transition:background .12s;
}
.style-toggle button:hover{background:#fff4b8}
.style-toggle button.on{background:var(--yellow);box-shadow:inset 0 -3px 0 var(--yellow-d)}

.bring{
  width:100%;font-family:"Luckiest Guy",cursive;font-size:clamp(19px,3vw,28px);letter-spacing:.04em;
  color:var(--ink);background:linear-gradient(180deg,#ffe967,var(--yellow));
  border:4px solid var(--ink);border-radius:16px;padding:12px 10px;cursor:pointer;
  box-shadow:0 7px 0 var(--yellow-d),0 12px 18px rgba(0,0,0,.22);
  transition:transform .1s,box-shadow .1s,filter .15s;
}
.bring .mp{display:inline-block;transform:rotate(-18deg);margin-right:4px}
.bring:hover{filter:brightness(1.06)}
.bring:active{transform:translateY(5px);box-shadow:0 2px 0 var(--yellow-d)}
.bring[disabled]{filter:grayscale(.55) brightness(.95);cursor:progress;box-shadow:0 3px 0 var(--yellow-d)}
.status{font-size:13px;text-align:center;color:#4e6787;min-height:18px;font-weight:500}
.status.err{color:#c02b3f;font-weight:600}

/* ── device / result ─────────────────────────────────────────────── */
.meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#4e6787;font-weight:500}
.thumb{width:44px;height:33px;object-fit:cover;background:#fff;border:2px solid var(--graphite);border-radius:4px}
#device{
  flex:1;min-height:0;display:flex;flex-direction:column;
  background:#0e2a4d;border:4px solid var(--ink);border-radius:16px;overflow:hidden;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.08);
}
#device .bar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:linear-gradient(180deg,#20456f,#173556);flex:0 0 auto}
#device .d{width:11px;height:11px;border-radius:50%;display:block}
#device .d.r{background:#ff5f57}#device .d.y{background:#febc2e}#device .d.g{background:#28c840}
#device .url{
  flex:1;margin-left:6px;background:rgba(255,255,255,.14);border-radius:99px;padding:3px 12px;
  color:#cfe6ff;font-size:12px;font-family:"Fredoka",sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
#device .lock{font-size:11px;opacity:.8}
#device .screen{position:relative;flex:1;min-height:340px;background:#fff;overflow:hidden}
.state{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s;border:0;width:100%;height:100%}
.state.on{opacity:1;pointer-events:auto}
iframe#result-frame{background:#fff}

/* empty state */
#state-empty{display:grid;place-items:end center;background:linear-gradient(180deg,#e9f7ff,#c9ecff);padding:0 10px 0}
.sb-holder{position:relative;height:min(64%,330px);align-self:end;animation:bob 3.2s ease-in-out infinite}
#state-empty .sb-sprite{height:100%;filter:drop-shadow(0 14px 12px rgba(0,0,0,.22))}
.magic-pencil{
  position:absolute;left:-2%;top:26%;font-size:clamp(30px,6vw,54px);transform:rotate(-42deg);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 4px 5px rgba(0,0,0,.28));
  animation:sparkle 2.6s ease-in-out infinite;
}
@keyframes sparkle{50%{transform:rotate(-52deg) scale(1.08)}}
@keyframes bob{50%{transform:translateY(-10px) rotate(1.5deg)}}
.empty-note{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:13px;color:#2d5c80;font-weight:600;
  text-shadow:0 0 7px #fff,0 0 12px #fff,0 0 16px #fff,0 1px 0 #fff}
.sprite{display:block;width:auto;user-select:none;-webkit-user-drag:none}
.bubble{
  position:absolute;max-width:64%;background:#fffdf3;border:3px solid var(--ink);border-radius:18px;
  padding:9px 14px;font-family:"Patrick Hand",cursive;font-size:clamp(14px,2vw,19px);line-height:1.2;
  color:var(--ink);box-shadow:0 5px 0 rgba(0,0,0,.14);z-index:4;
}
.bubble::after{content:"";position:absolute;bottom:-15px;left:28px;border:11px solid transparent;border-top:14px solid var(--ink);border-bottom:0}
.bubble::before{content:"";position:absolute;bottom:-9px;left:32px;border:7px solid transparent;border-top:10px solid #fffdf3;border-bottom:0;z-index:1}
.bubble.sb{left:6%;top:8%}

/* loading state */
#state-load{overflow:hidden}
.paper-bg{
  position:absolute;inset:0;background-color:var(--paper);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 26px;
}
.doodlebob{position:absolute;left:7%;bottom:6%;height:54%;z-index:3;animation:dbwalk 5.5s steps(9,end) infinite}
.doodlebob img{
  display:block;height:100%;width:auto;
  filter:url(#pencilize) grayscale(1) contrast(2.1) brightness(1.12) blur(.4px)
         drop-shadow(1.2px 0 0 #2c2c2c) drop-shadow(-1.2px 0 0 #2c2c2c)
         drop-shadow(0 1.2px 0 #2c2c2c) drop-shadow(0 -1.2px 0 #2c2c2c);
  opacity:.94;
}
.doodlebob .tex{ /* graphite hatching, clipped to his silhouette */
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  -webkit-mask:url("assets/01-spongebob.png") center/contain no-repeat;
  mask:url("assets/01-spongebob.png") center/contain no-repeat;
  background-image:repeating-linear-gradient(48deg,rgba(40,40,40,.55) 0 1px,transparent 1px 4px),
                   repeating-linear-gradient(-38deg,rgba(40,40,40,.35) 0 1px,transparent 1px 6px);
}
@keyframes dbwalk{
  0%{transform:translate(0,0) rotate(-3deg) scaleX(1)}
  20%{transform:translate(55%,-8px) rotate(4deg) scaleX(1)}
  40%{transform:translate(130%,4px) rotate(-5deg) scaleX(1)}
  50%{transform:translate(150%,0) rotate(2deg) scaleX(-1)}
  70%{transform:translate(80%,-10px) rotate(-4deg) scaleX(-1)}
  90%{transform:translate(20%,6px) rotate(5deg) scaleX(-1)}
  100%{transform:translate(0,0) rotate(-3deg) scaleX(1)}
}
.db-bubble{left:4%;top:6%;background:#fff;border-color:var(--graphite);color:var(--graphite);border-style:solid;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;font-size:clamp(15px,2.3vw,22px);max-width:70%}
.db-bubble::after{border-top-color:var(--graphite)}
.db-bubble::before{border-top-color:#fff}
.heckler{position:absolute;right:1%;bottom:2%;width:min(31%,190px);z-index:2}
.heckler .pat-sprite{width:100%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.2))}
.pat-bubble{position:relative;left:auto;top:auto;margin:0 0 6px auto;max-width:100%;background:#ffe6ef;font-size:clamp(12px,1.8vw,16px)}
.pat-bubble::before{border-top-color:#ffe6ef}
.squid{position:absolute;left:0;top:34%;width:min(26%,150px);z-index:2;opacity:0;transition:opacity .5s;transform:translateX(-14%)}
.squid.on{opacity:1}
.squid .squid-sprite{width:100%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.2))}
.squid-bubble{position:relative;left:auto;top:auto;margin:0 auto 6px;max-width:100%;background:#e8f6ec;font-size:clamp(11px,1.7vw,15px)}
.squid-bubble::before{border-top-color:#e8f6ec}
.progress{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(44,44,44,.12);z-index:5}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),#ffb037);transition:width .8s linear}

/* ── actions ─────────────────────────────────────────────────────── */
.actions{display:flex;gap:7px;flex-wrap:wrap}
.actions button{
  font-family:"Fredoka",sans-serif;font-size:13px;font-weight:600;color:var(--ink);background:#fff;
  border:2.5px solid var(--ink);border-radius:11px;padding:7px 11px;cursor:pointer;transition:transform .1s,background .12s;
}
.actions button:hover{background:var(--yellow);transform:translateY(-2px)}
.actions button:active{transform:translateY(1px)}
.actions button.danger{border-color:#c02b3f;color:#c02b3f}
.actions button.danger:hover{background:#ffd9df}

footer{position:relative;z-index:1;text-align:center;margin-top:20px;color:#dff2ff;font-size:13px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* ── mobile ──────────────────────────────────────────────────────── */
#mobile-switch{display:none;gap:8px;justify-content:center;padding:6px 18px 2px;position:relative;z-index:1}
#mobile-switch button{
  font-family:"Baloo 2",cursive;font-weight:800;font-size:15px;color:var(--ink);background:rgba(255,253,243,.9);
  border:3px solid var(--ink);border-radius:999px;padding:6px 16px;cursor:pointer;
}
#mobile-switch button.on{background:var(--yellow);box-shadow:0 4px 0 var(--yellow-d)}

@media (max-width:900px){
  main{grid-template-columns:1fr;gap:12px;padding:0 12px}
  #mobile-switch{display:flex}
  .pane{display:none}
  .pane.show{display:block}
  #device .screen{min-height:min(74vh,520px)}
  #paper{width:100%}
  .panel{padding:11px}
  header{padding:14px 16px 8px}
  .pencil-badge{display:none}
  .templates{width:100%}
}
@media (min-width:901px){ .pane{display:block!important} }
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}