@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght,SOFT,WONK@9..144,500,20,1;9..144,600,20,1;9..144,700,20,1&family=Nunito+Sans:wght@800;900&display=swap');

:root {
  --pine: #173f3b;
  --pine-dark: #102f2d;
  --pine-soft: #356760;
  --cream: #faf5e9;
  --paper: #fffaf0;
  --paper-muted: #f2ecdc;
  --ink: #253f39;
  --muted: #75847b;
  --line: #e5e3d7;
  --gold: #e3a947;
  --terracotta: #bf6246;
  --blue: #5d83aa;
  --teal: #509991;
  --board: #e8d7ba;
  --shadow: 0 16px 55px rgba(31, 54, 43, .09);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f8f6ed; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #e1a342; outline-offset: 3px; }
button, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; overflow: hidden; background: #f8f6ef; }
.topbar { height: 85px; padding: 0 max(35px, calc((100vw - 1470px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 22px; border-bottom: 1px solid #e9e7de; background: rgba(255, 253, 248, .96); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 210px; color: var(--pine); }
.brand-mark { display: grid; place-items: center; width: 45px; height: 45px; border: 2px solid var(--pine); border-radius: 50%; transform: rotate(-7deg); }
.brand-mark svg { width: 32px; height: 32px; }
.brand-type { display: flex; flex-direction: column; font-size: 16px; font-weight: 800; line-height: .97; letter-spacing: .10em; }
.brand-type strong:last-child { font-size: 17px; }
.brand-period { color: var(--terracotta); }
.main-nav { display: flex; align-items: center; gap: 9px; height: 100%; }
.nav-link { height: 100%; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #7a8b82; padding: 3px 21px 0; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 10px; }
.nav-link:hover { color: var(--pine); }
.nav-link.active { color: var(--pine); border-bottom-color: var(--terracotta); }
.nav-icon { font-size: 21px; font-weight: 400; color: #9baca1; }
.nav-link.active .nav-icon { color: var(--terracotta); }
.header-profile { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--pine); min-width: 170px; justify-content: flex-end; }
.profile-initial { height: 35px; width: 35px; border-radius: 50%; display: grid; place-items: center; background: #e8c8a2; color: var(--pine); font-family: var(--serif); font-size: 18px; }

.view { min-height: calc(100vh - 160px); }
.view[hidden] { display: none !important; }
.hero-stage { min-height: 210px; height: auto; position: relative; overflow: hidden; background: #dfe9db; transition: background .5s; }
.hero-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238, 245, 232, .97) 0%, rgba(237, 244, 230, .91) 30%, rgba(237,244,230,.22) 68%, rgba(237,244,230, .08) 100%); pointer-events: none; }
.hero-illustration { position: absolute; inset: 0; overflow: hidden; }
.hero-illustration svg { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: relative; z-index: 1; max-width: 1410px; margin: auto; padding: 27px 14px 24px; }
.eyebrow, .panel-label { font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--pine-soft); }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow-dot { width: 7px; height: 7px; border: 2px solid var(--terracotta); border-radius: 50%; }
.eyebrow-line { width: 25px; height: 1px; background: #98aa96; margin: 0 6px; }
h1, h2, h3, p { margin-top: 0; }
.hero-copy h1 { font-family: var(--serif); font-size: clamp(31px, 3.25vw, 45px); letter-spacing: -.048em; line-height: 1.12; color: var(--pine-dark); margin: 13px 0 7px; font-weight: 600; }
h1 em, h2 em { font-family: var(--serif); color: var(--terracotta); font-style: italic; font-weight: 500; }
.hero-copy p { font-size: 12px; color: #627769; font-weight: 600; letter-spacing: .015em; }
.level-badge { position: absolute; z-index: 2; right: max(53px, calc((100vw - 1380px)/2)); top: 33px; width: 103px; height: 125px; color: var(--pine); background: rgba(255, 249, 233, .88); border: 1px solid rgba(46, 79, 59,.18); border-radius: 54px 54px 11px 11px; box-shadow: 0 5px 22px #23453512; text-align: center; display: flex; align-items: center; flex-direction: column; padding-top: 17px; }
.level-badge::after { position: absolute; content: '✳'; color: var(--terracotta); font-size: 14px; bottom: -16px; background: var(--paper); border-radius: 50%; padding: 6px; }
.level-badge span { font-size: 8px; letter-spacing: .14em; font-weight: 800; }
.level-badge strong { font-size: 46px; font-family: var(--serif); font-weight: 600; line-height: 1.07; }
.level-badge small { font-size: 9px; font-weight: 800; }
.app-shell[data-scene="courtyard"] .hero-stage { background: #d3e7dd; }
.app-shell[data-scene="town"] .hero-stage { background: #e8ddcb; }
.app-shell[data-scene="market"] .hero-stage { background: #ead9c6; }
.app-shell[data-scene="kiln"] .hero-stage { background: #e9cdb6; }
.app-shell[data-scene="harbor"] .hero-stage { background: #c5deda; }
.app-shell[data-scene="gallery"] .hero-stage { background: #e4d8d1; }

.game-layout { display: grid; grid-template-columns: minmax(200px, 244px) minmax(420px, 580px) minmax(200px, 244px); gap: 25px; justify-content: center; max-width: 1390px; padding: 26px 30px 26px; margin: auto; align-items: start; }
.left-rail, .right-rail { display: flex; flex-direction: column; gap: 19px; }
.panel { background: var(--paper); border: 1px solid #ebe9dd; border-radius: 12px; padding: 20px; box-shadow: 0 4px 18px rgba(33, 48, 37, .025); }
.tiny-diamond { display: inline-block; width: 7px; height: 7px; background: var(--terracotta); transform: rotate(45deg); margin-right: 6px; }
.level-panel { min-height: 252px; }
.level-heading { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.level-heading span { font-family: var(--serif); font-size: 27px; letter-spacing: -.035em; font-weight: 600; }
.level-heading strong { color: var(--terracotta); font-family: var(--serif); font-size: 36px; line-height: 1; }
.level-panel p { font-size: 11px; font-weight: 500; line-height: 1.6; color: #8a968b; margin: 6px 0 21px; }
.rule { background: var(--line); height: 1px; margin: 20px 0; }
.goal-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; margin-bottom: 12px; }
.goal-header strong { color: var(--terracotta); }
.progress-track { width: 100%; height: 10px; border-radius: 10px; background: #e7e8d9; overflow: hidden; }
.progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #77a38b, #3c766a); border-radius: inherit; transition: width .35s; }
.progress-footer { display: flex; justify-content: space-between; align-items: center; color: #839085; font-size: 10px; margin-top: 7px; }
.challenge-note { margin: 11px 0 0; font-size: 10px; line-height: 1.45; color: #7d9383; }
.progress-footer span:last-child { color: var(--terracotta); font-size: 17px; }
.howto-panel { min-height: 228px; background: #ebf0e5; border-color: #e3eadb; }
.howto-icon { width: 50px; height: 50px; border: 1px solid #c4d6c7; border-radius: 14px; display: grid; place-items: center; margin: 21px 0 11px; font-size: 34px; color: var(--pine-soft); }
.howto-panel strong { font-family: var(--serif); font-size: 19px; }
.howto-panel p { font-size: 11px; line-height: 1.75; color: #647b6b; margin: 8px 0 14px; }
.howto-note { display: block; font-size: 9px; font-weight: 800; color: var(--pine-soft); letter-spacing: .06em; }

.board-column { min-width: 0; }
.score-strip { display: flex; align-items: center; background: #fffdf6; height: 77px; border: 1px solid #e7e5d8; border-radius: 13px 13px 0 0; padding: 0 20px; gap: 18px; }
.stat-block { display: flex; align-items: center; gap: 13px; min-width: 122px; }
.stat-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; }
.stat-icon.star { background: #fbefd4; color: #d19a38; }
.stat-icon.turns { background: #e7eee5; color: #4d856e; }
.stat-copy { display: flex; flex-direction: column; }
.stat-copy small { color: #9ca397; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.stat-copy strong { color: var(--pine); font-family: var(--serif); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-separator { height: 38px; border-left: 1px solid #e8e7db; margin-left: 6px; }
.score-actions { display: flex; gap: 7px; margin-left: auto; }
.icon-button { display: grid; place-items: center; color: #70877d; background: #f2f4eb; border: 1px solid #e5eadf; border-radius: 11px; width: 39px; height: 39px; font-size: 22px; }
.icon-button:hover { background: #e0e9df; }
.objective-strip { display: flex; align-items: center; gap: 11px; min-height: 59px; background: #e8eee3; border: 1px solid #dce5d8; border-top: 0; padding: 9px 17px; }
.objective-symbol { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: #f9f7eb; color: var(--pine); display: grid; place-items: center; font-size: 22px; }
.objective-symbol svg { width: 34px; height: 34px; }
.objective-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.objective-copy small { color: #859785; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.objective-copy strong { color: #315b4e; font-size: 12px; font-weight: 800; }
.objective-count { font-family: var(--serif); font-size: 20px; color: var(--pine); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-frame { position: relative; padding: 18px; border: 1px solid #dec9aa; border-top: 0; border-radius: 0 0 14px 14px; background: var(--board); box-shadow: 0 8px 22px rgba(93, 58, 30,.12), inset 0 3px 8px #ffffff44; width: 100%; }
.board-frame.impact { animation: impact-shiver .28s ease-out; }
.board-paper-texture { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(25deg, transparent 0px, transparent 5px, rgba(136,89,53,.027) 6px, transparent 8px), linear-gradient(150deg, #fff9e555, transparent 55%); }
.board-instructions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 13px; color: #7e6c57; font-size: 9px; font-weight: 800; letter-spacing: .075em; }
.board-instructions strong { color: #3f7a6d; white-space: nowrap; font-size: 9px; letter-spacing: .04em; }
.board { display: grid; position: relative; z-index: 1; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; width: 100%; touch-action: none; user-select: none; }
.cell { border: 0; padding: 0; min-width: 0; min-height: 0; aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: visible; border-radius: 12px; background: rgba(140, 100, 65, .17); box-shadow: inset 0 2px 3px #5f452a0c; transition: background .15s; }
.cell.empty { background: rgba(255, 250, 234, .55); border: 1.5px dashed rgba(119, 96, 67, .32); box-shadow: inset 0 2px 9px #956f4422; }
.empty-symbol { width: 35%; height: 35%; display: grid; place-items: center; border-radius: 50%; border: 1px solid #a9906b72; color: #af9a78; font-size: clamp(13px, 1.5vw, 20px); font-weight: 400; line-height: 1; }
.cell.empty.drop-target, .cell.empty.hover-target { background: #dce9d6; border-color: #4e8d78; border-style: solid; box-shadow: inset 0 0 0 2px #85b39e, 0 0 0 2px #fef9e7; }
.cell.empty.drop-target .empty-symbol, .cell.empty.hover-target .empty-symbol { color: #326f5d; border-color: #75a48d; }
.cell.empty:hover { background: #e8ead7; }
.cell.empty.drop-target:hover, .cell.empty.hover-target:hover { background: #dce9d6; }
.cell.dragging .piece { opacity: .32; transform: scale(.86); }
.cell.hover-target:not(.empty) .piece { box-shadow: 0 0 0 3px #fff9df, 0 0 0 5px #619c83, 0 5px 0 var(--piece-shadow); }
.cell.hint .piece, .cell.empty.hint { animation: hint-glow 1s ease-in-out 2; outline: 3px solid #db9650; outline-offset: -2px; }
.cell:hover { background: rgba(255, 249, 230, .45); }
.piece { height: 100%; width: 100%; display: grid; place-items: center; border-radius: 11px; background: var(--piece-bg); box-shadow: inset 0 2px 0 rgba(255,255,255,.47), 0 4px 0 var(--piece-shadow), 0 5px 8px #513e2714; transform: translateY(-2px); transition: transform .16s, box-shadow .16s, filter .16s; }
.cell:active .piece { transform: translateY(1px) scale(.97); }
.cell.selected .piece { box-shadow: 0 0 0 3px #fffdf1, 0 0 0 6px var(--pine-soft), 0 5px 0 var(--piece-shadow); transform: translateY(-4px) scale(.96); }
.cell:focus-visible { outline-offset: 1px; z-index: 3; }
.cell[data-kind="jar"] { --piece-bg: #e4b188; --piece-shadow: #bb8465; }
.cell[data-kind="teapot"] { --piece-bg: #b8d3d8; --piece-shadow: #7aaab4; }
.cell[data-kind="bucket"] { --piece-bg: #a8d9d2; --piece-shadow: #77b3ae; }
.cell[data-kind="clay"] { --piece-bg: #e09a76; --piece-shadow: #b97256; }
.cell[data-kind="bottle"] { --piece-bg: #b2c4e2; --piece-shadow: #839fcb; }
.cell[data-kind="bowl"] { --piece-bg: #e7d79f; --piece-shadow: #c2ae70; }
.piece svg { width: 85%; height: 85%; pointer-events: none; overflow: visible; filter: drop-shadow(0 3px 1px #3d4d3e18); }
.cell.clearing .piece { animation: piece-pop .36s ease-out forwards; }
.cell.clearing[data-kind="teapot"] .piece { animation: piece-shatter .36s ease-out forwards; }
.cell.clearing[data-kind="bucket"] .piece { animation: piece-splash .36s ease-out forwards; }
.cell.clearing[data-kind="clay"] .piece { animation: piece-squelch .36s ease-out forwards; }
.cell.clearing[data-kind="jar"] .piece, .cell.clearing[data-kind="bottle"] .piece { animation: piece-tilt .36s ease-out forwards; }
.cell.just-born .piece { animation: piece-drop .32s cubic-bezier(.15,.85,.4,1.3) both; }
.cell.invalid .piece { animation: piece-invalid .26s ease-in-out; }
.board-effects { position: absolute; z-index: 4; inset: 0; pointer-events: none; overflow: hidden; }
.drag-ghost { position: absolute; width: var(--ghost-size, 58px); height: var(--ghost-size, 58px); transform: translate(-50%, -50%) scale(1.08); z-index: 3; border-radius: 12px; background: #fbf3dddc; box-shadow: 0 12px 20px #3b2e2850, 0 0 0 2px #f9f4e8; display: grid; place-items: center; }
.drag-ghost svg { width: 85%; height: 85%; filter: drop-shadow(0 3px 1px #3d4d3e27); }
.fx-particle { width: var(--sz, 7px); height: var(--sz, 7px); position: absolute; border-radius: var(--rad, 50%); background: var(--color, #fff); left: var(--x); top: var(--y); opacity: 1; animation: fx-burst .58s ease-out forwards; }
.fx-particle[data-effect="shard"] { clip-path: polygon(5% 5%, 95% 23%, 32% 100%); border-radius: 0; box-shadow: 0 0 2px #fff; }
.fx-particle[data-effect="droplet"] { border-radius: 63% 37% 54% 46%; animation: fx-splash .73s cubic-bezier(.13,.31,.5,1) forwards; }
.fx-particle[data-effect="clay"] { border-radius: 43% 57% 27% 72%; animation: fx-clay .53s ease-out forwards; }
.fx-particle[data-effect="glaze"] { box-shadow: 0 0 7px var(--color); }
.fx-ring { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; transform: translate(-50%,-50%); border: 2px solid var(--color); border-radius: 50%; opacity: .8; animation: fx-ripple .52s ease-out forwards; }
.fx-score { position: absolute; color: #fffdf0; text-shadow: 0 2px 2px #23453c70, 0 0 6px #23453c55; font-size: 17px; font-weight: 800; left: var(--x); top: var(--y); transform: translate(-50%, -40%); animation: fx-rise .8s ease-out forwards; white-space: nowrap; }
.board-footnote { display: flex; justify-content: space-between; gap: 8px; color: #83938a; align-items: center; min-height: 36px; font-size: 10px; font-weight: 600; padding: 11px 2px 0; }
.board-footnote > span:first-child { display: flex; align-items: center; gap: 8px; }
.online-status { color: #776146; background: #f4ead6; border: 1px solid #e9d8b6; border-radius: 999px; white-space: nowrap; font-size: 9px; letter-spacing: .05em; font-weight: 800; padding: 6px 9px; }
.online-status.verified { background: #e0efe4; border-color: #bcd6c4; color: #2d7054; }
.online-status.unsaved { background: #fae8da; border-color: #edcfb8; color: #9d6047; }
.board-footnote-right { font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #9eaaa0; }
.board-footnote-right span { font-size: 16px; color: var(--terracotta); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #66a888; display: inline-block; flex: 0 0 auto; }
.next-panel h2 { font-family: var(--serif); font-size: 24px; letter-spacing: -.035em; line-height: 1.15; margin: 13px 0 23px; font-weight: 600; }
.journey-stop { display: flex; align-items: center; gap: 12px; position: relative; padding: 0 0 22px; }
.journey-stop:not(:nth-last-of-type(1))::after { content: ''; position: absolute; top: 29px; left: 14px; height: 21px; border-left: 1px dashed #bfcdbf; }
.journey-stop .journey-marker { width: 29px; height: 29px; border: 1px solid #d3ded1; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #8d9b90; font-size: 11px; font-weight: 800; background: #f2f5ed; }
.journey-stop.active .journey-marker, .journey-stop.completed .journey-marker { color: #fff; background: var(--pine-soft); border-color: var(--pine-soft); }
.journey-stop span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.journey-stop strong { font-size: 11px; color: var(--ink); }
.journey-stop small { font-size: 10px; color: #9ba89c; margin-top: 3px; }
.journey-check { color: #b8c7b9; }
.journey-stop.active .journey-check { color: #5a977e; }
.text-link { padding: 8px 0 0; border: 0; background: transparent; color: var(--pine-soft); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: space-between; width: 100%; border-top: 1px solid var(--line); }
.text-link span { font-size: 16px; }
.mini-leaderboard { background: #f5eee1; border-color: #eee4d5; }
.sample-tag { display: inline-block; color: #986e4e; background: #eaddc6; border-radius: 4px; font-size: 8px; letter-spacing: .04em; padding: 3px 5px; vertical-align: middle; margin-left: 5px; }
.online-mode .sample-tag { display: none; }
.mini-row { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #e3dbcd; }
.mini-row:last-child { border-bottom: 0; }
.mini-place { color: #a99a81; font-family: var(--serif); font-size: 19px; width: 15px; text-align: center; }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; background: #c8aa88; color: #fffaf0; display: grid; place-items: center; font-size: 12px; font-family: var(--serif); }
.mini-row:nth-child(3) .mini-avatar { background: #779d8b; }
.mini-row:nth-child(4) .mini-avatar { background: #7d9bb7; }
.mini-name { flex: 1; font-size: 11px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.mini-score { font-size: 11px; font-weight: 800; }
.mini-leaderboard .text-link { border-color: #e3dbcd; margin-top: 9px; }

.section-heading { background: #e7eddf; padding: 52px max(32px, calc((100vw - 1180px)/2)); }
.section-heading h1 { font-family: var(--serif); color: var(--pine); font-weight: 600; font-size: clamp(38px, 5vw, 60px); letter-spacing: -.05em; margin: 12px 0 9px; }
.section-heading p { color: #748679; font-size: 13px; margin: 0; }
.rankings-grid, .studio-grid { max-width: 1240px; margin: 30px auto 60px; padding: 0 28px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); gap: 24px; align-items: start; }
.rankings-panel, .friends-panel, .profile-panel { padding: 27px; }
.rankings-header { display: flex; gap: 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.rankings-header h2, .friends-panel h2, .profile-panel h2 { font-family: var(--serif); font-weight: 600; font-size: 29px; letter-spacing: -.04em; margin: 9px 0 0; }
.segmented { display: flex; border-radius: 12px; padding: 4px; background: #ebeee5; gap: 2px; }
.segment { white-space: nowrap; border: 0; padding: 11px 15px; min-height: 42px; background: transparent; border-radius: 9px; color: #6b7d70; font-size: 11px; font-weight: 800; }
.segment.active { color: var(--pine); background: #fffdf6; box-shadow: 0 2px 8px #485a4810; }
.rank-row { display: flex; align-items: center; gap: 18px; padding: 18px 5px; border-bottom: 1px solid #f0ece1; }
.rank-row:last-child { border-bottom: 0; }
.rank-number { font-family: var(--serif); font-size: 24px; color: #9ca39a; width: 30px; text-align: center; }
.rank-row:nth-child(1) .rank-number { color: var(--terracotta); }
.rank-avatar { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #fff; font-family: var(--serif); font-size: 22px; }
.rank-person { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-person strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-person small { font-size: 10px; color: #9baba0; }
.rank-points { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--pine); font-variant-numeric: tabular-nums; }
.rank-points small { font-family: var(--sans); font-size: 8px; font-weight: 800; display: block; letter-spacing: .13em; text-align: right; color: #9ba9a0; }
.rank-row.is-you { background: #edf2e7; margin-inline: -10px; padding-inline: 15px; border-radius: 8px; }
.rank-disclaimer { margin-top: 17px; padding: 15px; background: #f2f0e7; border-radius: 7px; color: #7e897e; line-height: 1.6; font-size: 11px; }
.group-field-label { display: block; color: #7c9182; font-size: 10px; font-weight: 800; letter-spacing: .12em; margin: 19px 0 8px; }
.group-picker { display: block; width: 100%; min-height: 47px; border-radius: 9px; border: 1px solid #cbdace; padding: 0 12px; background: #fffdf7; color: var(--pine); font-size: 13px; font-weight: 700; }
.group-summary { margin: 13px 0 11px; color: #7c9182; font-size: 11px; line-height: 1.55; }
.group-member-heading { margin: 21px 0 0; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--pine-soft); }
.group-hint { font-size: 10px !important; color: #8c9b8f !important; margin: 9px 0 0 !important; }
.group-delete { display: block; margin-top: 25px; width: 100%; min-height: 45px; }
.group-delete:disabled { opacity: .45; }
.friend-collection .mini-row { flex-wrap: wrap; }
.group-accept { min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 1px solid #b5cdb9; background: #e5efe4; color: var(--pine); font-size: 10px; font-weight: 800; }
.friends-panel > p { margin: 12px 0 20px; line-height: 1.7; font-size: 12px; color: #809084; }
.your-code { background: #e9eee6; border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; }
.your-code small, form label { display: block; font-size: 9px; letter-spacing: .13em; color: #7c9182; font-weight: 800; margin-bottom: 8px; }
.your-code > div { display: flex; justify-content: space-between; align-items: center; }
.your-code strong { font-family: var(--serif); font-size: 24px; color: var(--pine); }
.copy-button { border: 0; min-width: 40px; min-height: 40px; background: #fff8ee; color: var(--pine); border-radius: 8px; font-size: 20px; }
.input-row { display: flex; gap: 8px; }
.input-row input { min-width: 0; flex: 1; width: 100%; border: 1px solid #dce4d9; border-radius: 8px; padding: 0 13px; min-height: 47px; background: #fffdf8; color: var(--pine); }
.input-row input::placeholder { color: #aeb8ad; }
.action-button { min-height: 47px; padding: 0 21px; border: 0; border-radius: 8px; background: var(--pine); color: #fffdf1; font-size: 12px; font-weight: 800; }
.action-button:hover { background: #275b50; }
.form-message { color: #6c9279; font-size: 11px; margin: 8px 0 4px; min-height: 18px; }
.friend-collection { padding-top: 12px; }
.friend-collection .mini-row { border-color: var(--line); }
.friend-empty { color: #8b9d8e; font-size: 11px; line-height: 1.6; }
.friend-remove { border: 0; background: #f4ede3; color: #9b7567; border-radius: 6px; min-width: 44px; min-height: 44px; font-size: 15px; }

.studio-grid { grid-template-columns: minmax(300px, .95fr) minmax(0, 1.3fr); }
.profile-panel { text-align: center; }
.profile-emblem { display: grid; place-items: center; margin: 0 auto 16px; width: 104px; height: 104px; border-radius: 50%; color: var(--pine); background: #e9c79f; box-shadow: 0 0 0 8px #f3e9d6; font-size: 57px; font-family: var(--serif); }
.profile-panel h2 { margin-bottom: 3px; }
.profile-code { font-size: 11px; font-weight: 700; color: #829487; letter-spacing: .1em; margin-bottom: 26px; }
.profile-panel form { text-align: left; }
.account-box { margin: 0 0 22px; padding: 18px; text-align: left; border-radius: 12px; background: #edf1e8; border: 1px solid #d7e0d3; }
.account-box .panel-label { color: #456956; }
.account-box p { font-size: 11px; line-height: 1.6; color: #647a6a; margin: 11px 0; }
.account-box .input-row { flex-wrap: wrap; }
.account-box .input-row .action-button { flex: 1 1 auto; padding-inline: 13px; }
.account-box .form-message { margin-top: 11px; }
.beta-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 11px; line-height: 1.5; color: #496958; }
.beta-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--pine); }
.beta-consent a, .app-footer a { color: #387765; text-decoration: underline; }
.beta-tag { background: #cfddd3; color: #38674b; border-radius: 4px; padding: 3px 5px; font-size: 8px; }
.account-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.account-actions button { flex: 1 1 auto; }
.danger-button { color: #a25349; border-color: #e4c1b9; background: #fcf4ef; }
.install-panel h2 { color: var(--pine); font-family: var(--serif); font-size: 24px; margin: 10px 0; }
.install-panel p { color: #738779; font-size: 12px; line-height: 1.7; }
.incoming-invites { margin-bottom: 16px; padding: 1px 0 9px; }
.incoming-invitation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.incoming-invitation strong { flex: 1 1 125px; font-size: 12px; color: var(--pine); }
.incoming-invitation button { min-height: 42px; padding: 0 12px; border-radius: 7px; font-size: 11px; font-weight: 800; }
.group-accept { background: var(--pine); color: #fff; border: 1px solid var(--pine); }
.setting-row { display: flex; align-items: center; text-align: left; justify-content: space-between; padding: 11px 0; gap: 15px; cursor: pointer; }
.setting-row span { display: flex; flex-direction: column; gap: 4px; }
.setting-row strong { font-size: 13px; }
.setting-row small { color: #8b998f; font-size: 11px; }
.setting-row input { accent-color: var(--pine); height: 23px; width: 23px; flex-shrink: 0; }
.setting-row output { font-family: var(--serif); color: var(--pine); font-size: 17px; font-weight: 700; }
.volume-slider { display: block; width: 100%; accent-color: var(--pine); margin: 0 0 14px; min-height: 30px; cursor: pointer; }
.studio-stats { display: flex; flex-direction: column; gap: 18px; }
.big-stat { position: relative; background: #e9efdf; padding: 30px; overflow: hidden; }
.big-stat > strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 76px; letter-spacing: -.05em; margin-top: 13px; color: var(--pine); position: relative; z-index: 1; }
.big-stat > span, .small-stats .panel > span { font-size: 10px; letter-spacing: .15em; color: #7e917d; font-weight: 800; }
.big-stat-deco { font-size: 210px; position: absolute; color: #d9e6cb; right: -15px; top: -50px; transform: rotate(-14deg); }
.small-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.small-stats .panel { padding: 23px; }
.small-stats .panel strong { display: block; font-family: var(--serif); font-weight: 600; color: var(--pine); font-size: 46px; margin: 10px 0 3px; }
.achievement-body { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.achievement-stars { color: #c88c43; font-size: 35px; letter-spacing: -.1em; white-space: nowrap; }
.achievement-body > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.achievement-body strong { color: var(--pine); font-family: var(--serif); font-size: 19px; font-weight: 600; }
.achievement-body small { color: #8b988e; font-size: 10px; line-height: 1.5; }
.level-map-panel h2 { font-family: var(--serif); color: var(--pine); font-size: 26px; margin: 10px 0 7px; font-weight: 600; }
.level-map-panel > p { color: #738579; font-size: 11px; line-height: 1.6; margin-bottom: 14px; }
.level-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.level-tile { border: 1px solid #d7ded2; border-radius: 10px; background: #fafbf4; color: var(--pine); display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 3px 9px; min-height: 73px; cursor: pointer; }
.level-tile strong { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.level-tile small { color: #bf914e; font-size: 12px; letter-spacing: -.12em; min-height: 13px; }
.level-tile.current { background: #dfece0; border-color: #618f77; box-shadow: inset 0 0 0 1px #618f77; }
.level-tile:disabled { background: #f1f2eb; color: #b7c0b6; border-style: dashed; cursor: not-allowed; }
.level-tile:disabled small { color: #b7c0b6; }
.level-tile:not(:disabled):hover { background: #e9f0e8; transform: translateY(-1px); }
.level-tile:focus-visible { outline: 3px solid #c68d63; outline-offset: 2px; }
.level-map-caption { grid-column: 1/-1; font-size: 9px; font-weight: 800; color: #88a093; letter-spacing: .1em; padding: 7px 0 2px; }
.sound-lab-panel { background: #f2efe4; }
.sound-lab-panel h2 { font-family: var(--serif); color: var(--pine); font-size: 26px; letter-spacing: -.04em; margin: 10px 0 7px; font-weight: 600; }
.sound-lab-panel p { color: #738579; font-size: 11px; line-height: 1.7; margin-bottom: 17px; }
.sound-samples { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.sound-sample-item { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sound-sample { min-height: 115px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e2ddce; border-radius: 11px; background: #fffdf4; padding: 9px 5px; color: var(--pine); transition: background .15s, transform .15s, box-shadow .15s; }
.sound-sample:hover { background: #e4eee5; transform: translateY(-2px); }
.sound-sample.playing { box-shadow: 0 0 0 2px #70a38b, 0 5px 14px #57876c2b; background: #e8f0e5; }
.sound-sample .sound-art { width: 57px; height: 57px; display: grid; place-items: center; }
.sound-sample .sound-art svg { width: 100%; height: 100%; }
.sound-sample.playing .sound-art { animation: sample-bounce .43s ease-out; }
.sound-sample strong { font-size: 10px; font-weight: 800; }
.sound-sample small { font-size: 9px; color: #a08f77; }
.sound-upload { display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #537b69; border-radius: 7px; background: #e1eadd; min-height: 40px; cursor: pointer; text-align: center; padding: 4px; }
.sound-upload:hover { background: #d0e3d4; }
.sound-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sound-reset { min-height: 32px; font-size: 9px; font-weight: 700; color: #8a684f; border: 0; border-radius: 7px; background: #f6e8d7; cursor: pointer; }
.reset-panel { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.reset-panel strong { font-size: 13px; }
.reset-panel p { font-size: 11px; line-height: 1.5; color: #91a095; margin: 5px 0 0; }
.outline-button { padding: 13px 17px; min-height: 45px; border: 1px solid #cddacc; background: #fafdf8; color: var(--pine); font-size: 11px; font-weight: 800; border-radius: 8px; }
.outline-button:hover { background: #e7eee4; }
.app-footer { display: flex; justify-content: space-between; max-width: 1390px; margin: auto; padding: 26px 30px 32px; color: #adb7a9; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.footer-spark { color: var(--terracotta); }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; background: #102f2dd6; display: grid; place-items: center; padding: 22px; backdrop-filter: blur(6px); }
.modal-backdrop[hidden] { display: none; }
.modal-card { width: min(100%, 410px); background: var(--paper); border: 6px solid #f1e4cb; outline: 1px solid #fffae8; padding: 30px; text-align: center; border-radius: 24px; box-shadow: 0 20px 80px #061c1a99; }
.modal-symbol { font-size: 56px; color: var(--terracotta); margin-bottom: 8px; }
.modal-card .eyebrow { display: block; }
.modal-card h2 { color: var(--pine); font-family: var(--serif); font-size: 39px; letter-spacing: -.05em; margin: 10px 0; }
.modal-card p { font-size: 13px; color: #78877b; line-height: 1.6; }
.modal-stars { font-size: 40px; color: #dba64c; letter-spacing: .08em; margin: -3px 0 10px; }
.modal-score { display: flex; flex-direction: column; align-items: center; background: #e9f0e5; border-radius: 11px; padding: 11px; margin: 19px 0; }
.modal-score small { color: #8a9b8d; font-size: 9px; letter-spacing: .14em; font-weight: 800; }
.modal-score strong { font-size: 40px; font-family: var(--serif); color: var(--pine); }
.modal-actions { display: flex; flex-direction: column; gap: 9px; }
.action-button.large { min-height: 53px; font-size: 14px; }

/* Tiny illustrated studio mishaps between completed levels. The visual
   language comes from the brand suite's flat clay/paper/slate palette. */
.interlude-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 16px; background: #26343adf; }
.interlude-backdrop[hidden] { display: none; }
.interlude-card { width: min(100%, 600px); padding: 15px 15px 24px; border: 5px solid #e6b55a; border-radius: 20px; background: #f7f2e8; color: #26343a; box-shadow: 0 24px 70px #102f2d88; text-align: center; }
.interlude-kicker { display: flex; justify-content: center; align-items: center; gap: 13px; padding: 5px 0 13px; font-family: 'Nunito Sans', var(--sans); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.interlude-kicker span:first-child { font-size: 18px; color: #b6543b; }
.interlude-kicker span:last-child { color: #426787; }
.interlude-stage { overflow: hidden; aspect-ratio: 560 / 270; background: #f7f2e8; border: 2px solid #26343a; border-radius: 11px; background-image: repeating-linear-gradient(18deg, #b6543b0c 0 1px, transparent 1px 8px); }
.interlude-stage svg { display: block; width: 100%; height: 100%; }
.interlude-card h2 { margin: 17px 0 4px; color: #26343a; font-family: 'Nunito Sans', var(--sans); font-size: clamp(23px, 5vw, 32px); font-weight: 900; line-height: 1.1; }
.interlude-card p { margin: 0 auto 16px; color: #426787; font-size: 13px; font-weight: 700; }
.interlude-skip { min-height: 44px; min-width: 130px; padding: 9px 22px; border: 2px solid #26343a; border-radius: 999px; background: #b6543b; color: white; font-weight: 800; font-size: 13px; }
.interlude-skip:hover { background: #99442e; }
.mishap-cat { transform-box: view-box; transform-origin: 135px 200px; animation: mishap-cat-in 2.25s both; }
.mishap-wareboard { transform-box: view-box; transform-origin: 200px 150px; animation: mishap-board-tip 2.25s both; }
.mishap-falling-cups { transform-box: view-box; transform-origin: 300px 130px; animation: mishap-cups-tumble 2.25s both; }
.mishap-shards { animation: mishap-shards-burst 2.25s both; }
.mishap-bucket { transform-box: view-box; transform-origin: 318px 188px; animation: mishap-bucket-tip 2.25s both; }
.mishap-pour { stroke-dasharray: 200; stroke-dashoffset: 200; animation: mishap-pour 2.25s both; }
.mishap-puddle { transform-box: view-box; transform-origin: 401px 218px; animation: mishap-puddle-spread 2.25s both; }
.mishap-drops { animation: mishap-drops-fly 2.25s both; }
.mishap-clay-block { transform-box: view-box; transform-origin: 279px 203px; animation: mishap-clay-drop 2.25s both; }
.mishap-clay-splat { transform-box: view-box; transform-origin: 280px 214px; animation: mishap-clay-splat 2.25s both; }
.mishap-dust { animation: mishap-dust-puff 2.25s both; }
@keyframes mishap-cat-in { 0% { transform: translateX(-185px) rotate(-6deg); } 28% { transform: translateX(0) rotate(0); } 40% { transform: translateX(8px) rotate(4deg); } 56%, 100% { transform: translateX(0); } }
@keyframes mishap-board-tip { 0%, 35% { transform: rotate(0); } 53% { transform: rotate(13deg); } 76%, 100% { transform: rotate(25deg); } }
@keyframes mishap-cups-tumble { 0%, 39% { transform: translate(0,0) rotate(0); opacity: 1; } 65% { transform: translate(28px,64px) rotate(48deg); opacity: 1; } 85%, 100% { transform: translate(36px,99px) rotate(92deg); opacity: 0; } }
@keyframes mishap-shards-burst { 0%, 64% { transform: translateY(16px) scale(.4); opacity: 0; } 80% { transform: translateY(-12px) scale(1.1); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes mishap-bucket-tip { 0%, 23% { transform: rotate(0); } 56%, 100% { transform: rotate(58deg); } }
@keyframes mishap-pour { 0%, 39% { stroke-dashoffset: 200; opacity: 0; } 48% { opacity: 1; } 83%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mishap-puddle-spread { 0%, 53% { transform: scaleX(.05); opacity: 0; } 88%, 100% { transform: scaleX(1); opacity: 1; } }
@keyframes mishap-drops-fly { 0%, 55% { opacity: 0; transform: translateY(-30px); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(15px); } }
@keyframes mishap-clay-drop { 0%, 18% { transform: translateY(-170px) rotate(-10deg); } 55% { transform: translateY(0) rotate(0) scale(1); } 64% { transform: scale(1.16,.70); } 78%, 100% { transform: scale(1,.92); } }
@keyframes mishap-clay-splat { 0%, 51% { transform: scale(.08); opacity: 0; } 68% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mishap-dust-puff { 0%, 51% { opacity: 0; transform: translateY(12px); } 67% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }

/* The expanded incident library uses a small family of hand-drawn motion
   rigs. Distinct props, staging and timings produce a unique story per level. */
.chaos-scene g[class^="chaos-"], .chaos-scene path[class^="chaos-"] { transform-box: fill-box; transform-origin: center center; }
.chaos-steady { animation: chaos-steady 2.25s both; }
.chaos-nudge { animation: chaos-nudge 2.25s both; }
.chaos-tip { animation: chaos-tip 2.25s both; transform-origin: 48% 90% !important; }
.chaos-jolt { animation: chaos-jolt 2.25s both; }
.chaos-fall { animation: chaos-fall 2.25s both; }
.chaos-launch { animation: chaos-launch 2.25s both; }
.chaos-swing { animation: chaos-swing 2.25s both; transform-origin: center top !important; }
.chaos-domino1 { animation: chaos-domino1 2.25s both; transform-origin: 50% 90% !important; }
.chaos-domino2 { animation: chaos-domino2 2.25s both; transform-origin: 50% 90% !important; }
.chaos-domino3 { animation: chaos-domino3 2.25s both; transform-origin: 50% 90% !important; }
.chaos-roll { animation: chaos-roll 2.25s both; }
.chaos-burst { animation: chaos-burst 2.25s both; }
.chaos-grow { animation: chaos-grow 2.25s both; }
.chaos-sway { animation: chaos-sway 2.25s both; }
.chaos-fly1 { animation: chaos-fly1 2.25s both; }
.chaos-fly2 { animation: chaos-fly2 2.25s both; }
.chaos-fly3 { animation: chaos-fly3 2.25s both; }
.chaos-sag { animation: chaos-sag 2.25s both; transform-origin: 50% 90% !important; }
.chaos-crack-body { animation: chaos-crack-body 2.25s both; }
.chaos-crack { stroke-dasharray: 115; animation: chaos-crack-line 2.25s both; }
.chaos-skid { animation: chaos-skid 2.25s both; }
.chaos-scurry { animation: chaos-scurry 2.25s both; }
.chaos-droop { animation: chaos-droop 2.25s both; transform-origin: 14% 40% !important; }
.chaos-wobble { animation: chaos-wobble 2.25s both; transform-origin: 50% 90% !important; }
.chaos-rain { animation: chaos-rain 2.25s both; }
.chaos-stream { stroke-dasharray: 240; stroke-dashoffset: 240; animation: chaos-stream 2.25s both; }
.chaos-puddle { animation: chaos-puddle 2.25s both; transform-origin: center bottom !important; }
.chaos-puff { animation: chaos-puff 2.25s both; }
.chaos-smoke { animation: chaos-smoke 2.25s both; }
.chaos-debris { animation: chaos-debris 2.25s both; }
@keyframes chaos-steady { 0%,100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 50% { transform: rotate(-9deg); } 75% { transform: rotate(7deg); } }
@keyframes chaos-nudge { 0%,17% { transform: translateX(-130px) rotate(-8deg); } 39% { transform: translateX(11px) rotate(4deg); } 51%,100% { transform: translateX(0); } }
@keyframes chaos-tip { 0%,34% { transform: rotate(0); } 55% { transform: rotate(-16deg); } 77%,100% { transform: rotate(73deg); } }
@keyframes chaos-jolt { 0%,45% { transform: translateX(0) rotate(0); } 52% { transform: translateX(15px) rotate(12deg); } 64% { transform: translateX(-7px) rotate(-6deg); } 100% { transform: translateX(0) rotate(4deg); } }
@keyframes chaos-fall { 0%,17% { transform: translateY(-190px) rotate(-8deg); } 55% { transform: translateY(0) rotate(0); } 63% { transform: scale(1.16,.69); } 77%,100% { transform: scale(1,.92); } }
@keyframes chaos-launch { 0%,22% { transform: translate(0,0) rotate(0); } 46% { transform: translateY(-15px) rotate(70deg); } 80%,100% { transform: translate(153px,105px) rotate(260deg); opacity: .06; } }
@keyframes chaos-swing { 0%,22% { transform: rotate(-41deg); } 47% { transform: rotate(32deg); } 64% { transform: rotate(-16deg); } 84%,100% { transform: rotate(13deg); } }
@keyframes chaos-domino1 { 0%,25% { transform: rotate(0); } 49%,100% { transform: rotate(75deg); } }
@keyframes chaos-domino2 { 0%,42% { transform: rotate(0); } 70%,100% { transform: rotate(81deg); } }
@keyframes chaos-domino3 { 0%,57% { transform: rotate(0); } 87%,100% { transform: rotate(89deg); } }
@keyframes chaos-roll { 0%,16% { transform: translateX(-80px) rotate(-70deg); } 77%,100% { transform: translateX(228px) rotate(410deg); } }
@keyframes chaos-burst { 0%,32% { transform: scale(1); } 46% { transform: scale(.83,1.15); } 63% { transform: scale(1.13,.79); } 82%,100% { transform: scale(1); } }
@keyframes chaos-grow { 0%,45% { transform: scale(.12); opacity: 0; } 72% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1.08); } }
@keyframes chaos-sway { 0%,100% { transform: rotate(-5deg); } 34% { transform: rotate(14deg); } 67% { transform: rotate(-12deg); } }
@keyframes chaos-fly1 { 0%,17% { transform: translate(0,0) rotate(0); } 100% { transform: translate(128px,-76px) rotate(71deg); opacity: .45; } }
@keyframes chaos-fly2 { 0%,31% { transform: translate(0,0) rotate(0); } 100% { transform: translate(102px,58px) rotate(-130deg); opacity: .5; } }
@keyframes chaos-fly3 { 0%,42% { transform: translate(0,0) rotate(0); } 100% { transform: translate(58px,-103px) rotate(95deg); opacity: .3; } }
@keyframes chaos-sag { 0%,25% { transform: scale(1) rotate(0); } 64% { transform: scale(1.12,.67) rotate(9deg); } 86%,100% { transform: scale(1.08,.76) rotate(12deg); } }
@keyframes chaos-crack-body { 0%,37% { transform: translateX(0); } 43% { transform: translateX(5px); } 49% { transform: translateX(-4px); } 58%,100% { transform: translateX(0) rotate(3deg); } }
@keyframes chaos-crack-line { 0%,46% { stroke-dashoffset: 115; opacity: 0; } 54% { opacity: 1; } 89%,100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes chaos-skid { 0%,20% { transform: translateX(-85px) rotate(-6deg); } 59% { transform: translateX(220px) rotate(13deg); } 73%,100% { transform: translateX(206px) rotate(-4deg); } }
@keyframes chaos-scurry { 0%,12% { transform: translateX(-65px) translateY(0); } 25% { transform: translateX(10px) translateY(-6px); } 38% { transform: translateX(76px) translateY(0); } 50% { transform: translateX(129px) translateY(-7px); } 64%,100% { transform: translateX(208px) translateY(0); } }
@keyframes chaos-droop { 0%,25% { transform: rotate(-8deg); } 60% { transform: rotate(32deg) translateY(7px); } 80%,100% { transform: rotate(55deg) translateY(20px); } }
@keyframes chaos-wobble { 0%,23% { transform: rotate(0); } 35% { transform: rotate(8deg); } 47% { transform: rotate(-10deg); } 61% { transform: rotate(12deg); } 80%,100% { transform: rotate(-7deg); } }
@keyframes chaos-rain { 0%,22% { transform: translateY(-59px); opacity: 0; } 38% { opacity: 1; } 100% { transform: translateY(82px); opacity: 0; } }
@keyframes chaos-stream { 0%,35% { stroke-dashoffset: 240; opacity: 0; } 48% { opacity: 1; } 85%,100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes chaos-puddle { 0%,46% { transform: scaleX(.04); opacity: 0; } 84%,100% { transform: scaleX(1); opacity: 1; } }
@keyframes chaos-puff { 0%,45% { transform: translateY(16px) scale(.15); opacity: 0; } 69% { transform: translateY(-9px) scale(1); opacity: .87; } 100% { transform: translateY(-26px) scale(1.3); opacity: 0; } }
@keyframes chaos-smoke { 0%,15% { transform: translateY(87px) scale(.65); opacity: 0; } 53% { opacity: .85; } 100% { transform: translateY(-35px) scale(1.3); opacity: .18; } }
@keyframes chaos-debris { 0%,51% { transform: translateY(15px) scale(.35); opacity: 0; } 71% { transform: translateY(-11px) scale(1.08); opacity: 1; } 100% { transform: translateY(1px) scale(1); opacity: .9; } }

@keyframes piece-pop { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.18) rotate(7deg); opacity: .9; } 100% { transform: scale(.15) rotate(32deg); opacity: 0; } }
@keyframes piece-shatter { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.15) rotate(-9deg); filter: brightness(1.35); } 100% { transform: scale(.22) rotate(50deg); opacity: 0; filter: blur(4px); } }
@keyframes piece-splash { 0% { transform: scale(1); } 35% { transform: scale(1.18, .84); } 100% { transform: scale(1.5, .1); opacity: 0; } }
@keyframes piece-squelch { 0% { transform: scale(1); } 35% { transform: scale(1.18,.62); } 65% { transform: scale(1.35,.45); } 100% { transform: scale(1.6,.16); opacity: 0; } }
@keyframes piece-tilt { 0% { transform: rotate(0) scale(1); } 42% { transform: rotate(-22deg) scale(1.13); } 100% { transform: rotate(80deg) scale(.2); opacity: 0; } }
@keyframes piece-drop { from { transform: translateY(-30px) scale(.80); opacity: .25; } 70% { opacity: 1; } to { transform: translateY(-2px) scale(1); } }
@keyframes piece-invalid { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes fx-burst { to { transform: translate(var(--dx),var(--dy)) rotate(230deg) scale(.38); opacity: 0; } }
@keyframes fx-splash { 0% { transform: translate(0,0) scale(.8); opacity: 1; } 37% { opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) rotate(70deg) scale(.45); opacity: 0; } }
@keyframes fx-clay { 0% { transform: scale(.35); opacity: 1; } 55% { transform: scale(1.3,.50); opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(.85,.25); opacity: 0; } }
@keyframes fx-ripple { to { width: 95px; height: 95px; border-width: 1px; opacity: 0; } }
@keyframes impact-shiver { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-1.7px); } 60% { transform: translateX(1.7px); } }
@keyframes sample-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes fx-rise { from { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -65px); } }
@keyframes hint-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.16) saturate(1.22); } }

@media (max-width: 1160px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) minmax(410px, 570px); max-width: 910px; }
  .left-rail { display: none; }
  .right-rail { grid-column: 1; grid-row: 1; }
  .board-column { grid-column: 2; grid-row: 1; }
  .hero-copy { padding-left: 30px; }
  .right-rail .next-panel { min-height: 330px; }
}
@media (max-width: 780px) {
  .topbar { padding: 0 18px; height: 74px; }
  .brand { min-width: auto; }
  .brand-type { font-size: 13px; }
  .brand-type strong:last-child { font-size: 14px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-mark svg { width: 27px; height: 27px; }
  .header-profile { display: none; }
  .main-nav { gap: 0; }
  .nav-link { padding: 0 9px; font-size: 11px; }
  .nav-icon { display: none; }
  .hero-stage { min-height: 186px; height: auto; }
  .hero-copy { padding: 26px 20px; }
  .hero-copy h1 { font-size: 34px; }
  .level-badge { display: none; }
  .game-layout { display: flex; flex-direction: column; padding: 18px 16px 26px; max-width: 620px; gap: 18px; }
  .board-column { order: 1; width: 100%; }
  .right-rail { order: 2; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .right-rail .next-panel { min-height: 0; }
  .board-frame { padding: 14px; }
  .board { gap: 5px; }
  .piece { border-radius: 9px; }
  .cell { border-radius: 10px; }
  .rankings-grid, .studio-grid { grid-template-columns: 1fr; max-width: 640px; }
  .section-heading { padding: 35px 23px; }
  .section-heading h1 { font-size: 42px; }
}
@media (max-width: 520px) {
  .topbar { height: 68px; padding: 0 10px; }
  .brand { gap: 5px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand-mark svg { width: 24px; height: 24px; }
  .brand-type { font-size: 10px; letter-spacing: .06em; }
  .brand-type strong:last-child { font-size: 11px; }
  .nav-link { font-size: 10px; padding: 0 6px; }
  .hero-stage { min-height: 161px; height: auto; }
  .hero-copy h1 { font-size: 28px; margin: 11px 0 6px; }
  .hero-copy p { font-size: 10px; }
  .eyebrow { font-size: 8px; }
  .board-frame { padding: 9px; }
  .board-instructions { font-size: 7px; margin-bottom: 9px; }
  .board-instructions strong { font-size: 7px; }
  .board { gap: 3px; }
  .cell { border-radius: 7px; }
  .piece { border-radius: 7px; box-shadow: inset 0 1px 0 #ffffff77, 0 3px 0 var(--piece-shadow); }
  .piece svg { width: 91%; height: 91%; }
  .score-strip { padding: 0 11px; height: 68px; gap: 8px; }
  .objective-strip { padding: 7px 10px; min-height: 54px; }
  .objective-symbol { width: 31px; height: 31px; }
  .objective-symbol svg { width: 30px; height: 30px; }
  .objective-copy strong { font-size: 10px; }
  .objective-count { font-size: 16px; }
  .stat-block { gap: 8px; min-width: 0; }
  .stat-icon { height: 32px; width: 32px; font-size: 17px; border-radius: 8px; }
  .stat-copy small { font-size: 7px; }
  .stat-copy strong { font-size: 21px; }
  .stat-separator { height: 30px; margin: 0 2px; }
  .icon-button { width: 32px; height: 32px; border-radius: 8px; font-size: 17px; }
  .score-actions { gap: 4px; }
  .right-rail { grid-template-columns: 1fr; }
  .board-footnote { font-size: 9px; }
  .board-footnote { align-items: start; flex-wrap: wrap; }
  .online-status { font-size: 8px; }
  .board-footnote-right { display: none; }
  .rankings-grid, .studio-grid { padding: 0 14px; margin-top: 16px; }
  .rankings-panel, .friends-panel, .profile-panel { padding: 17px; }
  .rankings-header { display: block; }
  .segmented { margin-top: 17px; width: fit-content; }
  .rank-row { gap: 10px; }
  .rank-points { font-size: 20px; }
  .small-stats { gap: 10px; }
  .reset-panel { flex-direction: column; align-items: stretch; }
  .app-footer { padding: 15px 18px 29px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
.app-shell.reduce-motion *, .app-shell.reduce-motion *::before, .app-shell.reduce-motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }

#heroAccountButton { margin-top: 12px; max-width: 100%; white-space: normal; }
[hidden] { display: none !important; }
.leaderboard-tabs { display: flex; gap: 10px; max-width: 1184px; margin: 24px auto 0; padding: 0 14px; }
.leaderboard-tabs button { border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; background: var(--cream, #f9f6ef); color: var(--pine-dark); font: inherit; cursor: pointer; }
.leaderboard-tabs button[aria-selected="true"] { background: var(--pine-dark); color: white; }
.public-rank-wrap { max-width: 1240px; margin: 24px auto 60px; padding: 0 28px; }
.public-rank-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.public-rank-table th, .public-rank-table td { padding: 15px 8px; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.public-rank-table th:first-child { width: 20%; white-space: nowrap; }
.public-rank-table th:last-child { width: 30%; }
.public-rank-table td:last-child, .public-rank-table th:last-child { text-align: right; }
#globalRankStatus { line-height: 1.5; color: #627769; font-size: 13px; }
@media (max-width: 600px) { .public-rank-wrap { padding: 0 14px; } #globalRefresh { margin-top: 12px; } }

@media (max-width: 360px) { .main-nav { gap: 2px; } .nav-link { padding-left: 5px; padding-right: 5px; white-space: nowrap; } }

/* Account fields remain readable on narrow phones. */
.auth-form { display: grid; gap: 12px; margin-top: 20px; min-width: 0; }
.auth-form input:not([type="checkbox"]), .auth-form > button { width: 100%; min-width: 0; box-sizing: border-box; }
.auth-form input:not([type="checkbox"]) { font-size: 16px; border: 1px solid #dce4d9; border-radius: 8px; padding: 12px 13px; min-height: 47px; background: #fffdf8; color: var(--pine); }
.auth-form p { margin: 0 0 8px; }
.auth-form .beta-consent { margin: 4px 0; }
.auth-switch { flex-wrap: wrap; }
.auth-switch button { flex: 1 1 120px; }
.auth-switch [aria-pressed="true"] { box-shadow: 0 3px 0 var(--terracotta, #b97758); }
#passwordSettings { margin: 24px 0; text-align: left; }
#passwordSettings summary { cursor: pointer; font-weight: 700; }