@import url('./select-control.css');
/* Graphite instrument surfaces: form is defined by light, not an outline. */
:root{--graphite-key:linear-gradient(155deg,#242424,#1c1c1c);--graphite-lift:0 3px 7px #00000055,inset 0 1px 1px #ffffff08,inset 0 -1px 2px #00000038;--graphite-press:inset 0 2px 6px #00000080,inset 0 -1px 1px #ffffff06}
.game-card,.game-panel,.console,.duel-console,.open-room,.active-room,.seat,.create-dialog,dialog,.sound-panel{border:0;background:linear-gradient(145deg,#292929,#232323);box-shadow:0 12px 32px #00000026,inset 0 1px 1px #ffffff07}
.quiet-button,.small-button,.sound-button,.mobile-game-select,.sound-style,.together-page select,.together-page input:not([type=radio]),.inline-form button{border:0;background:var(--graphite-key);box-shadow:var(--graphite-lift);border-radius:9px}
.quiet-button:hover,.small-button:hover,.sound-button:hover{border:0;background:linear-gradient(155deg,#2c2c2c,#222222)}
.game-switcher a[aria-current=page]{border:0;box-shadow:var(--graphite-press);background:#202020}
.game-controls,.blocks-controls{position:relative;padding:9px;gap:9px;border:0;border-radius:15px;background:linear-gradient(180deg,#303030,#292929);box-shadow:0 8px 22px #00000045,inset 0 1px 1px #ffffff09}
.direction-button,.blocks-controls button,.blocks-controls .drop-button{position:relative;display:flex;justify-content:center;align-items:center;border:0;border-radius:9px;background:var(--graphite-key);box-shadow:var(--graphite-lift);color:#b9b9b9;min-height:50px;transition:transform 70ms ease-out,box-shadow 70ms ease-out,color 120ms;touch-action:none}
.direction-button svg,.blocks-controls button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.direction-button:active,.blocks-controls button:active,button[data-pressed=true]{background:#1b1b1b!important;border:0!important;box-shadow:var(--graphite-press);transform:translateY(1px) scale(.97);color:#ededed}
.play-page[data-game=snake] .direction-button[data-steering=true]{border:0;background:linear-gradient(155deg,#303030,#272727);color:#ededed;box-shadow:var(--graphite-lift)}
.play-page[data-game=snake] .direction-button[data-steering=true]::after{content:'';position:absolute;bottom:7px;width:3px;height:3px;border-radius:50%;background:#b9b9b9}
.solid-button,.primary-button,.duo-primary,.sound-play{border:0;border-radius:10px;background:linear-gradient(155deg,#c9c9c9,#ababab);box-shadow:0 3px 7px #00000030,inset 0 1px 1px #ffffff30;color:#242424}
.solid-button:active,.primary-button:active,.duo-primary:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #00000038}
.mobile-control-hint{display:none!important}
.together-page .seat,.together-page .active-room{background:#202020;box-shadow:var(--graphite-press)}
.together-page .open-room:hover{border:0;transform:translateY(-1px);box-shadow:0 16px 32px #00000038,inset 0 1px 1px #ffffff0a}
.together-page .room-scopes{border:0;background:#1c1c1c;box-shadow:var(--graphite-press)}
.together-page .room-scopes button,.together-page .room-scopes button[aria-pressed=true]{border:0}
.together-page .room-scopes button[aria-pressed=true]{background:var(--graphite-key);box-shadow:var(--graphite-lift)}
.together-page .visibility-choices label{border:0;background:#202020;box-shadow:var(--graphite-press)}
.together-page .visibility-choices label:has(input:checked){border:0;background:#303030;box-shadow:var(--graphite-lift)}
.together-page .create-dialog .difficulty-row,.together-page .room-toolbar,.together-page .panel-title,.together-page .lobby-extras details,.together-page .friend-row{border:0}
.together-page #duel-overlay{border:0}
body.play-page #board .tile[data-touch-pressed=true]:enabled,body.play-page #board .tile[data-chroma-input=mouse]:enabled:active,body.play-page #board .tile[data-chroma-input=keyboard]:enabled:active{outline:none;box-shadow:inset 0 2px 5px #00000038}
body.play-page #board .tile[data-chroma-result]{box-shadow:0 2px 5px #00000024}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .play-page .game-panel,.play-page .console{background:none;box-shadow:none;border:0}
 .game-controls,.blocks-controls,.game-layout .game-actions{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-width:456px;margin:0 auto;padding:9px;gap:8px;border:0;border-radius:15px;background:linear-gradient(180deg,#303030f5,#272727f5);box-shadow:0 8px 26px #00000066,inset 0 1px 1px #ffffff0a;backdrop-filter:blur(16px)}
 .direction-button,.blocks-controls button,.blocks-controls .drop-button{height:54px;min-height:54px;min-width:0;border-radius:9px}
 .blocks-controls{grid-template-columns:repeat(5,minmax(0,1fr))}
 .game-layout .game-actions .primary-button{min-height:50px}
 .game-help[open]{border:0;box-shadow:0 18px 60px #00000080}
 .game-layout .game-actions{padding:9px}
 .play-page .game-intro h1,.play-page .intro h1{font-size:28px}
 .play-page .mobile-game-select{background:var(--graphite-key);box-shadow:var(--graphite-lift)}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .game-controls,.blocks-controls,.game-layout .game-actions{left:auto;right:max(16px,env(safe-area-inset-right));width:min(42vw,370px);margin:0;bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.direction-button,.blocks-controls button{transition:none!important;transform:none!important}}

/* Phones play directly on the board; start, pause and replay remain in place. */
@media(pointer:coarse){
 .play-page .game-controls,.play-page .blocks-controls,.relay-page .relay-controls{display:none!important}
}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .play-page .game-controls,.play-page .blocks-controls,.relay-page .relay-controls{display:none!important}
 body.play-page:is([data-game=snake],[data-game=blocks],[data-game='2048']){padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .play-page[data-game=blocks] .blocks-stage{--board-height:clamp(180px,calc(100dvh - 164px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),720px);grid-template-columns:minmax(0,min(372px,calc(var(--board-height) / 2 + 12px))) 52px;gap:8px}
 .play-page[data-game=snake] .board-container{width:min(100%,calc(100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .play-page[data-game=blocks] .blocks-panel{grid-template-columns:minmax(0,calc((100dvh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2 + 12px)) 56px 56px}
 .play-page[data-game=snake] .game-panel{grid-template-columns:minmax(0,calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) 80px;padding:0}
 .play-page[data-game=snake] .board-container{width:100%}
}

.chroma-difficulty{background:none;box-shadow:none}
.chroma-difficulty select{border:0;background:var(--graphite-key);box-shadow:var(--graphite-lift)}
.game-layout .game-actions .primary-button{background:var(--graphite-key);color:#d1d1d1;box-shadow:var(--graphite-lift)}
.game-controls::before,.blocks-controls::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url%28%23g%29' d='M0 0h120v120H0z'/%3E%3C/svg%3E")}

/* Real WebKit switch hit targets provide iPhone's system tap, without scripted clicks. */
.native-haptic-key{position:relative;display:flex;align-items:center;justify-content:center}
.native-key-face{display:flex;align-items:center;justify-content:center;gap:9px;pointer-events:none}
.native-haptic-input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;appearance:auto!important;-webkit-appearance:auto!important;touch-action:none;cursor:pointer;clip-path:inset(0 round 9px)}
.blocks-controls .native-haptic-key{border:0;border-radius:9px;background:var(--graphite-key);box-shadow:var(--graphite-lift);color:#b9b9b9;min-height:50px;transition:transform 70ms ease-out,box-shadow 70ms ease-out}
.blocks-controls .native-key-face svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.native-haptic-key:has([data-pressed=true]){background:#1b1b1b!important;box-shadow:var(--graphite-press)!important;transform:translateY(1px) scale(.97);color:#ededed}
.native-haptic-key:has(:focus-visible){outline:1.5px solid #bfbfbf;outline-offset:3px}
.native-haptic-key:has(:disabled){opacity:.48}
.play-page[data-game=snake] .direction-button:has([data-steering=true]){background:linear-gradient(155deg,#303030,#272727);color:#ededed}
.play-page[data-game=snake] .direction-button:has([data-steering=true])::after{content:'';position:absolute;bottom:7px;width:3px;height:3px;border-radius:50%;background:#b9b9b9}
.blocks-controls .drop-button{gap:8px;min-width:88px;background:linear-gradient(145deg,#414141,#2c2c2c);color:#eeeeee;box-shadow:0 4px 9px #00000066,inset 0 1px 1px #ffffff16}
.drop-key-label{font:500 11px var(--mono);letter-spacing:.11em;pointer-events:none}
.blocks-impact{position:absolute;z-index:6;border-radius:4px;pointer-events:none!important;contain:strict}
.blocks-board-wrap .fx-badge{border:0;background:#242424d9;box-shadow:none;font-size:14px;letter-spacing:.12em}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .blocks-controls{grid-template-columns:repeat(3,minmax(44px,1fr)) minmax(90px,1.65fr)}
 .blocks-controls .soft-drop-button{display:none}
 .blocks-controls .drop-button,.blocks-controls .native-haptic-key{height:54px;min-height:54px}
}
@media(prefers-reduced-motion:reduce){.blocks-impact{display:none}.native-haptic-key{transition:none!important;transform:none!important}}

/* The 2048 slots stay put while each numbered tile moves over them. */
.merge-slots{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:inherit;pointer-events:none}
.merge-slots i{border-radius:6px;background:#202020;box-shadow:inset 0 2px 4px #00000038,inset 0 -1px #ffffff03}
.merge-cell{position:relative;z-index:1}
.merge-cell[data-value='0']{background:transparent;box-shadow:none;pointer-events:none}
.merge-flight.fx-node{position:absolute}

/* Relay: a quiet, full-width invitation alongside the solo collection. */
.relay-entry{display:flex;align-items:center;gap:24px;padding:26px 30px;margin-top:20px;border-radius:18px;background:linear-gradient(125deg,#2a2a2a,#202020);box-shadow:inset 0 1px 0 #ffffff0c,0 8px 20px #0002;text-decoration:none;color:#d4d4d4;transition:transform .25s,background .25s}.relay-entry:hover{transform:translateY(-3px);background:linear-gradient(125deg,#2f2f2f,#242424)}.relay-entry-mark{display:flex;align-items:center;gap:11px;min-width:74px}.relay-entry-mark i{display:block;width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#d0d0d0,#818181);box-shadow:inset 0 1px 0 #fff6,0 5px 10px #0004}.relay-entry-mark i:last-child{border-radius:6px;background:#272727;box-shadow:inset 0 0 0 1px #999,0 5px 10px #0004}.relay-entry-caption{font-size:8px;letter-spacing:2px;color:#747474}.relay-entry h3{font-family:var(--sans);font-weight:400;font-size:30px;letter-spacing:-1px;margin:8px 0}.relay-entry h3 span{font-family:Arial,sans-serif;font-size:11px;letter-spacing:0;margin-left:15px;color:#999}.relay-entry p{font-size:11px;color:#888;margin:0}.relay-entry-arrow{margin-left:auto;font-size:26px;color:#888}@media(max-width:600px){.relay-entry{padding:22px 18px;gap:16px;margin-top:14px}.relay-entry-mark{min-width:49px;gap:7px}.relay-entry-mark i{width:21px;height:21px}.relay-entry h3{font-size:25px}.relay-entry h3 span{font-size:10px;margin-left:10px}.relay-entry p{font-size:10px;line-height:1.7}.relay-entry-caption{font-size:7px;letter-spacing:1.3px}.relay-entry-arrow{font-size:21px}}@media(prefers-reduced-motion:reduce){.relay-entry{transition:none}}