/* Layout map
   top-left: title · top-right: actions (beaches, challenge, collection, photo, settings)
   right edge: tilt slider + 🌊 big-wave button · bottom: toolbar, turn slider above it,
   tool options (brush / molds / decor) above that. Settings (language, tide, demo, reset) live in a sheet. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe0df; font-family: 'PingFang TC', 'Hiragino Sans', 'Apple SD Gothic Neo', 'Microsoft JhengHei', 'Meiryo', 'Malgun Gothic', 'Noto Sans TC', system-ui, sans-serif; color: #fff; -webkit-user-select: none; user-select: none; touch-action: none; }
/* per-language CJK fonts so kanji/hanja use the right regional glyphs */
html:lang(ja) body { font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', system-ui, sans-serif; }
html:lang(ko) body { font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif; word-break: keep-all; }
html:lang(en) body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font-family: inherit; }

:root {
  --cream: rgba(255, 250, 240, .93);
  --brown: #8a5a2b;
  --red: #e8443a;
  --lift: 0 4px 0 rgba(150, 100, 50, .22), 0 8px 20px rgba(0, 0, 0, .14);
  --sl: env(safe-area-inset-left); --sr: env(safe-area-inset-right);
  --st: env(safe-area-inset-top); --sb: env(safe-area-inset-bottom);
}

/* ---------- title ---------- */
.title { position: fixed; left: calc(22px + var(--sl)); top: calc(14px + var(--st)); pointer-events: none; text-shadow: 0 3px 0 rgba(120, 80, 30, .35), 0 6px 18px rgba(0, 0, 0, .25); }
.title h1 { margin: 0; font: 800 46px/1 'Baloo 2', sans-serif; letter-spacing: 1px; color: #fffaf0; }
.title h1 span { color: var(--red); margin: 0 4px; }
.title h1 span.b { margin: 0; }
.title .legal { pointer-events: auto; display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 6px 0 0 3px; max-width: 300px; font-size: 11.5px; text-shadow: 0 1px 3px rgba(60, 35, 10, .55); }
.title .legal a { color: rgba(255, 250, 240, .85); text-decoration: none; }
.title .legal a:hover { text-decoration: underline; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.legal-links a, .settings .brand a { color: #1d7f96; }
.settings .brand { margin: 8px 0 0; font-size: 12.5px; opacity: .75; }
html:lang(en) .title p { display: none; }
.title p { margin: -2px 0 0 3px; font-weight: 700; letter-spacing: 6px; font-size: 15px; }

/* ---------- top-right actions ---------- */
.actions { position: fixed; right: calc(18px + var(--sr)); top: calc(14px + var(--st)); display: flex; gap: 8px; z-index: 5; }
.actions button { position: relative; border: 0; cursor: pointer; min-width: 64px; height: 58px; padding: 0 6px; border-radius: 16px; background: var(--cream); color: var(--brown); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: var(--lift); transition: transform .2s; }
.actions button i { font-style: normal; font-size: 24px; line-height: 1; }
.actions button b { font-size: 12px; white-space: nowrap; }
.actions button:hover { transform: translateY(-2px); }
.actions button.pop { transform: scale(1.2); }
.actions .badge { position: absolute; top: -7px; right: -8px; padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff; font: 800 11px 'Baloo 2', sans-serif; }

/* ---------- toolbar ---------- */
.tools { position: fixed; left: 50%; bottom: calc(18px + var(--sb)); transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; border-radius: 22px; background: var(--cream); box-shadow: 0 5px 0 rgba(150, 100, 50, .25), 0 10px 30px rgba(0, 0, 0, .2); z-index: 4; }
.tools button { border: 0; cursor: pointer; width: 70px; height: 66px; border-radius: 16px; background: transparent; color: var(--brown); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: background .15s, transform .15s; }
.tools button i { font-style: normal; font-size: 26px; line-height: 1; }
.tools button b { font-size: 13px; white-space: nowrap; }
.tools button:hover { background: rgba(232, 68, 58, .1); transform: translateY(-2px); }
.tools button.on { background: var(--red); color: #fff; box-shadow: 0 3px 0 #a92a22; }
.tools .sep { width: 1px; margin: 8px 2px; background: rgba(138, 90, 43, .25); }
.tools button.act i { font-size: 30px; font-weight: 700; }

/* ---------- tool options (stack above the turn slider) ---------- */
.opts { position: fixed; left: 50%; bottom: calc(150px + var(--sb)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 4; pointer-events: none; }
.opts > * { pointer-events: auto; }
.decor, .brushbar { display: none; gap: 4px; padding: 6px; border-radius: 16px; background: var(--cream); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); color: var(--brown); }
.decor.show, .brushbar.show { display: flex; }
.decor button { border: 0; cursor: pointer; padding: 6px 10px; border-radius: 12px; background: transparent; color: var(--brown); font-size: 18px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.decor button b { font-size: 12px; }
.decor button.on { background: #f5d9a8; }
.decor button.locked { opacity: .45; }
.brushbar { align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.brushbar input { width: 150px; accent-color: var(--red); }
.brushbar .dot { display: block; border-radius: 50%; background: var(--brown); opacity: .55; }
.brushbar .dot.s { width: 6px; height: 6px; } .brushbar .dot.l { width: 14px; height: 14px; }

/* ---------- camera sliders ---------- */
.camv, .camh { position: fixed; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255, 250, 240, .85); color: var(--brown); box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.camv .ico, .camh .ico { font-size: 13px; font-weight: 700; width: 16px; text-align: center; opacity: .8; }
.camh { left: 50%; transform: translateX(-50%); bottom: calc(110px + var(--sb)); }
.camh input { width: 240px; }
.camv { flex-direction: column; right: calc(22px + var(--sr)); bottom: calc(112px + var(--sb)); }
.camv .track { position: relative; width: 22px; height: 170px; }
.camv .track input { position: absolute; left: 50%; top: 50%; width: 170px; transform: translate(-50%, -50%) rotate(-90deg); margin: 0; }
.camv input, .camh input { accent-color: var(--red); }

/* ---------- big wave button ---------- */
.fab { position: fixed; right: calc(18px + var(--sr)); bottom: calc(24px + var(--sb)); z-index: 4; width: 66px; height: 66px; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(160deg, #3ab6c8, #1d8aa3); color: #fff; box-shadow: 0 4px 0 #13697d, 0 10px 24px rgba(0, 0, 0, .22); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transition: transform .15s; }
.fab i { font-style: normal; font-size: 26px; line-height: 1; }
.fab b { font-size: 11px; white-space: nowrap; }
.fab:active { transform: scale(.92); }

/* ---------- selection bar (hand tool) ---------- */
.selbar { position: fixed; left: 50%; top: calc(16px + var(--st)); transform: translateX(-50%); display: none; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--cream); color: var(--brown); font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); z-index: 6; white-space: nowrap; }
.selbar.show { display: flex; }
.selbar button { border: 0; cursor: pointer; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--brown); font-weight: 700; font-size: 12.5px; box-shadow: 0 2px 0 rgba(150, 100, 50, .25); }
.selbar #selDel { background: var(--red); color: #fff; }

/* ---------- challenge HUD ---------- */
.hud { position: fixed; left: 50%; top: calc(14px + var(--st)); transform: translateX(-50%); display: none; flex-direction: column; gap: 6px; padding: 10px 14px; min-width: 300px; border-radius: 18px; background: var(--cream); color: var(--brown); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); z-index: 5; }
.hud.show { display: flex; }
.hud-top { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.hud-top span { font-weight: 700; color: var(--red); }
.hud-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sandbar { flex: 1; height: 10px; border-radius: 99px; background: #ead8b8; overflow: hidden; }
.sandbar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #d6a865, #f0cf8e); transition: width .2s; }
.sandbar i.low { background: var(--red); }
.hud-row em { font-style: normal; font-weight: 700; min-width: 52px; }
.hud-flags { letter-spacing: 2px; }
.hud .btns button, .modal .btns button { flex: 1; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 12px; background: #fff; color: var(--brown); font-weight: 700; font-size: 13.5px; box-shadow: 0 2px 0 rgba(150, 100, 50, .3); }
.hud .btns button.primary, .modal .btns button.primary { background: var(--red); color: #fff; box-shadow: 0 3px 0 #a92a22; }
.challenge .free-only, .challenge #btnChallenge { display: none !important; }

/* ---------- sheets (levels, codex, results, photo preview, settings) ---------- */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 60, 70, .45); z-index: 20; }
.modal.show { display: flex; }
.sheet { position: relative; width: min(640px, 100%); max-height: calc(100% - 20px); overflow: auto; padding: 20px 22px; border-radius: 22px; background: #fffaf0; color: var(--brown); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.sheet h2 { margin: 0 0 6px; font-size: 22px; display: flex; align-items: baseline; gap: 10px; }
.sheet h2 span { font: 800 16px 'Baloo 2', sans-serif; color: var(--red); }
.sheet h2 span.t { font: inherit; color: inherit; }
.sheet .sub { margin: 0 0 12px; font-size: 13.5px; opacity: .85; }
.mclose { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f3e4c8; color: var(--brown); font-size: 16px; cursor: pointer; }
.modal .btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.settings { width: min(420px, 100%); }
.settings section { padding: 12px 0; border-top: 1px dashed #e3cfa9; }
.settings section:first-of-type { border-top: 0; }
.settings h3 { margin: 0 0 8px; font-size: 15px; }
.settings .langs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.settings .langs button { border: 0; cursor: pointer; padding: 10px; border-radius: 12px; background: #fff; color: var(--brown); font-weight: 700; font-size: 14px; box-shadow: 0 2px 0 rgba(150, 100, 50, .25); }
.settings .langs button.on { background: var(--red); color: #fff; box-shadow: 0 3px 0 #a92a22; }
.settings label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; margin: 6px 0; }
.settings label.chk { font-weight: 500; }
.settings input { accent-color: var(--red); }
.settings label.range input { flex: 1; }
.settings .btns { margin-top: 4px; }
.levels { display: flex; flex-direction: column; gap: 8px; }
.level { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 16px; background: #fff; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 0 rgba(150, 100, 50, .2); }
.level:hover:not(:disabled) { background: #fff3dc; }
.level.here { outline: 3px solid #2f7fe0; }
.level .num { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #2f7fe0; color: #fff; display: grid; place-items: center; font: 800 20px 'Baloo 2', sans-serif; }
.venue-modal .level .num { background: #e9f5f4; font-size: 22px; }
.level .info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.level .info b { font-size: 15.5px; }
.level small { font-size: 12.5px; opacity: .85; }
.level .meta { opacity: .65; }
.level .best { flex: none; color: #f0a020; font-size: 20px; letter-spacing: 1px; }
.level.locked { opacity: .5; cursor: default; }
.level.locked .num { background: #b8a58a; }
.result { text-align: center; }
.result .big { font-size: 46px; color: #f0a020; letter-spacing: 6px; margin: 4px 0; }
.result .big .off { color: #e6d6bb; }
.result ul { list-style: none; padding: 0; margin: 10px 0 0; font-weight: 700; font-size: 14px; }
.codex { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.codex .card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 0; border-radius: 14px; background: #fff; color: inherit; cursor: pointer; box-shadow: 0 2px 0 rgba(150, 100, 50, .2); }
.codex .card img { width: 72px; height: 72px; }
.codex .card.unknown img { filter: brightness(0) opacity(.18); }
.codex .card b { font-size: 13px; }
.codex .card small { font-size: 11.5px; opacity: .7; }
.codex .card.r2 { background: #eef8ff; } .codex .card.r3 { background: #f6efff; } .codex .card.r4 { background: #fff4d6; }
.codex .card.unknown { background: #f6efe2; }
.codex-detail { min-height: 40px; margin: 12px 2px 8px; font-size: 13.5px; line-height: 1.6; }
.unlocks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; padding-top: 10px; border-top: 1px dashed #e3cfa9; }
.unlocks .ok { color: #3c8d4a; font-weight: 700; }
.shot { display: block; width: 100%; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.shot-status { min-height: 18px; margin: 10px 2px 0; font-size: 13.5px; font-weight: 700; opacity: .8; }
.shot-status.ok { color: #3c8d4a; opacity: 1; }

/* ---------- photo mode ---------- */
.photo .title, .photo .actions, .photo .tools, .photo .opts, .photo .fab, .photo .camv, .photo .camh, .photo .hint, .photo .hud, .photo .selbar { display: none !important; }
.photoui { display: none; }
.photo .photoui { display: block; }
.pclose { position: fixed; right: calc(18px + var(--sr)); top: calc(16px + var(--st)); width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cream); color: var(--brown); font-size: 18px; cursor: pointer; z-index: 5; }
.phint { position: fixed; left: 50%; top: calc(22px + var(--st)); transform: translateX(-50%); margin: 0; font-size: 13px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); pointer-events: none; }
.pbar { position: fixed; left: 50%; bottom: calc(112px + var(--sb)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 24px); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.chips button { border: 0; cursor: pointer; padding: 6px 14px; border-radius: 999px; background: rgba(255, 250, 240, .85); color: var(--brown); font-weight: 700; font-size: 13px; }
.chips button.on { background: var(--red); color: #fff; }
.popts { display: flex; gap: 14px; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgba(255, 250, 240, .85); color: var(--brown); font-size: 13px; font-weight: 700; flex-wrap: wrap; justify-content: center; }
.popts label { display: flex; align-items: center; gap: 6px; }
.popts input { accent-color: var(--red); }
.shutter { position: fixed; left: 50%; bottom: calc(24px + var(--sb)); transform: translateX(-50%); width: 74px; height: 74px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .95); background: var(--red); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); cursor: pointer; }
.shutter:active { transform: translateX(-50%) scale(.92); }
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; }
.flash.go { animation: flash .45s ease-out; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }

/* ---------- misc ---------- */
.hint { position: fixed; left: calc(22px + var(--sl)); bottom: calc(22px + var(--sb)); margin: 0; font-size: 12.5px; opacity: .9; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); max-width: 230px; pointer-events: none; }
@media (max-width: 1100px) { .hint { display: none; } }
.toast { position: fixed; left: 50%; top: 22%; transform: translate(-50%, 10px); padding: 10px 22px; border-radius: 999px; background: rgba(255, 250, 240, .95); color: var(--brown); font-weight: 700; font-size: 17px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); z-index: 8; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- painted icons (Gemini art in icons/ui) ---------- */
img.ic { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.actions button i, .tools button i, .fab i { display: block; width: 30px; height: 30px; }
.tools button i { width: 34px; height: 34px; }
.tools button.on i { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.fab i { width: 36px; height: 36px; }
.fab { background: radial-gradient(circle at 35% 30%, #fffdf6, #f3e3c3); box-shadow: 0 4px 0 rgba(150, 100, 50, .35), 0 10px 24px rgba(0, 0, 0, .22); color: var(--brown); }
.decor button img.ic { width: 26px; height: 26px; }
.hic { width: 26px; height: 26px; vertical-align: -6px; margin-right: 6px; }
.sheet h2 .hic { width: 30px; height: 30px; }
.venue-modal .level .num { width: 54px; height: 54px; background: none; }
.works { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #e3cfa9; }
.works h3 { margin: 0 0 4px; font-size: 17px; }
.worksave { width: 100%; border: 0; cursor: pointer; padding: 10px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 3px 0 #a92a22; }
.worklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.worklist .empty { grid-column: 1 / -1; margin: 4px 2px; font-size: 13px; opacity: .7; }
.work { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 rgba(150, 100, 50, .2); }
.work img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 8px; }
.work .winfo { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.work .winfo b { font-size: 13.5px; } .work .winfo small { font-size: 12px; opacity: .7; }
.work .wbtns { display: flex; gap: 6px; }
.work .wbtns button { flex: 1; border: 0; cursor: pointer; padding: 6px; border-radius: 10px; background: #f3e4c8; color: var(--brown); font-weight: 700; font-size: 12.5px; }
.work .wbtns button.primary { background: var(--red); color: #fff; }
.challenge #btnVenue { display: none !important; }
.venue-modal .level .num img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- phone, upright ---------- */
@media (max-width: 760px) {
  .title { left: calc(12px + var(--sl)); top: calc(12px + var(--st)); }
  .title h1 { font-size: 19px; }
  .title p, .title .legal { display: none; }
  .actions { top: calc(10px + var(--st)); right: calc(8px + var(--sr)); gap: 4px; }
  .actions button { min-width: 0; width: 42px; height: 42px; padding: 0; border-radius: 12px; }
  .actions button i { font-size: 20px; width: 28px; height: 28px; }
  .actions button b { display: none; }
  .tools { gap: 2px; padding: 5px; bottom: calc(10px + var(--sb)); max-width: calc(100% - 16px); }
  .tools button { width: 40px; height: 56px; }
  .tools button i { font-size: 21px; width: 28px; height: 28px; }
  .tools button b { font-size: 10px; letter-spacing: -0.5px; }
  .camh { bottom: calc(82px + var(--sb)); padding: 4px 8px; }
  .camh input { width: 210px; }
  .opts { bottom: calc(118px + var(--sb)); width: calc(100% - 16px); }
  .decor { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .decor button { padding: 5px 8px; font-size: 16px; }
  .camv { right: calc(6px + var(--sr)); bottom: auto; top: 24%; padding: 4px; }
  .camv .track { height: 150px; }
  .camv .track input { width: 150px; }
  .fab { right: calc(8px + var(--sr)); bottom: auto; top: calc(24% + 212px); width: 54px; height: 54px; }
  .fab i { font-size: 21px; width: 30px; height: 30px; } .fab b { font-size: 10px; }
  .selbar { top: calc(60px + var(--st)); font-size: 12px; }
  .hud { top: calc(60px + var(--st)); min-width: 0; width: calc(100% - 16px); padding: 8px 10px; }
  .codex { grid-template-columns: repeat(3, 1fr); }
  .codex .card img { width: 60px; height: 60px; }
  .sheet { padding: 16px 14px; }
}

/* narrow phones (e.g. 360 px Android): keep the logo clear of the buttons */
@media (max-width: 400px) {
  .title h1 { font-size: 16px; }
  .actions button { width: 39px; height: 40px; }
  .actions { gap: 3px; }
}

/* ---------- phone held sideways: tools in a left column ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .title, .hint, .phint { display: none; }
  .actions { top: calc(8px + var(--st)); right: calc(8px + var(--sr)); gap: 5px; }
  .actions button { min-width: 0; width: 44px; height: 42px; padding: 0; border-radius: 12px; }
  .actions button i { font-size: 19px; width: 28px; height: 28px; }
  .actions button b { display: none; }
  .tools { left: calc(8px + var(--sl)); top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 2px; padding: 5px; max-width: none; border-radius: 18px; }
  .tools button { width: 54px; height: 36px; border-radius: 12px; gap: 0; }
  .tools button i { font-size: 18px; width: 22px; height: 22px; }
  .tools button i svg { width: 20px; height: 20px; }
  .tools button b { font-size: 10px; }
  .tools button.act i { font-size: 20px; }
  .tools .sep { width: auto; height: 1px; margin: 2px 6px; }
  .opts { left: calc(76px + var(--sl)); bottom: auto; top: 50%; transform: translateY(-50%); align-items: flex-start; width: auto; }
  .decor { flex-direction: column; flex-wrap: nowrap; padding: 5px; gap: 2px; }
  .decor button { padding: 3px 10px; font-size: 15px; }
  .decor button img.ic { width: 22px; height: 22px; }
  .decor button b { font-size: 11px; }
  .brushbar input { width: 110px; }
  .camh { bottom: calc(8px + var(--sb)); padding: 3px 8px; }
  .camh input { width: 220px; }
  .camv { right: calc(10px + var(--sr)); bottom: calc(10px + var(--sb)); top: auto; padding: 3px; }
  .camv .track { height: 120px; }
  .camv .track input { width: 120px; }
  .camv .ico { display: none; }
  .fab { right: calc(10px + var(--sr)); top: calc(60px + var(--st)); bottom: auto; width: 50px; height: 50px; }
  .fab i { font-size: 19px; width: 26px; height: 26px; } .fab b { font-size: 9.5px; }
  .selbar { top: calc(8px + var(--st)); }
  .hud { top: calc(8px + var(--st)); min-width: 0; width: min(330px, calc(100% - 300px)); padding: 6px 10px; gap: 4px; }
  .hud-top { font-size: 12.5px; }
  .hud .btns button { padding: 5px 8px; font-size: 12px; }
  .toast { top: 30%; font-size: 15px; }
  .pbar { bottom: calc(10px + var(--sb)); gap: 6px; }
  .chips button { padding: 4px 11px; font-size: 12px; }
  .popts { padding: 4px 12px; font-size: 12px; }
  .shutter { left: auto; right: calc(20px + var(--sr)); bottom: auto; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; }
  .shutter:active { transform: translateY(-50%) scale(.92); }
  .sheet { max-height: calc(100% - 16px); padding: 14px 16px; }
  .settings section { padding: 8px 0; }
  .settings .langs { grid-template-columns: repeat(4, 1fr); }
  .codex { grid-template-columns: repeat(6, 1fr); }
  .codex .card img { width: 52px; height: 52px; }
  .level { padding: 6px 10px; }
}