/* Full board-game application layer */
body { overflow-x:hidden; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; transform:translateY(-150%); border:var(--line); border-radius:8px; background:var(--yellow); padding:8px 12px; font-weight:800; }
.skip-link:focus { transform:none; }
.nav-create { border:2px solid var(--ink); border-radius:9px; background:var(--red); color:white; box-shadow:3px 3px 0 var(--ink); padding:7px 11px; }
.nav-create:hover { color:white; text-decoration:none !important; transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.app-shell { width:min(1120px,calc(100% - 32px)); min-height:calc(100vh - 150px); margin:0 auto; padding:28px 0 75px; }

/* Shared controls */
.input,select.input { width:100%; min-height:45px; border:var(--line); border-radius:10px; outline:0; background:var(--light); color:var(--ink); box-shadow:inset 2px 2px 0 rgba(32,53,47,.08); padding:9px 12px; }
.input:focus { box-shadow:0 0 0 4px var(--yellow); }
.btn-ghost { background:transparent; box-shadow:none; }
.btn-danger { color:#a73427; }
mark { background:var(--yellow); color:inherit; padding:0 2px; }

/* Discovery */
.hero-arcade { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); align-items:center; gap:clamp(30px,6vw,72px); margin:15px 0 48px; }
.hero-copy { padding:30px 0; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 16px; color:var(--green); font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.eyebrow::before { content:""; width:10px; height:10px; border:2px solid var(--ink); border-radius:50%; background:var(--red); }
.page-title { margin:0; font-family:var(--serif); font-size:clamp(52px,7vw,83px); line-height:.91; letter-spacing:-.065em; }
.page-title .hot { position:relative; color:var(--green); }
.page-title .hot::after { content:""; position:absolute; right:0; bottom:-7px; left:0; height:8px; border-radius:50%; background:var(--red); transform:rotate(-2deg); }
.page-sub { max-width:610px; margin:24px 0; color:#53615c; font-size:18px; }
.hero-stats { display:flex; flex-wrap:wrap; gap:9px; }
.mini-stat { border:2px solid var(--ink); border-radius:999px; background:var(--light); padding:5px 9px; font-size:10px; font-weight:800; text-transform:uppercase; }
.hero-art { position:relative; min-height:420px; transform:rotate(2deg); border:5px solid var(--ink); border-radius:28px; background:var(--green); box-shadow:13px 14px 0 rgba(32,53,47,.22); }
.hero-art::before { content:"?"; position:absolute; z-index:2; top:50%; left:50%; width:135px; height:135px; display:grid; place-items:center; transform:translate(-50%,-50%) rotate(-7deg); border:4px solid var(--ink); border-radius:22px; background:var(--light); box-shadow:8px 8px 0 var(--red); font-family:var(--serif); font-size:76px; font-weight:900; }
.hero-art::after { content:""; position:absolute; inset:25px; border:3px dashed rgba(255,255,255,.47); border-radius:18px; background:linear-gradient(90deg,transparent 48%,rgba(255,255,255,.12) 49% 51%,transparent 52%),linear-gradient(transparent 48%,rgba(255,255,255,.12) 49% 51%,transparent 52%); background-size:88px 88px; }
.arcade-toolbar { margin-bottom:30px; border:var(--line); border-radius:17px; background:var(--light); box-shadow:6px 6px 0 var(--ink); }
.toolbar-head { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:2px solid var(--ink); padding:11px 15px; font-family:var(--serif); font-size:18px; font-weight:900; }
.toolbar-head span:last-child { color:var(--green); font-family:var(--sans); font-size:11px; text-transform:uppercase; }
.toolbar { display:grid; grid-template-columns:minmax(200px,1.45fr) repeat(3,minmax(145px,.7fr)); gap:10px; padding:13px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:24px; }
.card { position:relative; display:flex; min-width:0; flex-direction:column; overflow:hidden; border:var(--line); border-radius:19px; background:var(--light); box-shadow:6px 6px 0 var(--ink); transition:transform 130ms ease,box-shadow 130ms ease; }
.card:hover { transform:rotate(-1deg) translateY(-4px); box-shadow:8px 9px 0 var(--ink); }
.card-no { position:absolute; z-index:3; top:9px; left:9px; border:2px solid var(--ink); border-radius:7px; background:var(--yellow); padding:3px 6px; font-family:var(--serif); font-weight:900; }
.card-cover { position:relative; height:145px; display:grid; place-items:center; overflow:hidden; border-bottom:var(--line); background:linear-gradient(135deg,var(--cover-from),var(--cover-to)); }
.card-cover::before { content:""; position:absolute; width:82px; height:82px; transform:rotate(45deg); border:3px solid var(--ink); border-radius:13px; background:rgba(255,250,240,.78); box-shadow:5px 5px 0 rgba(32,53,47,.35); }
.puzzle-art { position:relative; z-index:2; width:96px; height:96px; display:grid; place-items:center; color:var(--cover-ink); font-family:var(--serif); font-size:29px; font-weight:900; }
.puzzle-art img { position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px); object-fit:contain; filter:drop-shadow(3px 4px 0 rgba(32,53,47,.3)); }
.cover-grid { transform:rotate(-5deg); font-size:25px; }
.cover-letters { transform:rotate(-5deg); }
.cover-ball::before { content:""; width:58px; height:58px; border:3px solid var(--ink); border-radius:50%; background:radial-gradient(circle at center,var(--ink) 0 9px,transparent 10px),conic-gradient(from 10deg,transparent 0 15%,var(--ink) 16% 19%,transparent 20% 39%,var(--ink) 40% 43%,transparent 44% 63%,var(--ink) 64% 67%,transparent 68% 87%,var(--ink) 88% 91%,transparent 92%),var(--light); box-shadow:4px 4px 0 rgba(32,53,47,.3); }
.card-body { display:flex; flex:1; flex-direction:column; gap:8px; padding:16px; }
.card-title { font-family:var(--serif); font-size:22px; font-weight:900; line-height:1.1; }
.card-desc { display:-webkit-box; overflow:hidden; color:var(--muted); font-size:13px; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.card-meta,.detail-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.tag { font-size:9px; }
.tag-format { background:var(--blue); }
.tag-wip { background:var(--yellow); }
.card-foot { display:flex; justify-content:space-between; gap:8px; border-top:2px dashed #9aa39f; padding-top:9px; color:var(--muted); font-size:10px; font-weight:700; }
.empty-state { grid-column:1/-1; max-width:620px; margin:35px auto; border:var(--line); border-radius:17px; background:var(--light); box-shadow:6px 6px 0 var(--ink); padding:42px 24px; color:var(--muted); text-align:center; }

/* Detail */
.backlink { display:inline-flex; margin:9px 0 20px; color:var(--green); font-size:11px; font-weight:900; text-transform:uppercase; }
.detail-shell { overflow:hidden; border:var(--line); border-radius:22px; background:var(--light); box-shadow:8px 8px 0 var(--ink); }
.detail-kicker { border-bottom:var(--line); background:var(--green); color:white; padding:10px 18px; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.detail-head { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(22px,5vw,52px); padding:clamp(23px,5vw,48px); }
.detail-cover { position:relative; width:190px; height:220px; display:grid; flex:0 0 auto; place-items:center; transform:rotate(-2deg); border:5px solid var(--ink); border-radius:20px; background:linear-gradient(135deg,var(--cover-from),var(--cover-to)); box-shadow:9px 10px 0 var(--ink); color:var(--cover-ink); font-family:var(--serif); font-size:48px; font-weight:900; }
.detail-cover .puzzle-art { width:150px; height:150px; }
.detail-cover .puzzle-art img { inset:-8px; width:calc(100% + 16px); height:calc(100% + 16px); }
.detail-cover .cover-ball::before { width:92px; height:92px; }
.detail-cover::after { content:"GAME"; position:absolute; right:12px; bottom:12px; border:2px solid var(--ink); border-radius:6px; background:var(--yellow); padding:3px 6px; color:var(--ink); font-family:var(--sans); font-size:8px; }
.detail-info { flex:1 1 330px; }
.detail-title { margin:0 0 12px; font-family:var(--serif); font-size:clamp(38px,6vw,65px); line-height:.95; letter-spacing:-.05em; }
.detail-desc { max-width:700px; color:#52615c; font-size:17px; }
.detail-meta { margin:16px 0 20px; }
.detail-actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; }
.panel { margin-top:25px; overflow:hidden; border:var(--line); border-radius:18px; background:var(--light); box-shadow:6px 6px 0 var(--ink); }
.panel-title { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--ink); background:var(--yellow); padding:11px 16px; }
.panel h2 { margin:0; font-family:var(--serif); font-size:25px; }
.panel-body { padding:18px 22px; }
.panel li { margin:7px 0; color:#53615c; }
.muted { color:var(--muted); font-size:11px; }

/* Selectors */
.selector { position:relative; }
.dropdown { position:absolute; z-index:50; top:calc(100% + 6px); right:0; left:0; overflow:hidden; border:var(--line); border-radius:12px; background:var(--light); box-shadow:6px 6px 0 var(--ink); }
.dropdown-item { display:flex; width:100%; align-items:center; gap:10px; border:0; border-bottom:1px solid #ddd3b8; background:transparent; padding:7px 11px; text-align:left; cursor:pointer; }
.dropdown-item:last-child { border:0; }
.dropdown-item[aria-selected="true"],.dropdown-item:hover { background:var(--yellow); }
.dropdown-item[disabled] { opacity:.4; cursor:not-allowed; }
.dropdown-copy { display:flex; min-width:0; flex-direction:column; }
.d-name { font-weight:800; }
.d-sub { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.dropdown-empty { padding:11px; color:var(--muted); font-size:12px; }
.entity-visual { position:relative; width:38px; height:38px; display:grid; flex:0 0 auto; place-items:center; overflow:hidden; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); color:var(--ink); font-family:var(--serif); font-size:10px; font-weight:900; box-shadow:2px 2px 0 var(--ink); }
.entity-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#e6f1e8; }
.selector-visual { width:34px; height:34px; box-shadow:1px 1px 0 var(--ink); }
.player-visual::before { content:""; position:absolute; top:5px; width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.72); }
.player-visual::after { content:""; position:absolute; right:8px; bottom:4px; left:8px; height:13px; border-radius:10px 10px 4px 4px; background:rgba(255,255,255,.72); }
.player-visual > span { position:relative; z-index:2; margin-top:4px; }
.model-visual { border-radius:9px; background:#8e7dff; color:var(--ink); font-size:9px; font-weight:900; letter-spacing:-.04em; }
.model-visual > span { position:relative; z-index:2; }
.tone-0 { background:#79cc8b !important; }.tone-1 { background:#75b8df !important; }.tone-2 { background:#f4bd3b !important; }.tone-3 { background:#e98272 !important; }.tone-4 { background:#a995d4 !important; }.tone-5 { background:#76d5c2 !important; }

/* Play table */
.play-shell { overflow:visible; border:5px solid var(--ink); border-radius:28px; background:var(--green); box-shadow:12px 14px 0 rgba(32,53,47,.23); }
.play-head { display:flex; flex-wrap:wrap; align-items:center; gap:12px; border-bottom:3px dashed rgba(255,255,255,.48); color:white; padding:18px 22px; }
.play-head h1 { flex:1; margin:0; font-family:var(--serif); font-size:clamp(26px,5vw,45px); line-height:1; }
.play-head h1 small { display:block; margin-bottom:6px; color:#bfe0d3; font-family:var(--sans); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.play-head .btn-ghost { color:white; }
.play-stage { padding:clamp(16px,4vw,35px); }
.attempt-pill { border:2px solid var(--ink); border-radius:999px; background:var(--yellow); color:var(--ink); padding:6px 10px; font-size:11px; font-weight:900; }
.game-tip { display:flex; align-items:center; gap:9px; margin:0 0 17px; color:#e4f0eb; font-size:12px; }
.game-tip::before { content:"TIP"; border:2px solid var(--ink); border-radius:6px; background:var(--red); color:white; padding:3px 5px; font-size:8px; font-weight:900; }
.guess-input-row { margin-bottom:20px; }
.guess-input-row .selector { max-width:760px; margin:auto; border:var(--line); border-radius:14px; background:var(--light); box-shadow:6px 6px 0 var(--ink); padding:14px; }
.guess-head-row,.guess-row { display:grid; grid-template-columns:minmax(110px,1.2fr) repeat(var(--fields,5),minmax(0,1fr)); gap:6px; }
.guess-head-row { margin-bottom:6px; }
.guess-head-row .gh { color:#dcece5; text-align:center; font-size:8px; font-weight:900; text-transform:uppercase; }
.guess-head-row .gh:first-child { text-align:left; }
.guess-rows { display:grid; gap:8px; }
.guess-name,.chip { display:flex; min-width:0; min-height:56px; align-items:center; justify-content:center; overflow:hidden; border:3px solid var(--ink); border-radius:9px; background:var(--light); box-shadow:2px 2px 0 var(--ink); padding:6px; text-align:center; font-size:11px; font-weight:800; }
.guess-name { justify-content:flex-start; gap:8px; padding-left:8px; font-family:var(--serif); font-size:13px; }
.guess-name > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guess-name .entity-visual { width:35px; height:35px; }
.chip { flex-direction:column; }
.chip-correct { background:#79cc8b; }
.chip-close,.chip-partial { background:var(--yellow); }
.chip-wrong { background:#d8d3c4; }
.chip-unavailable { background:#5f6865; color:white; }
.chip-label { display:none; margin-bottom:3px; font-size:7px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.chip-array { align-items:stretch; background:var(--light); }
.array-items { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:3px; }
.array-item { display:inline-flex; align-items:center; gap:3px; border:2px solid var(--ink); border-radius:999px; padding:2px 5px 2px 2px; font-size:8px; line-height:1.25; overflow-wrap:anywhere; }
.array-item.matched { background:#79cc8b; color:#153d2b; }
.array-item.unmatched { background:#d8d3c4; color:#5a565e; }
.value-icon { display:grid; width:19px; height:19px; flex:0 0 auto; place-items:center; border:1px solid var(--ink); color:var(--ink); font-size:6px; font-weight:900; line-height:1; }
.club-badge { border-radius:50% 50% 45% 45%; box-shadow:0 1px 0 var(--ink); }
.type-icon { border-radius:6px; background:#aaa; color:white; text-shadow:0 1px 0 rgba(0,0,0,.3); }
.type-grass { background:#5fae58; }.type-poison { background:#9951a3; }.type-fire { background:#e76b3c; }.type-flying { background:#7ca7d8; }.type-water { background:#4389ce; }.type-electric { background:#e4b729; color:#382f12; }.type-ghost { background:#675a9b; }.type-dragon { background:#6856bd; }.type-normal { background:#969484; }.type-dark { background:#62554f; }.type-psychic { background:#df5b83; }.type-fairy { background:#dc8fc7; }.type-steel { background:#849ca5; }.type-fighting { background:#b3473d; }

/* Matrix */
.mx-wrap { max-width:650px; margin:auto; }
.mx-grid { display:grid; grid-template-columns:minmax(0,.9fr) repeat(3,minmax(0,1fr)); gap:7px; }
.mx-cond { display:flex; min-height:61px; align-items:center; justify-content:center; border:3px solid var(--ink); border-radius:9px; background:var(--yellow); box-shadow:2px 2px 0 var(--ink); padding:5px; text-align:center; font-size:9px; font-weight:800; line-height:1.25; }
.mx-corner { border-color:transparent; background:transparent; box-shadow:none; }
.mx-cell { min-height:78px; border:3px solid var(--ink); border-radius:9px; background:var(--light); box-shadow:2px 2px 0 var(--ink); padding:4px; cursor:pointer; color:var(--ink); text-align:center; font-size:10px; font-weight:800; }
.mx-cell.empty { border-style:dashed; color:var(--red); font-family:var(--serif); font-size:25px; }
.mx-cell.empty:hover,.mx-cell.selected { background:var(--blue); }
.mx-cell.filled { background:#79cc8b; cursor:default; }
.mx-cell.revealed { border-style:dashed; background:#d8d3c4; cursor:default; }
.mx-cell.flash-bad { background:var(--red); color:white; animation:shake 240ms ease; }
@keyframes shake { 30% { transform:translateX(-5px); } 60% { transform:translateX(5px); } }
.mx-picker { display:none; margin-top:18px; border:var(--line); border-radius:14px; background:var(--light); box-shadow:6px 6px 0 var(--ink); padding:14px; }
.mx-picker.open { display:block; }
.mx-picker-label { margin-bottom:9px; color:var(--muted); font-size:12px; }

/* Result */
.result { margin:27px 0 0; border:var(--line); border-radius:18px; background:var(--light); box-shadow:6px 6px 0 var(--ink); padding:23px; text-align:center; }
.result::before { content:"ROUND COMPLETE"; display:inline-flex; transform:rotate(-2deg); border:2px solid var(--ink); border-radius:7px; background:#79cc8b; padding:4px 8px; font-size:9px; font-weight:900; }
.result.failed::before { content:"ROUND OVER"; background:var(--red); color:white; }
.result-title { margin:13px 0 3px; font-family:var(--serif); font-size:34px; font-weight:900; }
.result-sub { margin:0; color:var(--muted); }
.result-stats { display:flex; max-width:480px; margin:16px auto; border:2px solid var(--ink); border-radius:12px; }
.result-stat { flex:1; padding:10px; border-right:2px solid var(--ink); }
.result-stat:last-child { border:0; }
.result-stat b { display:block; font-family:var(--serif); font-size:22px; }
.result-stat span { color:var(--muted); font-size:9px; text-transform:uppercase; }
.share-label { margin:0 auto 5px; max-width:370px; text-align:left; font-size:9px; font-weight:900; text-transform:uppercase; }
.share-box { max-width:370px; margin:0 auto 15px; border:2px dashed var(--ink); border-radius:9px; background:var(--paper); padding:10px; text-align:left; white-space:pre-wrap; font-family:monospace; font-size:11px; }
.result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.result-answer { font-size:13px; }

/* Creation studio */
.create-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:26px; align-items:start; }
.create-aside { position:sticky; top:18px; border:var(--line); border-radius:17px; background:var(--light); box-shadow:5px 5px 0 var(--ink); padding:18px; }
.create-aside h1 { margin:0 0 7px; font-family:var(--serif); font-size:30px; line-height:1; }
.create-aside p { margin:0 0 18px; color:var(--muted); font-size:12px; }
.step-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.step-list li { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; font-weight:800; }
.step-list li::before { content:attr(data-step); display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); font-family:var(--serif); }
.step-list li.active { color:var(--green); }
.step-list li.active::before { background:var(--yellow); }
.create-board { min-width:0; border:var(--line); border-radius:20px; background:var(--light); box-shadow:7px 7px 0 var(--ink); }
.create-head { border-bottom:var(--line); background:var(--green); color:white; padding:17px 22px; }
.create-head small { color:#c8e4d9; font-weight:800; text-transform:uppercase; }
.create-head h2 { margin:4px 0 0; font-family:var(--serif); font-size:34px; }
.create-body { min-width:0; padding:clamp(18px,4vw,34px); }
.create-body .dataset-box { width:100%; min-width:0; max-width:100%; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:grid; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { font-size:11px; font-weight:900; text-transform:uppercase; }
.field textarea { min-height:100px; resize:vertical; }
.format-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.format-card { position:relative; border:3px solid var(--ink); border-radius:13px; background:var(--paper); padding:15px; cursor:pointer; }
.format-card:has(input:checked) { background:var(--yellow); box-shadow:4px 4px 0 var(--ink); }
.format-card input { position:absolute; opacity:0; }
.format-card strong { display:block; font-family:var(--serif); font-size:19px; }
.format-card span { color:var(--muted); font-size:11px; }
.dataset-box { overflow:auto; border:2px solid var(--ink); border-radius:11px; }
.dataset-table { width:100%; border-collapse:collapse; font-size:11px; }
.dataset-table th,.dataset-table td { border-bottom:1px solid #d7ccb0; padding:9px; text-align:left; white-space:nowrap; }
.dataset-table th { background:var(--yellow); font-size:9px; text-transform:uppercase; }
.validation { display:flex; gap:10px; border:2px solid var(--green); border-radius:10px; background:#e1f1e7; padding:11px; color:var(--deep); font-size:12px; font-weight:700; }
.create-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.preview-card { display:grid; grid-template-columns:130px 1fr; gap:20px; align-items:center; }
.preview-cover { height:155px; display:grid; place-items:center; transform:rotate(-2deg); border:4px solid var(--ink); border-radius:16px; background:var(--yellow); box-shadow:6px 6px 0 var(--ink); font-family:var(--serif); font-size:43px; font-weight:900; }
.preview-copy h3 { margin:0 0 5px; font-family:var(--serif); font-size:30px; }

/* Discovery collections */
.discovery-lanes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 28px; }
.discovery-lane { overflow:hidden; border:2px solid var(--ink); border-radius:13px; background:var(--light); }
.discovery-lane > b { display:block; border-bottom:1px solid #d7ccb0; background:var(--yellow); padding:7px 10px; font-family:var(--serif); font-size:15px; }
.discovery-lane > div { display:flex; min-height:49px; align-items:center; gap:7px; overflow:auto; padding:7px; }
.discovery-lane a { display:inline-flex; min-width:max-content; align-items:center; gap:6px; border:1px solid #d7ccb0; border-radius:8px; padding:4px 8px 4px 4px; font-size:10px; font-weight:800; }
.discovery-lane a span { width:25px; height:25px; border:1px solid var(--ink); border-radius:6px; background:linear-gradient(135deg,var(--cover-from),var(--cover-to)); }
.discovery-lane small { color:var(--muted); padding:4px; }

/* Leaderboard */
.leaderboard { display:grid; gap:7px; }
.leader-row { display:grid; grid-template-columns:42px 1fr 70px 65px; align-items:center; gap:8px; border-bottom:1px solid #d7ccb0; padding:8px 5px; }
.leader-row:last-child { border:0; }
.leader-row strong,.leader-row small { text-align:right; }
.leader-row small { color:var(--muted); }
.leader-row.is-you { border:2px solid var(--ink); border-radius:9px; background:var(--yellow); padding-inline:8px; }
.eligibility { color:var(--muted); font-size:11px; }
.eligibility a { color:var(--green); font-weight:800; text-decoration:underline; }

/* Scalar and reveal engines */
.scalar-axis { display:flex; max-width:760px; align-items:center; gap:12px; margin:0 auto 13px; color:#dcece5; font-size:9px; font-weight:900; text-transform:uppercase; }
.scalar-axis i { height:4px; flex:1; border:1px solid var(--ink); background:linear-gradient(90deg,var(--blue),var(--yellow),var(--red)); }
.scalar-list { display:grid; max-width:760px; gap:8px; margin:auto; }
.scalar-row { display:grid; grid-template-columns:35px minmax(140px,1fr) 85px minmax(150px,1fr); align-items:center; gap:8px; border:3px solid var(--ink); border-radius:10px; background:var(--light); box-shadow:2px 2px 0 var(--ink); padding:9px 12px; font-size:12px; }
.scalar-row strong { font-family:var(--serif); font-size:18px; text-align:center; }
.scalar-index { display:grid; width:24px; height:24px; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--paper); font-weight:900; }
.scalar-direction { text-align:right; font-weight:800; }
.scalar-close { background:var(--yellow); }.scalar-correct { background:#79cc8b; }
.reveal-layout { display:grid; grid-template-columns:minmax(220px,.75fr) minmax(300px,1.25fr); align-items:start; gap:25px; }
.reveal-card { position:relative; min-height:390px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; border:4px solid var(--ink); border-radius:20px; background:linear-gradient(140deg,#8e7dff,#55d6be); box-shadow:7px 7px 0 var(--ink); padding:22px; }
.mystery-art { width:190px; height:230px; display:grid; place-items:center; border:5px solid var(--ink); border-radius:18px; background:conic-gradient(from 45deg,var(--yellow),var(--red),var(--blue),var(--yellow)); box-shadow:8px 8px 0 rgba(32,53,47,.45); transition:filter 180ms ease,transform 180ms ease; }
.mystery-art span { font-family:var(--serif); font-size:95px; font-weight:900; }
.reveal-level-1 .mystery-art { filter:blur(18px) grayscale(1); transform:scale(1.5); }
.reveal-level-2 .mystery-art { filter:blur(12px) grayscale(.75); transform:scale(1.35); }
.reveal-level-3 .mystery-art { filter:blur(7px) grayscale(.45); transform:scale(1.2); }
.reveal-level-4 .mystery-art { filter:blur(3px) grayscale(.2); transform:scale(1.08); }
.reveal-level-5 .mystery-art { filter:none; transform:none; }
.reveal-card p { position:relative; z-index:2; width:100%; margin:26px 0 0; border:2px solid var(--ink); border-radius:9px; background:var(--light); padding:10px; text-align:center; font-weight:800; }
.reveal-controls .guess-input-row .selector { margin:0; }
.reveal-guesses { display:flex; flex-wrap:wrap; gap:6px; margin-top:17px; }
.guess-token { border:2px solid var(--ink); border-radius:999px; background:var(--light); padding:4px 8px; font-size:10px; font-weight:800; }
.guess-token.invalid { background:#d8d3c4; }.guess-token.valid { background:#79cc8b; }
.reveal-layout #result-slot { grid-column:1/-1; }

/* Full creator studio */
.step-list button { border:0; background:transparent; color:inherit; padding:0; font:inherit; cursor:pointer; }
.dataset-tools,.dataset-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.dataset-actions { margin-top:18px; }
.dataset-actions span { margin-left:auto; color:var(--muted); font-size:11px; font-weight:800; }
.file-btn { position:relative; overflow:hidden; }
.file-btn input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.editor-table input { min-width:130px; width:100%; border:1px solid #9b927c; border-radius:5px; background:white; padding:6px; font:inherit; }
.editor-table td:nth-child(4) input { min-width:230px; }
.icon-btn { width:27px; height:27px; border:1px solid var(--ink); border-radius:6px; background:var(--light); cursor:pointer; }
.status-dot { display:inline-flex; border:1px solid var(--ink); border-radius:999px; padding:2px 6px; font-size:9px; font-weight:900; text-transform:uppercase; }
.status-dot.verified { background:#79cc8b; }.status-dot.unverified { background:var(--yellow); }
.mapping-box { border:2px dashed var(--ink); border-radius:12px; background:var(--paper); margin:16px 0; padding:14px; }
.mapping-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:10px 0; }
.mapping-grid label { font-size:9px; font-weight:900; text-transform:uppercase; }
.rule-summary { border-bottom:2px dashed #b9ae91; margin-bottom:18px; padding-bottom:12px; }
.check-field { display:flex; grid-column:1/-1; align-items:center; gap:8px; font-size:12px; font-weight:800; }
.check-field input { width:20px; height:20px; }
.field-map { display:grid; gap:7px; margin-top:22px; border:2px solid var(--ink); border-radius:10px; padding:12px; }
.field-map > div { display:grid; grid-template-columns:1fr 1fr .5fr; gap:8px; border-top:1px solid #d7ccb0; padding-top:7px; font-size:11px; }
.validation-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; border:3px solid var(--green); border-radius:12px; background:#e1f1e7; margin-bottom:16px; padding:14px; }
.validation-summary strong { font-family:var(--serif); font-size:21px; }
.validation-summary span { color:var(--muted); font-size:11px; }
.validation-summary.has-errors { border-color:var(--red); background:#fbe4df; }
.issue-list { border:2px solid var(--ink); border-radius:10px; padding:12px 12px 12px 32px; font-size:12px; }
.issue-list.errors { background:#fbe4df; }.issue-list.warnings { background:#fff2c4; }
.exact-preview { margin-top:28px; border-top:2px dashed #b9ae91; padding-top:18px; }
.exact-preview > label { font-size:11px; font-weight:900; text-transform:uppercase; }
.preview-play,.copy-row { display:flex; gap:9px; margin-top:8px; }
.publish-review { display:grid; grid-template-columns:110px 1fr; gap:22px; align-items:center; }
.preview-cover.small { width:100px; height:120px; font-size:30px; }
.publish-review h3 { margin:5px 0; font-family:var(--serif); font-size:30px; }
.publish-review code { display:block; overflow:auto; border:1px solid var(--ink); border-radius:6px; background:var(--paper); padding:7px; font-size:10px; }
.signin-gate,.signed-in-row { margin-top:24px; border:2px solid var(--ink); border-radius:12px; background:var(--paper); padding:15px; }
.signed-in-row { display:flex; align-items:center; gap:10px; }
.avatar { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); font-family:var(--serif); font-weight:900; }
.avatar.large { width:84px; height:84px; font-size:25px; }

/* Accounts, dashboard, publishing */
.account-hero { display:grid; grid-template-columns:.65fr 1.35fr; align-items:center; gap:55px; min-height:540px; }
.account-art { aspect-ratio:1; display:grid; place-items:center; transform:rotate(-4deg); border:5px solid var(--ink); border-radius:28px; background:linear-gradient(135deg,var(--red),var(--yellow)); box-shadow:12px 12px 0 var(--ink); font-family:var(--serif); font-size:110px; font-weight:900; }
.account-hero h1,.profile-head h1,.dashboard-head h1,.published-card h1 { margin:0; font-family:var(--serif); font-size:clamp(42px,6vw,68px); line-height:.95; }
.profile-head,.dashboard-head { display:flex; align-items:center; gap:20px; margin:20px 0 35px; }
.profile-head > div,.dashboard-head > div { flex:1; }
.dashboard-actions { display:flex; flex-wrap:wrap; gap:8px; }
.history-list { display:grid; gap:5px; }
.history-row { display:grid; grid-template-columns:75px 1fr 80px 170px; align-items:center; gap:8px; border-bottom:1px solid #d7ccb0; padding:9px 4px; font-size:12px; }
.history-row small { color:var(--muted); text-align:right; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:25px; border:2px solid var(--red); border-radius:13px; background:#fbe4df; padding:15px; }
.danger-zone p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.metric-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.metric { display:flex; min-height:135px; flex-direction:column; border:3px solid var(--ink); border-radius:14px; background:var(--light); box-shadow:4px 4px 0 var(--ink); padding:13px; }
.metric span,.metric small { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.metric b { margin:auto 0; font-family:var(--serif); font-size:31px; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bar-list { display:grid; gap:12px; }
.bar-list > div { display:grid; grid-template-columns:120px 1fr 30px; align-items:center; gap:8px; font-size:11px; }
.bar-list i { height:12px; border:1px solid var(--ink); background:linear-gradient(90deg,var(--green) var(--bar),transparent var(--bar)); }
.version-row { display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid #d7ccb0; padding:8px 0; }
.version-row small { display:block; color:var(--muted); }
.report-list { display:grid; gap:12px; }
.report-row { display:flex; align-items:center; justify-content:space-between; gap:15px; border:2px solid var(--ink); border-radius:11px; background:var(--paper); padding:14px; }
.report-row h3 { margin:7px 0 2px; font-family:var(--serif); }
.report-row p,.report-row small { margin:0; color:var(--muted); font-size:11px; }
.report-row > div:last-child { display:flex; flex-wrap:wrap; gap:7px; }
.published-card { position:relative; display:grid; grid-template-columns:220px 1fr; align-items:center; gap:45px; border:4px solid var(--ink); border-radius:22px; background:var(--light); box-shadow:9px 9px 0 var(--ink); padding:clamp(25px,5vw,55px); }
.published-stamp { position:absolute; top:14px; right:14px; transform:rotate(2deg); border:2px solid var(--ink); border-radius:7px; background:#79cc8b; padding:5px 8px; font-size:9px; font-weight:900; }

/* Toast */
.toast { position:fixed; z-index:100; right:18px; bottom:18px; max-width:min(410px,calc(100% - 36px)); transform:translateY(15px); border:var(--line); border-radius:11px; background:var(--ink); color:white; box-shadow:5px 5px 0 rgba(0,0,0,.25); padding:10px 14px; opacity:0; pointer-events:none; font-size:12px; transition:all 130ms ease; }
.toast.show { transform:none; opacity:1; }

@media (max-width:900px) { .hero-arcade { grid-template-columns:1fr .65fr; } .toolbar { grid-template-columns:1fr 1fr; } .create-layout { grid-template-columns:1fr; } .create-aside { position:static; } .step-list { grid-template-columns:repeat(4,1fr); } .step-list li { flex-direction:column; text-align:center; } }
@media (max-width:680px) { .site-nav { min-height:66px; } .nav-links a:first-child { display:none; } .app-shell { padding-top:14px; } .hero-arcade { display:block; } .hero-art { min-height:280px; margin-top:10px; } .toolbar,.form-grid,.format-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .cards { grid-template-columns:1fr; } .detail-cover { width:115px; height:135px; font-size:32px; } .play-head h1 { flex-basis:100%; } .guess-head-row,.guess-row { grid-template-columns:minmax(75px,1.1fr) repeat(var(--fields,5),minmax(0,1fr)); gap:3px; } .guess-head-row .gh { font-size:6px; } .guess-name,.chip { min-height:48px; border-width:2px; padding:3px; font-size:8px; } .chip-label { display:none; } .mx-grid { gap:4px; } .mx-cond { min-height:51px; border-width:2px; padding:2px; font-size:7px; } .mx-cell { min-height:59px; border-width:2px; padding:2px; font-size:7px; } .result-stats { flex-direction:column; } .result-stat { border-right:0; border-bottom:2px solid var(--ink); } .step-list { grid-template-columns:1fr 1fr; } .preview-card { grid-template-columns:1fr; } .preview-cover { width:130px; } }
@media (max-width:680px) {
  .guess-head-row { display:none; }
  .guess-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; border:2px dashed rgba(255,255,255,.45); border-radius:12px; padding:8px; }
  .guess-name { grid-column:1/-1; min-height:42px; justify-content:center; font-size:13px; }
  .chip { min-height:62px; padding:6px; font-size:10px; }
  .chip-label { display:block; }
  .chip-array { grid-column:1/-1; }
  .array-items { gap:5px; }
  .array-item { padding:3px 6px; font-size:9px; }
}
@media (max-width:900px) {
  .create-layout { grid-template-columns:minmax(0,1fr); }
  .metric-grid { grid-template-columns:repeat(3,1fr); }
  .reveal-layout,.published-card { grid-template-columns:1fr; }
  .published-card .preview-cover { width:130px; }
}
@media (max-width:680px) {
  .discovery-lanes,.dashboard-grid,.mapping-grid { grid-template-columns:1fr; }
  .scalar-row { grid-template-columns:30px 1fr 62px; font-size:10px; }
  .scalar-direction { grid-column:2/-1; text-align:left; }
  .reveal-layout { grid-template-columns:minmax(0,1fr); }
  .reveal-card { min-height:300px; }
  .mystery-art { width:145px; height:175px; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .account-hero { grid-template-columns:1fr; gap:28px; }
  .account-art { width:180px; }
  .profile-head,.dashboard-head { align-items:flex-start; flex-wrap:wrap; }
  .history-row { grid-template-columns:70px 1fr 60px; }
  .history-row small { grid-column:2/-1; text-align:left; }
  .publish-review { grid-template-columns:1fr; }
  .preview-play,.copy-row { flex-direction:column; }
  .leader-row { grid-template-columns:35px 1fr 55px 50px; font-size:11px; }
  .danger-zone,.report-row { align-items:flex-start; flex-direction:column; }
}
@media (max-width:520px) {
  .nav-links { gap:8px; }
  .nav-links > a:nth-child(1),.nav-links > a:nth-child(2) { display:none; }
  .metric-grid { grid-template-columns:1fr; }
  .step-list { grid-template-columns:repeat(2,1fr); }
  .dataset-tools .btn { width:100%; }
}
@media (max-width:390px) { .brand { font-size:18px; } .nav-create { padding:6px 8px; font-size:11px; } .page-title { font-size:49px; } .hero-art { min-height:230px; } .play-stage { padding:13px 7px 20px; } .mx-cond,.mx-cell { border-width:2px; } .create-body { padding:15px; } }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

[hidden] { display:none !important; }