html,body{overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{position:relative;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.screen{position:absolute;inset:0;display:flex;min-height:0}
.screen[hidden]{display:none !important}

.btn{appearance:none;border:2px solid var(--ink);background:none;min-height:60px;padding:0 26px;font-weight:700;font-size:clamp(16px,1.8vmin,20px);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;border-radius:0}
.btn.cond{font-size:clamp(22px,2.8vmin,32px);font-weight:900;padding-top:3px}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:disabled{background:var(--grey);border-color:#CFCFCF;color:#8A8A8A;cursor:not-allowed}
.btn-line{background:#fff}
.btn-white{background:#fff;border-color:#fff;color:var(--ink);min-height:72px;padding:0 36px}

/* ============================ Cover ============================ */
#cover{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(20px,3vmin,48px);padding:clamp(24px,3.6vmin,56px)}
.cover-left{display:flex;flex-direction:column;min-height:0}
.cover-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.year{font-family:var(--display);font-weight:800;font-size:clamp(84px,17vmin,240px);line-height:.8;letter-spacing:-.065em;margin:0 0 .12em -.04em}
.cover-sub{font-size:clamp(18px,2.4vmin,30px);line-height:1.15;margin:0 0 clamp(14px,2.4vmin,32px);font-weight:400}
.cover-sub span{font-weight:300;color:#222}
.pick-label{margin:0;padding-top:10px;border-top:2px solid var(--ink);color:var(--red);font-weight:500;font-size:clamp(14px,1.7vmin,19px)}
.world-list{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:8px}
.world{appearance:none;background:none;border:0;border-bottom:1px solid var(--ink);text-align:left;padding:clamp(8px,1.3vmin,16px) 0;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;flex:1;max-height:150px;touch-action:manipulation}
.world-title{font-size:clamp(26px,4vmin,54px);grid-column:1;transition:color .3s}
.world-blurb{grid-column:1;font-size:clamp(13px,1.55vmin,18px);line-height:1.3;margin-top:3px;color:#222}
.world.own .go{background:var(--ink)}
.world.own .world-title{color:var(--ink)}
.world .go{grid-column:2;grid-row:1/3;width:clamp(44px,5vmin,60px);height:clamp(44px,5vmin,60px);border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.world .go svg{width:50%;height:50%}
.world.is-showing .world-title{color:var(--red)}
.world:active{background:var(--grey)}
.world:focus-visible{outline-offset:-3px}

.cover-right{display:flex;flex-direction:column;justify-content:center;min-height:0;min-width:0;container-type:size}
.showcase{width:min(100cqw,calc((100cqh - 48px) * 16 / 9));border:2px solid var(--ink)}
.showcase .scene,.showcase .items{transition:opacity .6s ease}
.showcase.fading .scene,.showcase.fading .items{opacity:0}
.showcase-cap{margin:12px 0 0;font-size:clamp(14px,1.6vmin,18px);color:var(--muted)}
.op-corner{position:absolute;left:0;top:0;width:90px;height:90px;opacity:0;border:0;background:none;padding:0}

/* ============================ Build ============================ */
#build{flex-direction:column}
.navbar{display:flex;align-items:center;gap:clamp(14px,2vmin,28px);padding:clamp(14px,2vmin,24px) clamp(20px,3vmin,44px) clamp(12px,1.6vmin,20px);border-bottom:2px solid var(--ink);margin:0 clamp(20px,3vmin,44px) clamp(14px,2vmin,24px);padding-left:0;padding-right:0}
.nav-back{appearance:none;border:0;background:none;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:clamp(15px,1.7vmin,19px);cursor:pointer;min-height:48px;padding:0}
.nav-back .circ{width:44px;height:44px;border-radius:50%;background:#8C8C8C;color:#fff;display:grid;place-items:center}
.nav-back .circ svg{width:22px;height:22px}
.crumb{display:flex;flex-direction:column;font-size:clamp(14px,1.55vmin,17px);line-height:1.25;padding-left:clamp(14px,2vmin,28px);border-left:1px solid var(--ink)}
.crumb span{color:var(--red)}
.nav-q{flex:1;margin:0;font-size:clamp(26px,3.6vmin,46px);text-align:right}

.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,25vw,440px);gap:clamp(16px,2vmin,28px);padding:0 clamp(20px,3vmin,44px) clamp(20px,3vmin,40px)}
.stage-wrap{container-type:size;min-height:0;min-width:0;display:grid;place-items:center}
.stage{position:relative;width:min(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16/9;overflow:hidden;container-type:inline-size;border:2px solid var(--ink);background:var(--sky);touch-action:none}
.placed{position:absolute;width:10cqw;aspect-ratio:1;padding:0;border:0;background:none;transform-origin:50% 50%;touch-action:none;cursor:grab}
.placed img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}
.placed svg,.placed img{width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.placed.sel::after{content:"";position:absolute;inset:-10%;border:3px dashed var(--red);border-radius:50%;pointer-events:none;background:rgba(255,255,255,.12)}
.placed:focus-visible{outline:none}
.placed:focus-visible::after{content:"";position:absolute;inset:-10%;border:3px solid var(--red);border-radius:50%}
.placed.pop svg{animation:pop .32s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}

.empty-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--ink);padding:16px 24px;font-weight:600;font-size:clamp(15px,1.6cqw,22px);pointer-events:none;white-space:nowrap}
.empty-hint .asterisk{font-size:20px}
.toolbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;background:#fff;border:2px solid var(--ink);z-index:9999}
.toolbar button{appearance:none;border:0;border-right:1px solid var(--ink);background:none;min-width:70px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:13px;font-weight:600;cursor:pointer;padding:4px 10px}
.toolbar button:last-child{border-right:0}
.toolbar button:active{background:var(--grey)}
.toolbar svg{width:22px;height:22px}
.toolbar .danger{color:var(--red)}
.bin{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;background:#fff;border:2px dashed var(--ink);padding:16px 22px;font-weight:700;z-index:9999;transition:transform .15s,background .15s;pointer-events:none}
.bin svg{width:26px;height:26px}
.bin.hot{background:var(--red);border:2px solid var(--red);color:#fff;transform:scale(1.08)}
.stage:not(.dragging) .bin{display:none}
.stage.dragging .toolbar{display:none}
.toolbar[hidden],.empty-hint[hidden]{display:none}

.tray{display:flex;flex-direction:column;min-height:0;border-top:6px solid var(--ink);padding-top:clamp(10px,1.4vmin,16px)}
.tray h2{font-size:clamp(32px,4.4vmin,56px);margin:0}
.tray .hint{margin:.5em 0 1em;color:var(--red);line-height:1.35;font-size:clamp(14px,1.55vmin,17px)}
.kit{touch-action:pan-y;flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(clamp(96px,11vmin,140px),1fr);align-content:start;border-top:1px solid var(--ink);border-left:1px solid var(--ink);overflow-y:auto;overscroll-behavior:contain}
.kit.many{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
.kit.many .kit-btn{height:clamp(96px,11vmin,130px)}
.kit-group{grid-column:1/-1;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--grey);font-weight:700;font-size:14px;line-height:1;padding:0 10px;height:36px;min-height:36px;display:flex;align-items:center}
.kit-btn.draw{background:var(--sky);color:var(--ink)}
.kit-btn.draw .plus{flex:1 1 0;min-height:0;display:grid;place-items:center}
.kit-btn.draw .plus span{width:clamp(44px,5.4vmin,64px);aspect-ratio:1;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.kit-btn.draw .plus svg{width:55%;height:55%;max-height:none}
.kit-btn img{flex:1 1 0;min-height:0;width:100%;max-height:116px;object-fit:contain;pointer-events:none}
.kit-btn{appearance:none;overflow:hidden;border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;min-height:88px;font-weight:600;font-size:clamp(13px,1.4vmin,16px);text-align:center;line-height:1.15;touch-action:none;cursor:grab}
.kit-btn svg{flex:1 1 0;min-height:0;width:100%;max-height:116px}
.kit-btn:active{background:var(--sky)}
.actions{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:14px}
.ghost{position:fixed;pointer-events:none;z-index:100;transform:translate(-50%,-50%) scale(1.06)}
.ghost img{width:100%;height:100%;object-fit:contain}
.ghost svg,.ghost img{width:100%;height:100%;filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 14px 16px rgba(0,0,0,.35))}

/* ============================ Done ============================ */
#done{background:var(--charcoal);color:#fff}
#done :focus-visible{outline-color:#fff}
.done-inner{flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vmin,72px);align-items:center;padding:clamp(28px,5vmin,80px)}
.print{background:#fff;padding:clamp(10px,1.4vmin,18px);transform:rotate(-2.5deg);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.print .pic{border:2px solid var(--ink)}
.done-head{font-family:var(--display);font-weight:800;font-size:clamp(40px,7vmin,96px);line-height:1;letter-spacing:-.03em;margin:0;transform:rotate(-4deg);transform-origin:left bottom;max-width:9ch}
.dots{height:4px;margin:clamp(22px,3.6vmin,44px) 0;background-image:radial-gradient(circle,#fff 1.6px,transparent 2px);background-size:12px 4px;background-repeat:repeat-x}
.done-text{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.5vmin,30px);line-height:1.25;margin:0 0 .7em;max-width:24ch}
.done-small{font-size:clamp(15px,1.8vmin,20px);line-height:1.4;margin:0 0 1.6em;max-width:32ch;opacity:.85}
.signoff{display:flex;align-items:center;gap:18px;font-family:var(--display);font-weight:700;font-size:clamp(15px,1.8vmin,20px);line-height:1.15;margin-bottom:clamp(20px,3vmin,40px)}
.countdown{margin:14px 0 0;opacity:.7;font-size:15px}

dialog{border:2px solid var(--ink);border-radius:0;padding:30px;max-width:min(90vw,560px);background:#fff;color:var(--ink)}
dialog::backdrop{background:rgba(17,17,17,.55)}
dialog h3{font-size:44px;margin:0 0 .3em}
dialog p{margin:0 0 24px;font-size:18px;line-height:1.4}
dialog .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.op-info{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 24px;font-size:16px}
.op-info dt{font-weight:700}
.op-info dd{margin:0}

@media (max-width:900px),(orientation:portrait){
  html,body{overflow:auto}
  .screen{position:relative;min-height:100%;overflow:visible}
  #cover{grid-template-columns:1fr}
  .cover-right{container-type:normal}
  .showcase{width:100%}
  .navbar{flex-wrap:wrap}
  .nav-q{display:none}
  .layout{grid-template-columns:1fr}
  .stage-wrap{height:min(56vw,60vh)}
  .kit{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
  .kit-btn svg{flex:none;height:64px}
  .done-inner{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .placed.pop svg{animation:none}
  .showcase .scene,.showcase .items{transition:none}
}

/* ============================ Logos ============================ */
.cover-logo{width:clamp(110px,12vmin,170px);margin-top:8px}
.nav-logo{width:clamp(90px,8.5vmin,124px)}
.signoff-logo{width:clamp(96px,9vmin,130px)}

/* ============================ Makers ============================ */
dialog.maker{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;padding:clamp(18px,2.6vmin,40px);display:none;flex-direction:column;gap:clamp(10px,1.6vmin,20px);background:#fff;overflow:hidden}
dialog.maker[open]{display:flex}
dialog.maker::backdrop{background:#fff}
.maker-head{display:flex;align-items:baseline;gap:28px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.maker-head h2{font-size:clamp(34px,5vmin,64px);margin:0;white-space:nowrap}
.maker-head p{margin:0;color:var(--red);font-size:clamp(15px,1.8vmin,20px);line-height:1.35}
.maker-body{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) clamp(400px,30vw,580px);gap:clamp(16px,2.2vmin,32px)}
.canvas-wrap{container-type:size;min-width:0;min-height:0;display:grid;place-items:center}
.canvas-wrap canvas{display:block;border:2px solid var(--ink);background:#fff;cursor:crosshair}
.canvas-wrap.is-square canvas{width:min(100cqw,100cqh);height:auto;aspect-ratio:1}
.canvas-wrap.is-wide canvas{width:min(100cqw,calc(100cqh * 16 / 9));height:auto;aspect-ratio:16/9}
.paper-check{background-color:#fff;background-image:linear-gradient(45deg,#F1F1F1 25%,transparent 25%,transparent 75%,#F1F1F1 75%),linear-gradient(45deg,#F1F1F1 25%,transparent 25%,transparent 75%,#F1F1F1 75%);background-size:32px 32px;background-position:0 0,16px 16px}

.tools{display:flex;flex-direction:column;gap:10px;width:clamp(150px,13vmin,190px);min-height:0;overflow-y:auto}
.tool-label{font-weight:700;font-size:13px;margin:4px 0 0}
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tool-row.two{grid-template-columns:repeat(2,1fr)}
.tool-btn{appearance:none;border:2px solid var(--ink);background:#fff;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:600;cursor:pointer;padding:4px}
.tool-btn svg{width:22px;height:22px}
.tool-btn.on{background:var(--ink);color:#fff}
.tool-btn:disabled{opacity:.35}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.swatch{appearance:none;aspect-ratio:1;min-height:44px;border:2px solid var(--ink);cursor:pointer;padding:0;position:relative}
.swatch.on::after{content:"";position:absolute;inset:4px;border:3px solid #fff;outline:2px solid var(--ink)}
.size-dot{display:block;border-radius:50%;background:currentColor}

.maker-side{display:flex;flex-direction:column;min-height:0}
.name-label{font-family:var(--cond);font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:clamp(26px,3.4vmin,40px);line-height:1;margin-bottom:10px}
.name-input{font:700 clamp(22px,2.8vmin,32px)/1.2 var(--display);border:0;border-bottom:3px solid var(--ink);padding:8px 2px;width:100%;border-radius:0;background:none;color:var(--ink);-webkit-user-select:text;user-select:text}
.name-input:focus{outline:none;border-bottom-color:var(--red)}
.maker-msg{color:var(--red);font-weight:600;min-height:1.4em;margin:10px 0}
.maker-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:auto}

.osk{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.osk-row{display:flex;gap:6px}
.osk-key{appearance:none;flex:1;min-width:0;min-height:clamp(46px,5.6vmin,62px);border:1px solid var(--ink);background:#fff;font:600 clamp(16px,2vmin,22px)/1 var(--body);cursor:pointer;display:grid;place-items:center;padding:0}
.osk-key:active{background:var(--ink);color:#fff}
.osk-key.wide{flex:1.5}
.osk-key.space{flex:1}
.osk-key.on{background:var(--ink);color:#fff}
.osk-key svg{width:24px;height:24px}

@media (max-width:900px),(orientation:portrait){
  .maker-body{grid-template-columns:1fr;overflow-y:auto}
  .tools{width:auto;flex-direction:row;flex-wrap:wrap}
  .canvas-wrap{height:60vh}
  dialog.maker{overflow:auto}
}