:root {
    --ink: #1a1812;
    --muted: #746f62;
    --cream: #fff9df;
    --paper: #fffdf5;
    --teal: #087d70;
    --teal-dark: #035c54;
    --yellow: #fde726;
    --gold: #9a7900;
    --line: rgba(44, 38, 17, .14);
    --shadow: 0 18px 48px rgba(64, 51, 12, .14);
    --app-background: #fffdf5;
    --board-background: #fff9db;
    --surface: #fffdf6;
    --surface-soft: #f4f1e5;
    --navy: #14283b;
    --sunny: #fde726;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--app-background); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: linear-gradient(135deg, var(--app-background), color-mix(in srgb, var(--app-background), #c9eadf 18%)); font-family: Inter, ui-rounded, "Arial Rounded MT Bold", Arial, sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #2db9aa; outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .45; }
[hidden] { display: none !important; }

#app { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
#app-header { position: sticky; top: 0; z-index: 100; height: 62px; padding: 7px max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: rgba(255, 253, 245, .92); backdrop-filter: blur(16px); }
.header-inner { position: relative; width: min(1180px, 100%); height: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.header-left { min-width: 0; display: flex; align-items: center; gap: 8px; }
#app-screen-title { grid-column: 2; min-width: 0; display: grid; justify-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; line-height: 1; text-transform: uppercase; }
#app-screen-title-primary { display: block; font-size: .94rem; font-weight: 1000; letter-spacing: .1em; }
#app-screen-title-secondary { display: block; margin-top: 4px; color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .14em; }
#brand-logo { width: 76px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; }
#brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; font-size: 1.25rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.menu-button { gap: 4px; align-content: center; background: var(--teal); }
.menu-button span { width: 19px; height: 2px; display: block; border-radius: 2px; background: #fff; }
#app-menu-button { grid-column: 3; justify-self: end; }
#app-menu { position: absolute; top: 58px; right: 12px; width: min(260px, calc(100vw - 24px)); padding: 8px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 18px; background: #fffdf7; box-shadow: var(--shadow); }
#app-menu button { padding: 13px 15px; border: 0; border-radius: 11px; background: transparent; text-align: left; font-weight: 800; cursor: pointer; }
#app-menu button:hover { background: #f3f8ec; color: var(--teal-dark); }

#app-main { position: relative; width: 100%; }
.page-back-button { position: absolute; z-index: 20; top: 11px; left: max(12px, calc((100% - 1180px) / 2 + 16px)); min-height: 34px; padding: 3px 9px 3px 5px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; color: var(--teal-dark); background: rgba(255,255,255,.82); box-shadow: 0 5px 16px rgba(20,40,59,.09); cursor: pointer; }
.page-back-button > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #e5f5f1; font-size: 1.45rem; line-height: 1; }
.page-back-button > small { font-size: .7rem; font-weight: 900; letter-spacing: .02em; }
.page-back-button:hover { color: #fff; background: var(--teal); }.page-back-button:hover > span { color: var(--teal-dark); background: #fff; }
.screen { width: min(1180px, 100%); min-height: calc(100vh - 116px); margin: 0 auto; padding: 28px 18px 46px; }
.eyebrow { margin: 0 0 10px; color: var(--teal); font-size: .72rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 14px; font-size: clamp(2rem, 10vw, 4.8rem); line-height: .95; letter-spacing: -.045em; }
.section-heading { max-width: 680px; margin: 0 auto 26px; text-align: center; }
.section-heading h1 { font-size: clamp(2rem, 8vw, 3.7rem); }
.section-heading > p:last-child, .about-card > p { color: var(--muted); line-height: 1.6; }

.primary-button, .secondary-button, .text-button { min-height: 48px; padding: 12px 18px; border-radius: 15px; font-weight: 900; cursor: pointer; }
.primary-button { border: 1px solid var(--teal); color: #fff; background: var(--teal); box-shadow: 0 9px 22px rgba(8, 125, 112, .22); }
.primary-button:hover { background: var(--teal-dark); }
.secondary-button { border: 1px solid var(--line); background: rgba(255, 255, 255, .88); }
.secondary-button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-dark); }
.text-button { border: 0; background: transparent; color: var(--teal-dark); }

.home-screen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; overflow: hidden; text-align: center; isolation: isolate; }
.home-screen::before { content: ""; position: absolute; z-index: -1; inset: 18px clamp(12px, 7vw, 86px); border: 1px solid rgba(44, 38, 17, .1); border-radius: 34px; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,249,219,.45)); box-shadow: 0 18px 50px rgba(64,51,12,.07); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow { margin-bottom: 7px; animation: hero-label-arrive 1.05s cubic-bezier(.2,.75,.2,1) both; }
.hero-copy h1 { margin: 0; font-size: clamp(2.45rem, 11vw, 4rem); line-height: .98; }
.hero-word { display: inline-block; animation: hero-word-arrive 1.35s cubic-bezier(.16,.8,.22,1) both; }
.hero-word-think { --hero-word-x: -42px; animation-delay: .12s; }
.hero-word-slide { --hero-word-x: 0px; animation-delay: .3s; }
.hero-word-solve { --hero-word-x: 42px; color: var(--teal); animation-delay: .48s; }
.hero-actions { width: min(100%, 430px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.hero-product { position: relative; width: min(88vw, 440px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 43%, #7ce1d9 0 30%, #43c6bd 54%, rgba(67,198,189,.18) 72%, transparent 73%); isolation: isolate; }
.hero-product::after { content: ""; position: absolute; z-index: -1; left: 17%; right: 17%; bottom: 8%; height: 12%; border-radius: 50%; background: rgba(4,73,66,.22); filter: blur(15px); }
#home-product-viewer { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
#home-product-viewer canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
.home-product-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--teal-dark); font-size: .75rem; font-weight: 900; letter-spacing: .05em; transition: opacity .2s ease; }
#home-product-viewer.is-ready .home-product-loading { opacity: 0; pointer-events: none; }
#home-product-viewer.has-error { border: 1px dashed rgba(8,125,112,.35); }

@keyframes hero-label-arrive {
    from { opacity: 0; transform: translateY(-18px); letter-spacing: .28em; }
    to { opacity: 1; transform: translateY(0); letter-spacing: .17em; }
}
@keyframes hero-word-arrive {
    0% { opacity: 0; transform: translate3d(var(--hero-word-x), 20px, 0) scale(.96); filter: blur(5px); }
    65% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

.centered-screen { display: grid; align-content: center; }
.difficulty-panel { width: min(100%, 560px); margin: 0 auto; padding: 12px; display: grid; gap: 9px; border: 1px solid rgba(20,40,59,.1); border-radius: 26px; background: rgba(255,253,246,.92); box-shadow: 0 20px 54px rgba(53,47,18,.12); }
.difficulty-level { min-height: 88px; padding: 14px 16px 14px 19px; display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; align-items: center; gap: 14px; border: 1px solid rgba(20,40,59,.1); border-radius: 17px; color: var(--navy); background: #fff; cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.difficulty-level:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 9px 22px rgba(8,125,112,.12); }
.difficulty-level:active { transform: translateY(0); }
.difficulty-level.recommended { border-color: #e6c300; background: linear-gradient(145deg, #fffef0, #fff3a2); }
.level-copy { min-width: 0; display: grid; gap: 4px; }
.level-copy strong { color: var(--teal-dark); font-size: 1.25rem; font-weight: 1000; }
.level-copy small { color: var(--muted); font-size: .78rem; font-weight: 700; }
.level-moves { min-width: 60px; display: grid; justify-items: end; line-height: 1; }
.level-moves b { font-size: 1.16rem; }
.level-moves small { margin-top: 4px; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.level-arrow { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); font-size: 1.15rem; font-weight: 900; }

.game-screen { --game-board-size: min(60vh, 600px); position: relative; width: min(760px, calc(100% - 24px)); max-width: 760px; min-height: auto; margin: 22px auto 34px; padding: 18px 24px 22px; border: 1px solid rgba(20,40,59,.1); border-radius: 30px; background: rgba(255,253,246,.92); box-shadow: 0 22px 60px rgba(53,47,18,.13); }
.game-hud { width: min(100%, var(--game-board-size)); margin: 0 auto 8px; display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); align-items: center; gap: 8px; }
.game-hud .hud-stat { min-height: 54px; padding: 7px 8px; border: 1px solid rgba(20,40,59,.1); border-radius: 15px; background: #fff; box-shadow: 0 6px 16px rgba(20,40,59,.06); text-align: center; }
.game-hud .hud-stat:nth-child(1) { background: #e8f7f3; }.game-hud .hud-stat:nth-child(2) { background: #fff4a8; }.game-hud .hud-stat:nth-child(3) { background: #edf3f8; }
.game-hud small, .game-hud strong { display: block; }
.game-hud small { color: #5c635f; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.game-hud strong { margin-top: 2px; color: var(--navy); font-size: 1.18rem; }
.game-message { position: absolute; z-index: 5; top: 12px; left: 12px; max-width: calc(100% - 70px); min-height: 32px; padding: 7px 11px; display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(8,125,112,.15); border-radius: 999px; color: var(--teal-dark); background: rgba(255,253,246,.94); box-shadow: 0 7px 20px rgba(20,40,59,.12); text-align: left; font-size: .78rem; font-weight: 900; pointer-events: none; }
.game-message::before { content: ""; width: 7px; height: 7px; margin-right: 7px; flex: 0 0 auto; border-radius: 50%; background: #22a88f; box-shadow: 0 0 0 4px rgba(34,168,143,.13); }
#viewer-section { width: 100%; display: grid; place-items: center; }
#viewer { position: relative; width: min(100%, var(--game-board-size)); aspect-ratio: 1; overflow: hidden; border: 3px solid rgba(255,255,255,.88); border-radius: 27px; background: radial-gradient(circle, color-mix(in srgb, var(--board-background), white 18%) 0, var(--board-background) 72%); box-shadow: 0 16px 38px rgba(20,40,59,.16); }
#viewer canvas { width: 100%; height: 100%; display: block; cursor: default; touch-action: none; }
#viewer.is-explore canvas { cursor: grab; }
#viewer.is-explore canvas:active { cursor: grabbing; }
#viewer.is-tile-dragging { box-shadow: 0 0 0 3px rgba(8,125,112,.18), var(--shadow); }
#viewer-status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; font-size: .86rem; }
#tile-nav-panel { width: 126px; margin: 9px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); justify-content: center; gap: 4px; border: 0; background: transparent; box-shadow: none; }
.tile-nav-arrow, #tile-nav-selected { display: grid; place-items: center; border-radius: 9px; }
.tile-nav-arrow { border: 1px solid #74b8ae; background: #d8f0eb; color: #044f49; box-shadow: 0 3px 9px rgba(3,92,84,.11); font-size: 1rem; font-weight: 1000; cursor: pointer; }
.tile-nav-arrow:hover:not(:disabled) { color: #fff; border-color: var(--teal); background: var(--teal); }
.tile-nav-arrow:disabled { color: #315f5a; border-color: #8eb8b1; background: #d4e3df; opacity: .88; }
#tile-nav-selected { grid-column: 2; grid-row: 2; color: var(--navy); border: 1px solid #ead15b; background: #fff19a; box-shadow: 0 3px 9px rgba(154,121,0,.12); font-size: .78rem; font-weight: 1000; }
.tile-nav-up { grid-column: 2; grid-row: 1; }.tile-nav-left { grid-column: 1; grid-row: 2; }.tile-nav-right { grid-column: 3; grid-row: 2; }.tile-nav-down { grid-column: 2; grid-row: 3; }
.direction-control-wrap { width: min(100%, var(--game-board-size)); margin: 0 auto; display: none; }
.direction-toggle { position: absolute; z-index: 8; top: 25px; right: 24px; min-height: 28px; padding: 3px 5px 3px 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbe4de; border-radius: 999px; color: var(--teal-dark); background: #edf8f5; font-size: .68rem; font-weight: 900; cursor: pointer; box-shadow: 0 4px 12px rgba(20,40,59,.08); }
.direction-toggle i { position: relative; width: 28px; height: 16px; display: block; border-radius: 999px; background: #bdcdc9; transition: background .16s ease; }
.direction-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .16s ease; }
.direction-toggle[aria-expanded="true"] { color: var(--teal-dark); border-color: #8fcfc5; background: #edf8f5; }
.direction-toggle[aria-expanded="true"] i { background: var(--teal); }
.direction-toggle[aria-expanded="true"] i::after { transform: translateX(12px); }
.game-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, var(--game-board-size)); margin: 8px auto 0; }
.game-actions button { min-height: 44px; padding: 9px; border-radius: 13px; font-size: .92rem; }
#game-hint { color: #fff; border-color: var(--teal); background: var(--teal); box-shadow: 0 8px 20px rgba(8,125,112,.18); }
#game-hint:hover { background: var(--teal-dark); }
.view-controls { position: absolute; z-index: 6; top: 12px; right: 12px; display: flex; align-items: center; }
.view-controls button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(8,125,112,.16); border-radius: 50%; color: var(--teal-dark); background: rgba(255,253,246,.94); box-shadow: 0 7px 20px rgba(20,40,59,.12); font-size: 1.22rem; font-weight: 900; cursor: pointer; }
.view-controls button:hover:not(:disabled), .view-controls button[aria-pressed="true"] { color: #fff; border-color: var(--teal); background: var(--teal); }
.completion-overlay { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 20px; background: rgba(16,26,23,.48); backdrop-filter: blur(8px); }
.completion-overlay[hidden] { display: none; }
.completion-card { position: relative; width: min(100%, 430px); padding: 34px 30px 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 30px; background: linear-gradient(160deg, #fffef5 0%, #f8f5df 100%); box-shadow: 0 30px 90px rgba(5,25,21,.34); text-align: center; animation: completion-arrive .42s cubic-bezier(.2,.82,.24,1); }
.completion-card::before, .completion-card::after { position: absolute; content: ""; border-radius: 50%; pointer-events: none; }.completion-card::before { width: 160px; height: 160px; top: -90px; left: -54px; background: rgba(255,228,27,.3); }.completion-card::after { width: 190px; height: 190px; right: -100px; bottom: -120px; background: rgba(20,184,166,.18); }
.completion-mark { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 13px; display: grid; place-items: center; border: 5px solid #fff8b0; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #10a596, #08786e); box-shadow: 0 12px 28px rgba(8,125,112,.28); font-size: 2rem; }
.completion-eyebrow { position: relative; z-index: 1; margin: 0 0 5px; color: var(--teal-dark); font-size: .72rem; font-weight: 1000; letter-spacing: .18em; text-transform: uppercase; }.completion-card h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.05; }.completion-message { position: relative; z-index: 1; margin: 12px auto 0; max-width: 32ch; color: var(--muted); line-height: 1.45; }.completion-summary { position: relative; z-index: 1; margin: 17px 0; padding: 11px 14px; border-radius: 14px; color: var(--teal-dark); background: #e4f6f1; font-size: .84rem; font-weight: 900; }.completion-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 9px; }.completion-actions button { min-width: 0; padding-inline: 12px; }.completion-view { position: relative; z-index: 1; margin-top: 10px; }
@keyframes completion-arrive { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.match-screen { max-width: 1080px; }
.match-layout { width: min(100%, 520px); margin: 0 auto; display: grid; justify-items: center; gap: 14px; align-items: start; }
.match-stage { position: relative; width: min(100%, 500px, 60vh); aspect-ratio: 1; }
.match-board-viewer { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(20,40,59,.12); border-radius: 24px; background: radial-gradient(circle at 50% 40%, #fffef3 0 28%, #353633 75%); box-shadow: 0 18px 50px rgba(34,39,32,.18); }
.match-board-viewer canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.match-board-viewer.is-tile-dragging canvas { cursor: grabbing; }
.match-board-viewer > span { position: absolute; inset: 0; display: grid; place-items: center; color: #e7eee9; font-size: .82rem; font-weight: 800; }
.match-board-viewer.is-ready > span { display: none; }
.match-entry-overlay { position: absolute; inset: 6%; z-index: 8; padding: 16px; display: grid; align-content: center; gap: 10px; border: 2px solid rgba(8,125,112,.55); border-radius: 22px; background: rgba(255,253,246,.94); box-shadow: 0 20px 55px rgba(10,25,24,.28); backdrop-filter: blur(9px); }
.match-entry-overlay[hidden] { display: none; }
.match-entry-overlay > small { color: var(--muted); font-size: .72rem; font-weight: 800; text-align: center; }
.physical-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 9px; border: 2px solid rgba(8,125,112,.34); border-radius: 16px; background: rgba(9,91,82,.12); }
.board-input { width: 100%; aspect-ratio: 1; min-width: 0; padding: 0; border: 2px solid #796500; border-radius: 12px; outline: 0; color: #12253a; background: linear-gradient(145deg, #fff96b, #e3d900); box-shadow: 0 4px 0 #6b5500; text-align: center; font: inherit; font-size: clamp(1.15rem, 5vw, 1.75rem); font-weight: 1000; }
.board-input.is-empty { border-style: dashed; border-color: rgba(8,125,112,.42); background: rgba(255,255,255,.9); box-shadow: inset 0 2px 7px rgba(20,40,59,.08); }
.board-input.is-selected, .board-input:focus { border-style: solid; border-color: #078b7e; outline: 4px solid rgba(20,184,166,.22); outline-offset: -1px; }
.board-input.is-invalid { border-style: solid; border-color: #c0442d; outline: 4px solid rgba(192,68,45,.16); background: #fff0e9; }
.board-input.is-hint { position: relative; z-index: 2; outline: 5px solid #14b8a6; outline-offset: -3px; box-shadow: 0 4px 0 #5a4600, 0 0 0 7px rgba(20,184,166,.22), 0 0 24px rgba(20,184,166,.75); animation: match-hint-pulse .8s ease-in-out infinite alternate; }
@keyframes match-hint-pulse { from { transform: scale(1); } to { transform: scale(1.045); } }
.match-controls { width: min(100%, 500px); display: grid; gap: 9px; }
#match-start-actions { display: grid; justify-items: center; }
#match-start-actions .primary-button { width: min(100%, 280px); }
.match-progress { margin: 0; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 15px; color: var(--teal-dark); background: #e8f7f3; }
.match-progress > span { display: flex; align-items: baseline; gap: 6px; }.match-progress strong { font-size: 1.45rem; line-height: 1; }.match-progress small { font-size: .78rem; font-weight: 900; }.match-progress b { padding: 5px 8px; border-radius: 999px; color: #766812; background: #fff4a8; font-size: .68rem; white-space: nowrap; }.match-progress b.is-complete { color: #075d38; background: #dff4e4; }
.match-button-row { display: grid; grid-template-columns: .9fr 1.35fr; gap: 8px; }
.match-next-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.match-next-actions button { min-width: 0; padding-inline: 9px; }.match-next-actions button span { margin-right: 4px; }
.form-status { min-height: 54px; margin: 0; padding: 12px 14px; border: 1px solid rgba(20,40,59,.08); border-radius: 13px; color: var(--muted); background: #fff; line-height: 1.4; }.form-status.is-success { color: #075d38; border-color: #bce3c5; background: #e5f8e8; }.form-status.is-error { color: #8b2b18; border-color: #f0c6bb; background: #fff0e9; }

.settings-screen { max-width: 1120px; padding-top: 22px; }
.settings-shell { width: min(100%, 1040px); margin: 0 auto; }
.settings-grid { display: grid; gap: 16px; }
.settings-grid fieldset { min-width: 0; margin: 0; padding: 20px; display: grid; align-content: start; gap: 13px; border: 1px solid rgba(20,40,59,.1); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 16px 38px rgba(45,48,32,.1); }
.settings-grid legend { padding: 0 8px; color: var(--teal-dark); }
.settings-grid legend > span { width: 34px; height: 34px; margin-right: 8px; display: inline-grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #0b9587, #08756b); box-shadow: 0 6px 15px rgba(8,125,112,.2); vertical-align: middle; }
.settings-grid legend strong { display: inline-grid; gap: 2px; vertical-align: middle; font-size: 1rem; }
.settings-grid legend small { color: var(--muted); font-size: .66rem; font-weight: 700; }
.settings-grid label { min-width: 0; font-weight: 850; }
.settings-grid label > span:first-child { display: grid; gap: 2px; }
.settings-grid label small { color: var(--muted); font-size: .66rem; font-weight: 700; line-height: 1.25; }
.settings-card-note { margin: 0 0 2px; padding: 10px 11px; border-left: 3px solid #85c9bf; border-radius: 0 10px 10px 0; color: #5f675f; background: #f2f8f6; font-size: .71rem; line-height: 1.4; }
.featured-setting { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #cbe8e2; border-radius: 14px; background: linear-gradient(135deg, #edf9f6, #f8fcfb); }
.settings-group-label { margin: 3px 0 -2px; color: #68716b; font-size: .67rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.color-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.color-setting { min-height: 64px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(20,40,59,.09); border-radius: 13px; background: #fafaf7; }
.color-setting > span { min-width: 0; display: flex; gap: 5px; }
.settings-grid input[type="color"] { width: 38px; height: 36px; flex: 0 0 auto; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.settings-grid input[type="range"] { width: 100%; min-width: 0; accent-color: var(--teal); cursor: pointer; }
.settings-grid select { min-width: 126px; padding: 10px 30px 10px 11px; border: 1px solid rgba(20,40,59,.14); border-radius: 11px; color: var(--navy); background: #fff; font-weight: 850; }
.hex-input { width: 76px; min-width: 0; padding: 8px 7px; border: 1px solid var(--line); border-radius: 9px; color: var(--navy); background: #fff; font-family: ui-monospace, Consolas, monospace; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.hex-input.is-invalid { border-color: #b7442d; background: #fff0eb; }
.finish-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.range-setting { min-height: 68px; padding: 10px 11px; display: flex; align-items: stretch; flex-direction: column; gap: 9px; border: 1px solid rgba(20,40,59,.08); border-radius: 13px; background: #fafaf7; }
.range-setting > span { display: grid; }
.lighting-settings > .range-setting { min-height: 78px; justify-content: center; }
.motion-settings .setting-row { min-height: 72px; padding: 10px 0; display: grid; gap: 9px; border-bottom: 1px solid rgba(20,40,59,.08); }
.motion-settings .setting-row:last-child { border-bottom: 0; }
.motion-settings select { width: 100%; }
.settings-footer { margin-top: 14px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(20,40,59,.08); border-radius: 16px; background: rgba(255,253,246,.9); box-shadow: 0 8px 24px rgba(45,48,32,.06); }
.settings-footer p { margin: 0; display: grid; gap: 2px; }
.settings-footer p strong { color: var(--navy); font-size: .84rem; }
.settings-footer p span { color: #6d6954; font-size: .72rem; }
.settings-footer button { min-height: 42px; white-space: nowrap; }
.about-card { max-width: 600px; margin: auto; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.82); box-shadow: var(--shadow); text-align: center; }
.about-card h1 { font-size: clamp(2.3rem, 12vw, 4.5rem); }

#app-footer { min-height: 38px; padding: 10px max(18px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; }
.developer-only { display: none !important; }

@media (min-width: 720px) {
    #app-header { height: 66px; padding-inline: 30px; }
    .screen { min-height: calc(100vh - 104px); padding: 30px 32px 36px; }
    .game-screen { min-height: auto; padding: 18px 22px 22px; }
    .home-screen { gap: 13px; padding-top: 22px; padding-bottom: 24px; }
    .hero-copy h1 { white-space: nowrap; }
    .hero-actions button { min-width: 0; }
    .hero-product { width: min(48vh, 440px); }
    .match-controls button { width: 100%; }
    .settings-grid { grid-template-columns: minmax(0, 1.45fr) minmax(220px, .82fr) minmax(220px, .82fr); }.settings-grid fieldset { align-content: start; }
    #viewer { width: min(100%, var(--game-board-size)); }
}

@media (max-width: 380px) {
    #brand-logo { width: 68px; }
    .screen { padding-inline: 12px; }.game-message { font-size: .76rem; }
}

@media (max-width: 719px) {
    .completion-card { padding: 30px 20px 22px; }
    .completion-actions { grid-template-columns: 1fr; }
    .home-screen { gap: 12px; padding-top: 22px; padding-bottom: 24px; }
    .hero-copy { width: 100%; min-width: 0; }
    .hero-copy h1 { max-width: 100%; font-size: clamp(2.2rem, 10vw, 2.75rem); }
    .hero-word-solve { display: block; }
    .home-screen::before { inset: 9px 7px; border-radius: 26px; }
    .hero-product { width: min(88vw, 350px); }
    .hero-actions { width: 100%; }
    .hero-actions button { min-width: 0; padding-inline: 9px; font-size: .88rem; }
    .match-screen { padding-top: 52px; }
    .match-controls { padding-inline: 4px; }.match-next-actions { grid-template-columns: 1fr; }.match-entry-overlay { inset: 4%; padding: 12px; }.physical-grid { gap: 6px; padding: 7px; }.settings-screen { padding-top: 54px; }.settings-grid fieldset { padding: 17px; }.color-settings-grid, .finish-settings-grid { grid-template-columns: 1fr; }.settings-footer { align-items: stretch; flex-direction: column; }.settings-footer button { width: 100%; }
}

@media (max-width: 340px) {
    .hero-actions { grid-template-columns: 1fr; }
}

@media (pointer: fine) and (min-width: 720px) {
    .desktop-direction-fallback { display: block !important; }
}

@media (pointer: coarse) {
    .desktop-direction-fallback { display: none !important; }
}

@media (min-width: 640px) {
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; } }