/* Dropworld Create. Builds on shared.css + dash.css tokens. Phone-first, 44px controls. */
body.playing{padding:0;overflow:hidden}
body.playing #app{visibility:hidden}
.wrap{max-width:1040px}
.panel{display:grid;gap:16px;min-width:0}
.panel>*{min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spread{justify-content:space-between}
.stack{display:grid;gap:16px;align-content:start;min-width:0}
textarea.ta{min-height:96px;resize:vertical;width:100%;flex:none}
select.sel{flex:1 1 140px}
.card summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;list-style-position:inside}
.card summary .note{font-weight:400;font-family:var(--body)}
/* tabs */
.tabs3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tab{display:grid;gap:2px;align-content:center;min-height:56px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--muted);text-decoration:none;text-align:center}
.tab b{font-family:var(--display);font-size:1.05rem;color:var(--fg)}
.tab span{font-size:.7rem;line-height:1.2}
.tab[aria-selected="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--panel-2)}
.tab:focus-visible{outline:2px solid var(--dusk);outline-offset:2px}
/* chips + preview + plan (from v1) */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:500 .8rem var(--body);padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);cursor:pointer;min-height:44px}
.chip:focus-visible,.pal button:focus-visible,.dpad button:focus-visible{outline:2px solid var(--dusk);outline-offset:2px}
.preview{aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;background:#0a0d13;border:1px solid var(--line);position:relative}
.preview canvas{width:100%;height:100%;display:block}
.plan{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plan div{background:var(--panel-2);border-radius:10px;padding:8px 10px;min-width:0}
.plan b{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan span{font-weight:600;overflow-wrap:anywhere}
.editbar{font-size:.84rem;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.editbar .bar{flex:1 1 120px}
/* AI layout */
.aigrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.aigrid .card{align-content:start}
@media (min-width:900px){
  .aigrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"pv chat" "file chat" "hist chat" "gate chat";align-items:start}
  .s-preview{grid-area:pv}.s-chat{grid-area:chat;position:sticky;top:90px}.s-file{grid-area:file}.s-hist{grid-area:hist}.s-gate{grid-area:gate}
  .chatlog{max-height:420px}
}
.chatlog{display:grid;gap:10px;max-height:340px;overflow-y:auto;padding:4px 2px;align-content:start;min-height:120px;overscroll-behavior:contain}
.msg{max-width:94%;padding:10px 12px;border-radius:14px;font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere;display:grid;gap:8px}
.msg.you{justify-self:end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.msg.bot{justify-self:start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.bot.refuse{border-color:var(--bad)}
.msg .who{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.chatform{display:flex;gap:8px}
.chatform .input{flex:1 1 auto}
.diff{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px;white-space:normal}
.diff.done{opacity:.6}
.drow{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-family:var(--mono);font-size:.78rem;align-items:baseline}
.drow .k{color:var(--muted)}
.drow .v{overflow-wrap:anywhere}
.drow .old{color:var(--bad);text-decoration:line-through;margin-right:6px}
.drow .new{color:var(--good)}
.diff pre,.json{margin:0;font:500 .74rem/1.5 var(--mono);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;max-width:100%;white-space:pre}
.json{max-height:320px}
.diff details summary{min-height:44px;font:600 .8rem var(--body);display:flex;align-items:center}
.hist{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.hist li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:.84rem;min-width:0}
.hist li.head{border-color:var(--accent)}
.hist .v{font-family:var(--mono);color:var(--accent)}
.hist .by{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.hist .lab{overflow-wrap:anywhere;min-width:0}
/* gate */
.check{display:grid;gap:10px}
.check>div{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check i,.pi{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.72rem;font-weight:700;background:var(--panel-2);flex:0 0 auto;margin-top:1px}
.check i.ok,.pi.ok{background:var(--good);color:#06301a}.check i.warn,.pi.warn,.check i.fail,.pi.fail{background:var(--accent);color:var(--accent-ink)}.check i.fail,.pi.fail{background:var(--bad);color:#fff}.check i.wait,.pi.wait{color:var(--muted)}
.check .t{display:block;font-weight:600}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--panel-2);border-radius:10px;padding:8px 10px;font-family:var(--mono);font-size:.78rem;min-width:0}
.linkbox span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
/* basic */
.basicgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.basicgrid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:520px){.palette{grid-template-columns:repeat(5,1fr)}}
.pal button,.palette button{min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);font:600 .78rem var(--body);display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:pointer}
.palette button[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.palette button i{width:18px;height:18px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.25)}
.gridwrap{display:grid;place-items:center}
#bs-grid{width:100%;max-width:480px;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background:#0a0d13;touch-action:none;display:block;cursor:crosshair}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:grid;gap:4px;font-size:.82rem;color:var(--muted);min-width:0}
.fld .input{color:var(--fg);flex:none;width:100%}
.fld.wide,.rules .fld:nth-child(1),.rules .fld:nth-child(2){grid-column:1/-1}
.problems{display:grid;gap:8px}
.problems .pr{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;background:var(--panel-2);border-radius:10px;padding:8px 10px}
.problems .pr.error{border-left:3px solid var(--bad)}.problems .pr.warn{border-left:3px solid var(--accent)}.problems .pr.ok{border-left:3px solid var(--good)}
#bplay{position:fixed;inset:0;z-index:60;background:var(--bg);display:none;grid-template-rows:auto 1fr auto auto;justify-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(12px + env(safe-area-inset-bottom,0px));overflow:auto}
#bplay.on{display:grid}
.bhud{width:100%;max-width:480px;display:grid;grid-template-columns:1fr 1fr 1fr;color:var(--fg)}
.bhud .sm{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bhud .bv{font:800 clamp(1rem,4.6vw,1.5rem) var(--display);line-height:1.1;overflow-wrap:anywhere}
#bp-canvas{width:min(100%,calc(100vh - 330px),480px);min-width:240px;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background:#0a0d13;touch-action:none;align-self:center}
.dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-areas:". up ." "left . right" ". down .";gap:6px;justify-content:center}
.dpad button{width:64px;height:56px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);font-size:1.2rem;touch-action:none;cursor:pointer;user-select:none}
.dpad button[data-d=up]{grid-area:up}.dpad button[data-d=left]{grid-area:left}.dpad button[data-d=right]{grid-area:right}.dpad button[data-d=down]{grid-area:down}
.dpad button.hold{background:var(--accent);color:var(--accent-ink)}
.bq{width:100%;max-width:480px;justify-content:space-between}
@media (hover:hover) and (pointer:fine) and (min-height:760px){.dpad{opacity:.9}}
/* pro */
.pipe{margin:0;padding-left:1.2rem;display:grid;gap:6px;font-size:.9rem}
.progrid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.progrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.dropzone{display:grid;gap:4px;justify-items:center;text-align:center;padding:22px 14px;min-height:96px;border:2px dashed var(--line);border-radius:14px;background:var(--panel-2);cursor:pointer;align-content:center}
.dropzone span{font-size:.82rem;color:var(--muted)}
.dropzone.over,.dropzone:focus-within{border-color:var(--accent)}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0}
.verdict{font:800 1.2rem var(--display);padding:12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.verdict[data-state=pass]{border-color:var(--good);color:var(--good)}.verdict[data-state=prop]{border-color:var(--accent);color:var(--accent)}.verdict[data-state=fail]{border-color:var(--bad);color:var(--bad)}
.checks{display:grid;gap:10px}
.crow{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;min-width:0}
.crow>div{min-width:0;overflow-wrap:anywhere}
.crow .t{font-weight:600;display:block}
.crow .fix{color:var(--muted);font-size:.8rem;display:block}
.animlist{display:flex;gap:6px;flex-wrap:wrap}
/* sheet */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:grid;place-items:end center;padding:16px}
@media (min-width:640px){.sheet{place-items:center}}
.sheet-box{background:var(--panel);border:1px solid var(--accent);border-radius:18px;padding:20px;display:grid;gap:12px;max-width:440px;width:100%}
/* play (v1) */
#play{position:fixed;inset:0;background:#000;display:none;z-index:50}
#play.on{display:block}
#play canvas{width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-left,0px)) 0 max(14px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;color:#fff;font-family:var(--display);text-shadow:0 2px 8px #000}
.hud .big{font-size:1.9rem;font-weight:800;line-height:1}
.hud .sm{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.hud button{pointer-events:auto;font:600 .8rem var(--body);background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:8px 12px;min-height:44px}
.stick{position:absolute;left:max(24px,env(safe-area-inset-left,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);touch-action:none}
.stick .nub{position:absolute;left:38px;top:38px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.55)}
.sprint{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(40px + env(safe-area-inset-bottom,0px));width:84px;height:84px;border-radius:50%;background:rgba(243,155,51,.75);border:none;color:#1a1000;font:800 .8rem var(--display);touch-action:none}
.end{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.55);color:#fff;text-align:center;padding:20px;z-index:5}
.end.on{display:grid}
.end .box{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:12px;max-width:340px;width:100%}
.end .score{font:800 3rem var(--display);line-height:1}
@media (hover:hover) and (pointer:fine){.stick,.sprint{display:none}}
.ctlhint{position:absolute;left:50%;bottom:calc(170px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 32px);background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 14px;font:500 .8rem var(--body);text-align:center;opacity:0;transition:opacity .3s;pointer-events:none}
.ctlhint.on{opacity:1}
@media (min-width:721px){.ctlhint{bottom:28px}}
/* pre-build questions */
.quiz{gap:14px}
.quiz h2{margin:0;outline:none}
.qf{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.qf legend{font:600 .9rem var(--body);margin-bottom:8px;padding:0}
.qf[disabled]{opacity:.5}
.qcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.qcard{display:grid;gap:4px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg);cursor:pointer;min-height:44px;font:400 .82rem/1.4 var(--body)}
.qcard b{font:700 .95rem var(--display)}
.qcard span{color:var(--muted)}
.qcard[aria-pressed="true"],.chip[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel-2))}
.chip[aria-pressed="true"]{color:var(--fg);font-weight:600}
.qcard.multi[aria-pressed="true"] b::before{content:"\2713  ";color:var(--accent)}
.qcard:focus-visible{outline:2px solid var(--dusk);outline-offset:2px}
[data-typed="1"]::after{content:" \2022";color:var(--accent)}
.qcard[data-typed="1"]::after{content:none}
.qcard[data-typed="1"] b::after{content:" \2022";color:var(--accent)}
.qdots{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.qdots li{width:28px;height:4px;border-radius:2px;background:var(--line)}
.qdots li.done{background:color-mix(in srgb,var(--accent) 55%,var(--line))}
.qdots li.now{background:var(--accent)}
.btn.sm{min-height:44px;padding:8px 12px;font-size:.8rem}
.qsum{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.qsum dt{font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.qsum dd{margin:0;font-size:.88rem;min-width:0}