/* Smashi / The Click. Theme tokens apply to every room state. */
:root {
  color-scheme: light;
  --canvas: #f7f5f0; --surface: #ffffff; --surface-alt: #eeece6;
  --ink: #191b24; --muted: #626371; --line: #d9d7d2; --input-line: #92929b;
  --coral: #ff6b78; --lilac: #b79aff; --accent: #ac3048; --accent-soft: #ffe8e9;
  --on-brand: #191b24; --positive: #187450; --positive-soft: #e5f5ec; --negative: #b33047;
  --header: rgba(247,245,240,.94); --shadow: 0 20px 60px -35px rgba(33,23,34,.28);
  --focus: #6d44c5; --hero-disc: #e6dcf9;
  --radius: 24px; --ease: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0d0f17; --surface: #191c27; --surface-alt: #242735;
  --ink: #faf9f6; --muted: #b1b2c3; --line: #363947; --input-line: #76798c;
  --accent: #ff8b98; --accent-soft: #38212d; --positive: #77deb0; --positive-soft: #163b30;
  --negative: #ff8b98; --header: rgba(13,15,23,.94); --shadow: 0 24px 70px -35px rgba(0,0,0,.65);
  --focus: #cbb7ff; --hero-disc: #302844;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.55 'Plus Jakarta Sans', sans-serif; min-height: 100vh; display:flex; flex-direction:column; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, a, input { touch-action: manipulation; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { line-height: 1.12; letter-spacing: -.045em; }
h2 { font-size: clamp(28px,3vw,38px); }
h3 { font-size: 20px; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.icon { width: 22px; height: 22px; flex-shrink: 0; display: inline-block; vertical-align: middle; fill: none; }
.hidden,[hidden] { display: none !important; }
.skip-link { position: fixed; top: -90px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--surface); border: 2px solid var(--focus); border-radius: 12px; }
.skip-link:focus { top: 12px; }
.app-header { position: sticky; top: 0; background: var(--header); backdrop-filter: blur(16px); z-index: 30; border-bottom: 1px solid var(--line); padding: max(16px,env(safe-area-inset-top)) 28px 16px; }
.header-container { max-width:1120px; margin:auto; display:flex; align-items:center; gap:28px; }
.brand { background:none; border:0; padding:5px 0; min-height:44px; flex-shrink:0; }
.brand img { width:154px; height:auto; }
.brand-dark { display:none; }
[data-theme="dark"] .brand-light { display:none; }
[data-theme="dark"] .brand-dark { display:block; }
.header-note { font-size:12px; color:var(--muted); border-left:1px solid var(--line); padding-left:24px; }
.header-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.how-link { font-size:13px; text-decoration:none; font-weight:700; margin-right:16px; padding:12px 0; }
.how-link:hover { color:var(--accent); }
.icon-btn { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; background:transparent; transition:background 180ms; }
.icon-btn:hover { background:var(--surface-alt); }
#soundIcon { display:flex; }
.app-main { width:min(100% - 56px,1120px); margin:0 auto; flex:1; }
.view { display:none; width:100%; }
.view.active { display:block; animation:arrive 300ms var(--ease); }
.view:not(#viewHome) { max-width:640px; margin:48px auto 64px; }
.hero-copy { min-width:0; }
.hero-section { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:center; min-height:520px; padding:54px 0 62px; }
.eyebrow { font-size:10px; letter-spacing:.15em; font-weight:800; color:var(--muted); display:inline-flex; gap:8px; align-items:center; }
.eyebrow-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; }
h1 { font-size:clamp(48px,5.5vw,76px); font-weight:800; line-height:1.03; margin:22px 0; letter-spacing:-.065em; }
.hero-emphasis { position:relative; color:var(--accent); }
.hero-subtitle { font-size:17px; line-height:1.75; color:var(--muted); }
.hero-cta { display:inline-flex; gap:16px; align-items:center; margin-top:26px; min-height:48px; font-size:14px; font-weight:800; text-decoration:none; border-bottom:2px solid var(--ink); }
.hero-cta:hover { gap:24px; color:var(--accent); border-color:var(--accent); }
.hero-reassurance { display:flex; align-items:center; gap:8px; margin-top:20px; color:var(--muted); font-size:11px; }
.hero-reassurance .icon { width:17px; height:17px; }
.hero-art { min-width:0; height:395px; position:relative; isolation:isolate; }
.hero-orbit { position:absolute; width:360px; height:360px; border-radius:50%; background:var(--hero-disc); top:22px; left:75px; z-index:-1; }
.photo-card { position:absolute; width:230px; height:300px; border:6px solid var(--surface); border-radius:22px; box-shadow:0 18px 40px -20px rgba(0,0,0,.5); overflow:hidden; }
.photo-card img { width:100%; height:100%; object-fit:cover; }
.photo-card-back { left:5px; top:35px; transform:rotate(-12deg); }
.photo-card-back > span { position:absolute; bottom:0; width:100%; padding:38px 16px 18px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.85)); font-size:17px; font-weight:700; }
.photo-card-front { left:190px; top:52px; transform:rotate(9deg); }
.photo-card-caption { position:absolute; bottom:0; padding:65px 18px 18px; width:100%; color:white; background:linear-gradient(transparent,rgba(0,0,0,.88)); }
.photo-card-caption span { font-size:9px; font-weight:700; letter-spacing:.14em; }
.photo-card-caption strong { display:block; font-size:24px; letter-spacing:-.035em; margin-top:4px; line-height:1.1; }
.hero-match { position:absolute; bottom:2px; left:62px; background:var(--surface); border:1px solid var(--line); padding:12px 25px 12px 12px; border-radius:18px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; transform:rotate(-4deg); }
.match-mini-icon { display:grid; place-items:center; background:var(--positive-soft); color:var(--positive); border-radius:50%; width:40px; height:40px; }
.hero-match strong { font-size:14px; display:block; }.hero-match small { color:var(--muted); font-size:11px; }
.hero-doodle { position:absolute; right:4px; top:0; color:var(--accent); transform:rotate(10deg); }.hero-doodle .icon { width:42px; height:42px; }
.room-builder { background:var(--surface); padding:30px; border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); scroll-margin-top:105px; }
.builder-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; }
.builder-heading h2 { margin-top:8px; font-size:30px; }
.mode-tabs { display:flex; background:var(--surface-alt); padding:4px; border-radius:14px; flex-shrink:0; gap:3px; }
.mode-tab { border:0; border-radius:10px; background:transparent; font-size:12px; font-weight:700; color:var(--muted); padding:12px 20px; min-height:44px; transition:background 180ms,color 180ms; }
.mode-tab.active { color:var(--ink); background:var(--surface); box-shadow:0 2px 5px rgba(0,0,0,.08); }
.mode-tab:hover { color:var(--ink); }
.tab-pane { display:none; }.tab-pane.active { display:block; }
.deck-fieldset { padding:0; border:0; margin:0 0 28px; min-width:0; }
.deck-fieldset legend { color:var(--muted); font-size:13px; margin-bottom:16px; padding:0; }
.deck-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.deck-card { padding:0; background:var(--surface); border:1px solid var(--line); border-radius:17px; text-align:left; overflow:hidden; transition:box-shadow 200ms, border-color 200ms,transform 200ms; min-width:0; }
.deck-card:hover { transform:translateY(-3px); border-color:var(--input-line); }
.deck-card.selected { box-shadow:0 0 0 2px var(--accent); border-color:var(--accent); }
.deck-visual { position:relative; height:145px; display:block; background:var(--surface-alt); }
.deck-visual > img { width:100%; height:100%; object-fit:cover; }
.deck-check { position:absolute; top:10px; right:10px; display:grid; place-items:center; background:var(--accent); color:var(--surface); border-radius:50%; width:25px; height:25px; opacity:0; }
[data-theme="dark"] .deck-check { color:var(--on-brand); }
.deck-check .icon { width:16px; height:16px; }.selected .deck-check { opacity:1; }
.deck-category-icon { display:grid; place-items:center; position:absolute; bottom:10px; left:10px; background:#fff; color:#191b24; width:30px; height:30px; border-radius:9px; }.deck-category-icon .icon { width:17px; height:17px; }
.deck-info { display:block; padding:16px 13px; }.deck-title { display:block; font-size:14px; font-weight:800; letter-spacing:-.035em; }.deck-desc { display:block; color:var(--muted); font-size:12px; line-height:1.5; margin-top:5px; }
.custom-art { display:grid; height:100%; place-items:center; background:#e8dfff; position:relative; overflow:hidden; }
.custom-art:before,.custom-art:after { content:''; position:absolute; border:1px solid #b9a0e5; width:130px; height:130px; border-radius:28px; transform:rotate(20deg); }.custom-art:after { width:165px; height:165px; transform:rotate(40deg); }
.custom-art > img { z-index:1; transform:rotate(-10deg); }.custom-art-dot { position:absolute; height:15px; width:15px; border-radius:50%; background:#ff6b78; top:20px; right:35px; }
.create-details { display:grid; grid-template-columns:1fr 1fr 190px; align-items:end; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:8px; min-width:0; }
label { font-size:12px; font-weight:700; }.optional { font-weight:400; color:var(--muted); }
input { width:100%; min-width:0; min-height:50px; padding:12px 14px; border:1px solid var(--input-line); border-radius:12px; background:var(--surface); color:var(--ink); font-size:14px; transition:border-color 180ms; }
input::placeholder { color:var(--muted); opacity:1; }input:hover { border-color:var(--ink); }input[aria-invalid="true"] { border-color:var(--negative); }
.btn-primary,.btn-secondary,.btn-ghost,.btn-ghost-sm { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 20px; border-radius:12px; font-size:13px; font-weight:800; text-decoration:none; border:1px solid transparent; transition:background 180ms,transform 180ms; }
.btn-primary { background:var(--coral); color:var(--on-brand); }.btn-primary:hover:not(:disabled) { background:#ff8c96; transform:translateY(-1px); }.btn-primary:active:not(:disabled) { transform:translateY(1px); }
.btn-secondary { background:var(--surface-alt); border-color:var(--line); color:var(--ink); }.btn-secondary:hover { border-color:var(--input-line); }
.btn-ghost,.btn-ghost-sm { background:transparent; color:var(--muted); }.btn-ghost:hover,.btn-ghost-sm:hover { background:var(--surface-alt); color:var(--ink); }
.btn-large { min-height:50px; }.btn-arrow { font-size:20px; }
.form-note { font-size:12px; color:var(--muted); margin-top:16px; }
.field-error { color:var(--negative); font-size:13px; margin:12px 0 0; }
.custom-deck-area { padding:20px; margin-bottom:24px; background:var(--surface-alt); border-radius:16px; }.custom-items-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }.btn-ghost-sm { padding-left:0; }
.join-form { max-width:750px; margin:auto; padding:8px 0; }.join-intro { text-align:center; margin-bottom:24px; }.section-icon { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:16px; background:var(--accent-soft); color:var(--accent); margin-bottom:15px; }.join-intro p { color:var(--muted); font-size:14px; margin-top:10px; }.join-fields { display:grid; grid-template-columns:1fr 1fr 150px; gap:16px; align-items:end; }.input-code { letter-spacing:.18em; text-transform:uppercase; }
.how-section { display:grid; grid-template-columns:1fr 2fr; gap:42px; padding:70px 0; scroll-margin-top:100px; }.how-heading h2 { font-size:27px; margin-top:14px; }.how-steps { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; margin:0; gap:30px; }.step-number { font-size:11px; color:var(--accent); font-weight:800; display:block; margin-bottom:20px; }.how-steps h3 { font-size:16px; line-height:1.3; letter-spacing:-.035em; }.how-steps p { font-size:12px; color:var(--muted); line-height:1.7; margin-top:10px; }
.app-footer { width:min(100% - 56px,1120px); margin:auto; border-top:1px solid var(--line); padding:24px 0 max(24px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:24px; color:var(--muted); font-size:11px; }.app-footer a { margin-left:auto; text-underline-offset:4px; padding:12px 0; }.footer-brand { opacity:1; }
.card-glass { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.badge,.deck-tag { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:7px 12px; border-radius:9px; font-size:11px; font-weight:700; background:var(--accent-soft); color:var(--accent); }.badge .icon { width:16px; height:16px; }
.lobby-header { text-align:center; }.lobby-title { margin:18px 0 24px; overflow-wrap:anywhere; }
.room-code-box { background:var(--surface-alt); border:1px dashed var(--input-line); border-radius:18px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:4px; }.room-code-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.13em; }.room-code-display { font-size:42px; font-weight:800; letter-spacing:.16em; margin-left:.16em; }
.share-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:20px 0 28px; }.share-actions button { font-size:12px; padding:10px 12px; }.share-actions button > span { display:inline-flex; align-items:center; gap:8px; }
.qr-container { text-align:center; background:#fff; border-radius:16px; padding:20px; margin-bottom:24px; color:#252634; }.qr-container img { margin:auto; }.qr-hint { font-size:12px; margin-top:12px; }
.roster-header { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:14px; }.pulse-indicator { width:7px; height:7px; border-radius:50%; background:var(--positive); }
.participant-list { display:flex; gap:10px; flex-wrap:wrap; }.participant-badge { display:flex; align-items:center; gap:8px; font-size:13px; padding:10px 12px; background:var(--surface-alt); border-radius:12px; }.participant-badge .icon { width:16px; height:16px; }.participant-avatar { background:var(--hero-disc); color:var(--ink); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:11px; }.participant-badge small { color:var(--muted); }.participant-badge.is-host { border:1px solid var(--line); }
.lobby-footer { margin-top:28px; }.lobby-footer .btn-primary { width:100%; }.waiting-msg { color:var(--muted); padding:18px 0 0; text-align:center; font-size:13px; }.spinner { display:inline-block; width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin 800ms linear infinite; vertical-align:middle; }
.swipe-container { max-width:460px; margin:auto; }.swipe-top-bar { display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; margin-bottom:22px; }.deck-tag { font-size:10px; }.progress-pill { font-size:11px; color:var(--muted); }.room-pill { font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--muted); border-left:1px solid var(--line); padding-left:10px; }
.card-deck-wrapper { padding-bottom:24px; }.card-deck { position:relative; height:540px; }.swipe-card { position:absolute; inset:0; border-radius:26px; overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column; user-select:none; touch-action:pan-y; will-change:transform; }
.card-image-box { height:56%; position:relative; flex-shrink:0; background:var(--surface-alt); }.card-image-box img { width:100%; height:100%; object-fit:cover; pointer-events:none; }.card-gradient-overlay { display:none; }
.card-body { padding:22px 24px; display:flex; flex:1; flex-direction:column; justify-content:space-between; gap:12px; }.card-subtitle { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-weight:800; margin-bottom:8px; }.card-title { font-size:25px; line-height:1.08; letter-spacing:-.045em; }.card-desc { font-size:12px; line-height:1.6; color:var(--muted); margin-top:10px; }.card-tags { display:flex; flex-wrap:wrap; gap:6px; }.tag-pill { color:var(--muted); background:var(--surface-alt); border-radius:6px; padding:4px 7px; font-size:9px; }
.card-stamp { position:absolute; top:32px; z-index:20; font-size:30px; font-weight:800; border:4px solid currentColor; padding:6px 16px; border-radius:8px; opacity:0; background:var(--surface); }.stamp-smash { color:var(--positive); left:20px; transform:rotate(-16deg); }.stamp-pass { color:var(--negative); right:20px; transform:rotate(16deg); }
.swipe-controls { display:flex; justify-content:center; gap:22px; align-items:center; margin-top:6px; }.control-btn { width:76px; height:76px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:transform 180ms, background 180ms; }.control-btn:hover { transform:scale(1.06); }.control-btn:active { transform:scale(.96); }.control-btn .icon { width:25px; height:25px; }.control-label { font-size:9px; font-weight:800; letter-spacing:.06em; }.btn-smash { background:var(--coral); color:var(--on-brand); border-color:var(--coral); }.btn-pass { color:var(--negative); }.btn-undo { width:48px; height:48px; color:var(--muted); }.btn-undo .icon { width:19px; height:19px; }.keyboard-hint { font-size:10px; text-align:center; color:var(--muted); margin-top:20px; }
.text-center { text-align:center; }.waiting-animation { display:grid; place-items:center; margin:20px auto 30px; width:115px; height:115px; background:var(--hero-disc); border-radius:50%; }.waiting-subtitle { font-size:14px; color:var(--muted); margin:18px auto 30px; max-width:360px; }.friends-status-box { padding:12px 20px; background:var(--surface-alt); border-radius:16px; }.status-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; }.status-row:last-child { border:0; }.status-state { font-size:11px; color:var(--muted); }.status-state.done { color:var(--positive); }.status-row .icon { width:15px; height:15px; margin-right:5px; }
.match-header { text-align:center; margin-bottom:28px; }.match-badge { display:inline-flex; gap:8px; align-items:center; color:var(--positive); font-size:10px; font-weight:800; letter-spacing:.1em; }.match-badge .icon { width:18px; height:18px; }.match-headline { margin:14px 0 0; font-size:32px; }.winning-card-preview { overflow:hidden; border:1px solid var(--line); border-radius:20px; }.winner-image-container { height:250px; position:relative; background:var(--surface-alt); }.winner-image-container > img { width:100%; height:100%; object-fit:cover; }.winner-overlay { position:absolute; bottom:-18px; right:20px; }.winner-trophy { display:grid; place-items:center; width:48px; height:48px; border:4px solid var(--surface); border-radius:50%; color:var(--on-brand); background:var(--coral); }.winner-info { padding:26px 24px 24px; }.winner-title { font-size:25px; }.winner-subtitle { color:var(--accent); font-size:12px; font-weight:700; margin:10px 0; }.winner-desc { color:var(--muted); font-size:13px; }.match-actions { display:flex; flex-direction:column; gap:10px; margin-top:24px; }.match-actions > * { width:100%; }.match-actions span { display:inline-flex; align-items:center; gap:10px; }
.consensus-header h2 { margin:20px 0 14px; }.consensus-header p { font-size:14px; color:var(--muted); }.leaderboard-list { display:flex; flex-direction:column; gap:12px; margin:24px 0; }.leaderboard-item { display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:14px; }.rank-badge { font-weight:800; font-size:12px; color:var(--muted); flex-shrink:0; }.rank-1 { color:var(--accent); }.leaderboard-thumb { height:62px; width:62px; object-fit:cover; border-radius:9px; }.leaderboard-title { font-size:13px; font-weight:700; line-height:1.4; }.leaderboard-score { color:var(--muted); font-size:10px; margin-top:5px; }.consensus-actions button { width:100%; }
.toast-container { position:fixed; z-index:100; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:10px; width:max-content; max-width:calc(100% - 32px); pointer-events:none; }.toast { padding:14px 20px; border-radius:14px; background:var(--ink); color:var(--canvas); font-size:13px; box-shadow:var(--shadow); text-align:center; }
body:not([data-view="home"]) .how-link { display:none; }
.credits-page { max-width:850px; margin:50px auto; padding:0 24px; }.credits-page h1 { font-size:42px; }.credits-page h2 { font-size:25px; margin:35px 0 15px; }.credits-page p,.credits-page li { color:var(--muted); font-size:14px; margin:12px 0; }.credits-page a { text-underline-offset:4px; }
@keyframes arrive { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:1050px) {
  .header-note { display:none; }.hero-section { gap:10px; }.hero-art { transform:scale(.78); transform-origin:top left; margin-left:0; }.hero-section h1 { font-size:60px; }.deck-grid { gap:12px; }.deck-visual { height:125px; }.deck-info { padding:13px 10px; }.deck-title { font-size:14px; }.deck-desc { font-size:12px; }.create-details { grid-template-columns:1fr 1fr 160px; }.how-section { grid-template-columns:1fr; gap:30px; }.how-heading h2 br { display:none; }
}
@media (max-width:900px) {
  .hero-section { grid-template-columns:minmax(0,1fr); padding:40px 0 30px; gap:20px; }
  .hero-copy { text-align:center; }.hero-reassurance { justify-content:center; }
  .hero-art { width:440px; max-width:100%; margin:0 auto; height:395px; transform:scale(.9); transform-origin:top center; }
}
@media (max-width:760px) {
  .app-header { padding-left:20px; padding-right:20px; }.app-main,.app-footer { width:calc(100% - 40px); }.hero-section { min-height:0; padding:40px 0; grid-template-columns:minmax(0,1fr); }.hero-copy { text-align:center; }.hero-section h1 { font-size:clamp(44px,9vw,64px); }.hero-subtitle { font-size:15px; }.hero-reassurance { justify-content:center; }.hero-art { width:440px; max-width:100%; margin:8px auto -15px; height:345px; transform:scale(.85); transform-origin:top center; }.hero-orbit { width:320px; height:320px; left:65px; }.photo-card { width:215px; height:275px; }.photo-card-back { left:0; }.photo-card-front { left:185px; top:45px; }.hero-match { bottom:-5px; }.hero-cta { margin-top:16px; }.hero-doodle { right:0; }.builder-heading { align-items:flex-start; }.builder-heading h2 { font-size:26px; }.builder-heading .eyebrow { font-size:8px; }.room-builder { padding:24px; }.mode-tab { padding:10px 13px; font-size:11px; }.deck-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.deck-visual { height:160px; }.deck-title { font-size:14px; }.deck-desc { font-size:12px; }.deck-info { padding:14px; }.create-details,.join-fields { grid-template-columns:1fr 1fr; }.create-details .btn-primary,.join-fields .btn-primary { grid-column:1/-1; }.how-section { padding:48px 0; }.how-steps { gap:25px; }.footer-brand { display:none; }.app-footer { font-size:10px; }.view:not(#viewHome) { margin-top:30px; }.custom-items-list { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .app-header { padding:12px 16px; }.app-main,.app-footer { width:calc(100% - 32px); }.brand img { width:130px; }.header-container { gap:10px; }.how-link { display:none; }.icon-btn { width:44px; height:44px; }.hero-section { padding-top:32px; padding-bottom:18px; }.hero-art { height:290px; width:370px; transform:scale(.78); margin-top:10px; margin-bottom:-12px; }.photo-card { width:200px; height:255px; }.photo-card-back { left:-2px; top:20px; }.photo-card-front { left:163px; top:30px; }.hero-orbit { width:300px; height:300px; left:48px; top:0; }.hero-match { bottom:-24px; left:26px; }.hero-doodle { top:-8px; }.hero-copy .eyebrow { font-size:9px; }.hero-subtitle { font-size:16px; }.hero-reassurance { font-size:12px; }.room-builder { padding:20px 16px; border-radius:22px; }.builder-heading { flex-direction:column; gap:20px; }.builder-heading h2 { font-size:29px; }.builder-heading .eyebrow { font-size:9px; }.mode-tabs { width:100%; }.mode-tab { flex:1; font-size:12px; }.deck-fieldset legend { font-size:12px; }.deck-grid { gap:12px; }.deck-visual { height:115px; }.deck-info { padding:13px 10px; }.deck-title { font-size:14px; }.deck-desc { font-size:12px; }.create-details,.join-fields { grid-template-columns:1fr; }.form-group input { font-size:16px; }.custom-items-list input { font-size:16px; }.form-note { font-size:12px; line-height:1.6; }.how-section { padding:42px 0; }.how-heading h2 { font-size:26px; }.how-steps { grid-template-columns:1fr; gap:22px; }.how-steps li { display:grid; grid-template-columns:34px 1fr; column-gap:14px; }.step-number { grid-row:1/3; margin:0; padding-top:2px; }.how-steps p { margin-top:6px; }.how-steps h3 { font-size:17px; }.card-glass { padding:24px 18px; }.share-actions { gap:6px; }.share-actions button { font-size:11px; padding:10px; }.share-actions .icon { width:17px; height:17px; }.lobby-title { font-size:28px; }.card-deck { height:510px; }.card-body { padding:20px; }.card-title { font-size:23px; }.card-image-box { height:51%; }.card-desc { font-size:12px; }.swipe-top-bar { gap:8px; }.deck-tag { padding:6px 9px; font-size:9px; }.progress-pill { font-size:10px; }.room-pill { font-size:9px; }.keyboard-hint { display:none; }.swipe-controls { padding-bottom:env(safe-area-inset-bottom); }.match-headline { font-size:28px; }.winner-image-container { height:230px; }.winner-info { padding:24px 18px 18px; }.leaderboard-item { padding:10px; gap:9px; }.leaderboard-thumb { width:50px; height:50px; }.leaderboard-title { font-size:12px; }
}
@media (max-width:360px) { .hero-section h1 { font-size:36px; }.hero-art { transform:scale(.67); margin-left:-20px; margin-bottom:-50px; }.brand img { width:120px; }.room-builder { padding:18px 12px; }.deck-info { padding:12px 8px; }.deck-title { font-size:13px; }.deck-desc { font-size:12px; }.swipe-top-bar .room-pill { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none !important; transition:none !important; }.deck-card:hover,.btn-primary:hover,.control-btn:hover { transform:none; } }