:root{
  --paper:#faf7f0; --ink:#191919; --ink-soft:#5d5a52; --line:#191919; --line-soft:#dcd8cd;
  --card:#fffdf8; --hi:#ffe14d; --link:#1d4ed8;
  --board:#22242c; --slot:#2b2e39;
  --s:#ff6b6b; --a:#ffa94d; --b:#ffd43b; --c:#69db7c; --d:#4dabf7; --extra:#b197fc;
  --maxw:1060px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
}
h1,h2,.brand-name,.tier-label,summary{
  font-family:"Bricolage Grotesque","Arial Black",-apple-system,sans-serif;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
mark{background:linear-gradient(transparent 58%, var(--hi) 58%); padding:0 .08em}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin:0 auto; padding:18px 20px 6px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800}
.brand:hover{text-decoration:none}
.brand-badge{
  display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
  background:var(--s); color:var(--ink); font-weight:900; font-size:1.05rem;
  border:2px solid var(--ink); transform:rotate(-4deg);
  box-shadow:2px 2px 0 var(--ink);
}
.brand-name{font-size:1.18rem; font-weight:800; letter-spacing:-.01em}
.site-nav{display:flex; gap:20px}
.site-nav a{color:var(--ink-soft); font-weight:600; font-size:.93rem}
.site-nav a:hover{color:var(--ink); text-decoration:underline}

main{max-width:var(--maxw); margin:0 auto; padding:0 20px 48px}
.breadcrumb{color:var(--ink-soft); font-size:.82rem; padding:6px 0 0}
.breadcrumb a{color:var(--ink-soft)}

/* Hero — left aligned, short */
.hero{padding:18px 0 6px}
h1{
  font-size:clamp(1.9rem,4.6vw,2.9rem); line-height:1.08; margin:0 0 .25em;
  font-weight:800; letter-spacing:-.02em;
}
.lede{color:var(--ink-soft); font-size:1.03rem; max-width:62ch; margin:0}

/* Tool card */
.tool{
  background:var(--card); border:2px solid var(--ink); border-radius:10px;
  padding:14px; margin:18px 0 6px; box-shadow:5px 5px 0 rgba(25,25,25,.9);
}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:12px}
.title-input{
  background:#fff; border:2px solid var(--ink); color:var(--ink);
  font-size:1.08rem; font-weight:700; padding:9px 12px; border-radius:8px; min-width:180px; flex:1;
}
.title-input:focus{outline:none; background:#fffbe6}
.toolbar-actions{display:flex; flex-wrap:wrap; gap:8px}
.btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:#fff; color:var(--ink); border:2px solid var(--ink);
  padding:8px 13px; border-radius:8px; font-weight:700; font-size:.9rem; white-space:nowrap;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .05s ease, box-shadow .05s ease;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink)}
.btn-primary{background:var(--ink); color:#fff}
.btn-accent{background:var(--hi); color:var(--ink)}
.btn-ghost{box-shadow:none; border-color:var(--line-soft); color:var(--ink-soft)}
.btn-ghost:hover{box-shadow:none; transform:none; border-color:var(--ink); color:var(--ink)}

/* Board — dark stage so tier colors pop */
.capture{background:var(--board); border-radius:8px; padding:8px; border:2px solid var(--ink)}
.board{display:flex; flex-direction:column; gap:7px}
.tier-row{display:flex; align-items:stretch; min-height:90px; border-radius:6px; overflow:hidden; background:var(--slot)}
.tier-label{
  flex:0 0 86px; display:grid; place-items:center; text-align:center;
  font-weight:800; font-size:1.35rem; color:#191919; padding:6px; cursor:text; word-break:break-word;
  border:none; outline:none;
}
.tier-drop{
  flex:1; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start;
  padding:7px; min-height:90px; background:var(--board);
}
.tier-drop.over{outline:2px dashed var(--hi); outline-offset:-4px; background:#31343f}
.tier-tools{flex:0 0 30px; display:flex; flex-direction:column; gap:4px; padding:6px 4px; background:#1a1c23}
.tier-tools button{
  background:transparent; border:1px solid #434652; color:#a5a9b8;
  border-radius:5px; width:22px; height:22px; cursor:pointer; font-size:.78rem; line-height:1; padding:0;
}
.tier-tools button:hover{color:#fff; border-color:#6b6f80}

/* Items */
.item{
  width:64px; height:64px; border-radius:6px; overflow:hidden; cursor:grab;
  background:#3a3d4a; border:1px solid #4a4d5c; display:grid; place-items:center;
  user-select:none; touch-action:none; position:relative; color:#fff;
}
.item img{width:100%; height:100%; object-fit:cover; pointer-events:none}
.item .txt{padding:4px; font-size:.7rem; font-weight:700; text-align:center; line-height:1.15; word-break:break-word}
.item.dragging{opacity:.35}
.item .rm{
  position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
  background:#000c; color:#fff; border:none; font-size:.7rem; cursor:pointer; display:none;
}
.item:hover .rm{display:block}

/* Pool */
.pool-wrap{margin-top:12px}
.pool-head{color:var(--ink-soft); font-size:.84rem; font-weight:600; margin-bottom:6px}
.pool{
  display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start;
  min-height:96px; padding:8px; background:#f3efe4; border:2px dashed #b9b4a3; border-radius:8px;
}
.pool.over{outline:2px dashed var(--ink); outline-offset:-4px; background:#fff8dc}
.hint{color:var(--ink-soft); font-size:.82rem; margin:10px 2px 0}

/* Drag ghost */
body.exporting .tier-tools{display:none}
body.exporting .rm{display:none}
.drag-layer{position:fixed; inset:0; pointer-events:none; z-index:9999}
.drag-ghost{position:fixed; width:64px; height:64px; border-radius:6px; overflow:hidden;
  box-shadow:6px 8px 0 rgba(25,25,25,.35); transform:translate(-50%,-50%) rotate(-3deg) scale(1.06); pointer-events:none}
.drag-ghost img{width:100%;height:100%;object-fit:cover}
.drag-ghost .txt{width:100%;height:100%;display:grid;place-items:center;background:#3a3d4a; color:#fff;
  font-size:.7rem;font-weight:700;text-align:center;padding:4px}

/* Content */
.content{margin:42px 0}
.content h2{font-size:1.45rem; margin:0 0 .55em; font-weight:800; letter-spacing:-.01em}
.steps{padding-left:1.2em; color:var(--ink-soft)}
.steps li{margin:.45em 0}
.steps strong{color:var(--ink)}
.content h3{font-size:.95rem; margin:1.4em 0 .6em; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em}
.template-grid{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px; margin:.4em 0}
.template-grid li{display:contents}
.template-grid a{
  display:inline-block; padding:9px 16px; background:#fff; border:2px solid var(--ink);
  border-radius:999px; font-weight:700; font-size:.92rem; color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  transition:transform .05s ease, box-shadow .05s ease;
}
.template-grid a:hover{text-decoration:none; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); background:var(--hi)}
.faq details{background:transparent; border-bottom:1.5px solid var(--line-soft); padding:12px 4px}
.faq details:first-of-type{border-top:1.5px solid var(--line-soft)}
.faq summary{cursor:pointer; font-weight:700; font-size:1rem}
.faq p{color:var(--ink-soft); margin:.55em 0 .2em}
.about p{color:var(--ink-soft); max-width:75ch}

.site-footer{border-top:2px solid var(--ink); margin-top:36px}
.site-footer p{max-width:var(--maxw); margin:0 auto; padding:18px 20px; color:var(--ink-soft); font-size:.87rem}

@media (max-width:640px){
  .site-nav{display:none}
  .tier-label{flex-basis:56px; font-size:1.05rem}
  .item,.drag-ghost{width:54px;height:54px}
  .toolbar-actions .btn{padding:8px 10px; font-size:.85rem}
  .tool{box-shadow:4px 4px 0 rgba(25,25,25,.9)}
}