Something went wrong. Try again.
geometric packing game (tetris-ish) on an icosahedron
Something went wrong. Try again.
23 kB · 1249 lines
CSS
at multiplayer
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250:root { font-family: "DM Sans", system-ui, -apple-system, sans-serif; color: #e3e9e9; background: #10151b; font-synthesis: none; font-weight: 400; color-scheme: dark; --muted: #91a4ad; --line: #2b3c45; --mint: #7bf0cc; --orange: #edbd83; --panel: #151f27; --gap: 12px; --app-max-width: 1600px; --app-gutter: 24px;}* { box-sizing: border-box;}body { margin: 0;}button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation;}button { font: inherit; cursor: pointer;}button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px;}button:hover:not(:disabled) { filter: brightness(1.15);}a { color: inherit; text-decoration: none;}[hidden] { display: none !important;}button:disabled { cursor: default; opacity: .4;}#app { position: relative; width: 100%; max-width: var(--app-max-width); height: 100%; min-height: 0; margin: auto; padding: 0 max(var(--app-gutter), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--app-gutter), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column;}.game-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-bottom: 1px solid var(--line); flex-shrink: 0;}.quiet { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border: 0; background: transparent; color: #b9c9cf; font-size: 12px; padding: 6px;}.quiet span { margin-left: 8px; font-size: 17px; color: var(--mint);}.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: 68px minmax(0, 1fr); gap: var(--gap); padding: var(--gap) 0;}.eyebrow { font-size: 10px; letter-spacing: 1.5px; font-weight: 600; color: var(--muted);}.stats { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1.3fr 1fr 1fr; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);}.stat, .level-stat { min-width: 0; padding: 0 20px;}.stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;}.stats > * + * { border-left: 1px solid var(--line);}.stat > span { font-size: 10px; letter-spacing: 1.2px; color: var(--muted);}.stat strong { font: 400 26px "Space Grotesk", "Trebuchet MS", sans-serif; font-variant-numeric: tabular-nums;}.stat small { font: 12px system-ui, sans-serif; color: var(--muted);}.score strong { color: var(--orange); font-size: 32px;}.level-stat .stat { padding: 0;}.level-stat .stat strong { font-size: 20px;}.level-progress-labels { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 9px;}.level-track { height: 3px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: var(--line);}.level-fill { height: 100%; transform-origin: left; background: var(--orange);}.level-up .level-value { color: var(--orange);}.level-up .level-track { box-shadow: 0 0 12px #edbd8366;}.arena { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(ellipse at 50% 45%, #20303999, #111b2355 55%, #10171e 90%);}.arena::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#59758309 1px, transparent 1px), linear-gradient(90deg, #59758309 1px, transparent 1px); background-size: 36px 36px; pointer-events: none;}.arena-top, .arena-bottom { position: absolute; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 3;}.arena-top { top: 0; justify-content: flex-end; z-index: 6;}.arena-top .quiet { font-size: 10px;}#center-aim { margin-right: auto;}#center-aim[aria-pressed="true"] { color: var(--mint);}#projection-mode[aria-pressed="true"] { color: var(--mint);}#recenter-view { min-width: 44px; color: var(--mint);}.arena-bottom { bottom: 12px; font-size: 9px; letter-spacing: .6px; color: #a2bac4;}.face-status { color: var(--muted); white-space: nowrap;}#scene { position: absolute; inset: 44px 0 28px;}#scene canvas { display: block; touch-action: none; cursor: crosshair;}.planar-canvas { position: absolute; inset: 0; z-index: 1;}#scene.center-aim::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border: 1px solid #e3e9e9; border-radius: 50%; pointer-events: none; z-index: 2;}.time-track { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); width: min(360px, 60%); height: 4px; border-radius: 4px; background: #34434e; overflow: hidden; z-index: 1; pointer-events: none;}.time-fill { height: 100%; transform-origin: left; background: var(--mint);}.urgent { background: #ff6877 !important;}.danger { color: #ff7b86 !important;}.dot { display: inline-block; width: 5px; height: 5px; background: var(--mint); border-radius: 50%; margin-right: 6px; vertical-align: middle;}.illegal { background: #ff6877;}.arena-notices { position: absolute; bottom: 32px; left: 14px; right: 14px; text-align: center; pointer-events: none; z-index: 1;}.gameplay-feedback, .reward-active { font-size: 11px; line-height: 1.4; color: var(--orange); background: #10171ee8; border-radius: 4px;}.gameplay-feedback:empty { display: none;}.reward-active { color: var(--mint);}.piece-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0;}.piece-flow { display: grid; grid-template-columns: 1fr 2fr; gap: 8px;}.current-piece { position: relative; min-width: 0; padding: 10px 8px; border: 1px solid #507768; border-radius: 8px; background: #192c2c; text-align: center;}.current-piece > .eyebrow { display: block; color: var(--mint); text-align: left; font-size: 9px;}#current-preview { height: 66px; display: flex; align-items: center; justify-content: center;}#current-preview svg { height: 48px; max-width: 100%; overflow: visible;}#piece-name { font-size: 12px;}#orientation { display: block; margin-top: 5px; font-size: 7px; color: var(--muted); letter-spacing: .3px;}.upcoming { min-width: 0; display: flex; flex-direction: column;}.queue-label { margin: 0 0 8px; font-size: 9px;}.queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1;}.queue > div { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);}.queue > div > span { position: absolute; left: 8px; top: 8px; font-size: 8px; color: var(--muted);}.queue > div > div { height: 100%; display: flex; align-items: center; justify-content: center; padding: 18px 8px;}.queue svg { width: 100%; height: 48px;}.saved-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}.saved-piece { position: relative; min-width: 0; min-height: 92px; padding: 10px 6px; border: 1px solid #507768; border-radius: 8px; background: #192c2c; color: var(--mint);}.saved-piece:disabled { opacity: 1; color: var(--muted); border-color: var(--line); background: var(--panel);}.saved-preview { display: block; width: 38px; height: 38px; margin: 0 auto 8px;}.saved-preview svg { width: 100%; height: 100%;}.saved-piece:disabled .saved-preview { opacity: .45;}.saved-piece b { position: absolute; top: 8px; right: 7px; font-size: 11px; font-weight: 500;}.saved-name { display: block; font-size: 10px;}.piece-controls { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}.piece-controls button { min-height: 48px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: #e3e9e9; font-size: 12px;}#place-piece { color: #122820; background: var(--mint); border-color: var(--mint); font-weight: 600;}.shape-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;}.shape-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 64px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 9px;}.shape-choice svg { width: 100%; height: 28px;}.shape-choice.selected { border-color: var(--mint); color: var(--mint); background: #1c302d;}.eraser-choice { grid-column: 1 / -1; flex-direction: row; justify-content: center; min-height: 36px;}.eraser-choice svg { width: 28px;}.eraser-choice.selected { border-color: #ffb18a; color: #ffb18a; background: #352920;}.eraser-help { margin: 6px 0; color: var(--muted); font-size: 11px; line-height: 1.5;}.erasing canvas { cursor: crosshair;}.diagnostics { position: relative; margin-top: 6px; font-size: 10px; color: var(--muted);}.position-details { position: absolute; right: 0; bottom: 24px; z-index: 6; width: 250px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #10171ef5; font: 11px/1.8 monospace; white-space: pre-line; user-select: text;}.overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: #10171eb8; backdrop-filter: blur(5px); padding: 20px;}.overlay-card { width: 300px; text-align: center;}h2 { font-family: "Space Grotesk", "Trebuchet MS", sans-serif; font-size: 32px; font-weight: 400; line-height: 1.12; letter-spacing: -1px; margin: 12px 0;}.overlay p { font-size: 12px; color: #a6b8c0; line-height: 1.5; margin: 8px 0;}.primary { width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 6px; background: var(--mint); color: #122820; font-size: 13px; font-weight: 600;}.overlay-card h2:not([hidden]) ~ .overlay-actions { margin-top: 16px;}.overlay-actions { display: flex; flex-wrap: wrap; gap: 8px;}.overlay-actions > button,.overlay-actions > a { flex: 1; width: auto;}.overlay-actions > a { box-sizing: border-box;}.overlay-actions > p { flex-basis: 100%;}#final-stats { font-size: 14px; color: var(--orange); margin-top: 12px;}footer { position: relative; flex-shrink: 0; min-height: 36px; color: var(--muted); font-size: 11px;}summary { cursor: pointer;}.help > summary { padding: 6px 0 10px; width: fit-content;}.help > summary > span { opacity: .7;}.help-content { position: absolute; bottom: 38px; left: 0; z-index: 10; width: min(520px, 100%); padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #152129; box-shadow: 0 8px 40px #0008; display: flex; flex-wrap: wrap; gap: 14px 20px; font-size: 12px; line-height: 1.6;}.touch-rotate-help { display: none;}.help-content b, kbd { color: #e3e9e9; font-weight: 500;}kbd { font-family: inherit; border: 1px solid #384750; border-radius: 3px; padding: 2px 4px; font-size: 10px;}#audio { min-width: 44px; padding: 0;}.audio-settings { position: relative; z-index: 20; flex: 0 0 auto;}#audio svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}.audio-settings[data-enabled="true"] #audio { color: var(--mint);}.audio-settings[data-enabled="false"] .audio-waves,.audio-settings[data-enabled="true"] .audio-muted { display: none;}#audio[aria-busy="true"] svg { opacity: .5;}.audio-popover { position: absolute; top: calc(100% + 5px); right: 0; width: min(280px, calc(100vw - 16px)); display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 10px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #152129; box-shadow: 0 8px 32px #000a; font-size: 12px;}.audio-popover label { color: #c4d0d4;}.audio-popover select { width: 100%; min-height: 34px; padding: 4px 8px; border: 1px solid #384750; border-radius: 5px; background: #101820; color: #e3e9e9; font: inherit;}.audio-popover select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px;}#audio-status { grid-column: 1 / -1; margin: 0; color: var(--muted); line-height: 1.4;}@media (pointer: coarse) { #center-aim { display: none; } .touch-rotate-help { display: inline; }}@media (max-width: 900px) { :root { --app-gutter: 12px; } .layout { grid-template-columns: minmax(0, 1fr) 260px; } .stat, .level-stat { padding: 0 12px; }}@media (max-width: 600px) { :root { --gap: 6px; --app-gutter: 8px; } #app { min-height: 480px; } .game-toolbar { min-height: 42px; height: auto; justify-content: flex-start; flex-wrap: wrap; gap: 2px; overflow: visible; } .audio-popover { left: 0; right: auto; } .game-toolbar .quiet { font-size: 10px; padding: 4px; min-width: 44px; white-space: nowrap; } .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(180px, 1fr) auto; min-height: min-content; flex-shrink: 0; } .stats { grid-template-columns: 1fr 1.25fr .7fr .85fr; } .stat, .level-stat { padding: 0 8px; } .stat { flex-direction: column; align-items: flex-start; gap: 2px; } .stat > span { font-size: 8px; letter-spacing: .7px; } .stat strong, .score strong { font-size: 21px; line-height: 1.1; } .stat small { font-size: 10px; } .level-stat .stat { flex-direction: row; align-items: baseline; } .level-stat .stat strong { font-size: 17px; } .level-progress-labels { font-size: 7px; gap: 2px; } #scene { inset: 20px 0; } .arena-top, .arena-bottom { left: 10px; right: 10px; } .arena-bottom { bottom: 9px; font-size: 8px; letter-spacing: .2px; } .arena-top .quiet { font-size: 9px; padding-right: 3px; padding-left: 3px; white-space: nowrap; } #reset-view span { margin-left: 3px; } .piece-panel { gap: 7px; } .piece-flow { gap: 6px; grid-template-columns: 1fr 2fr; } .current-piece { padding: 6px; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 12px 1fr; align-items: center; column-gap: 4px; text-align: left; } .current-piece > .eyebrow { grid-column: 1 / -1; font-size: 8px; } #current-preview { height: 43px; } #current-preview svg { height: 33px; } #piece-name { font-size: 10px; } #orientation { font-size: 6px; line-height: 1.6; margin-top: 2px; } .queue-label { margin-bottom: 5px; font-size: 8px; } .queue { gap: 6px; } .queue > div > span { left: 6px; top: 5px; font-size: 7px; } .queue > div > div { padding: 6px 15px; } .queue svg { height: 35px; } .saved-grid { gap: 6px; } .saved-piece { min-height: 60px; padding: 6px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 24px 16px; column-gap: 4px; align-items: center; } .saved-preview { width: 28px; height: 28px; margin: 0; grid-row: 1 / 3; } .saved-piece b { position: static; justify-self: end; font-size: 12px; } .saved-name { font-size: 9px; text-align: right; } .piece-controls { order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; } .piece-controls button { min-height: 44px; font-size: 11px; } .shape-choices { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } .shape-choice { padding: 4px 2px; min-height: 46px; font-size: 7px; gap: 3px; } .shape-choice svg { height: 23px; } .diagnostics { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); right: 8px; z-index: 4; margin: 0; font-size: 9px; } footer { min-height: 26px; font-size: 10px; } .help > summary { padding: 3px 0 7px; } .layout:has(#free-play-tools:not([hidden])) ~ footer .help > summary > span { display: none; } h2 { font-size: 24px; } .overlay p { font-size: 11px; } .overlay-card h2:not([hidden]) ~ .overlay-actions { margin-top: 10px; }}/* Short landscape screens keep the same tray alongside the board. */@media (min-width: 601px) and (max-height: 600px) { :root { --gap: 6px; } #app { min-height: 360px; } #scene { inset: 20px 0; } #app { min-height: 0; } .game-toolbar { min-height: 48px; } .layout { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: 48px minmax(180px, 1fr); min-height: min-content; flex-shrink: 0; } .piece-panel { gap: 7px; } .current-piece { padding: 6px; } #current-preview { height: 36px; } #current-preview svg, .queue svg { height: 30px; } #orientation { font-size: 6px; } .saved-piece { min-height: 58px; padding: 5px; } .saved-preview { height: 24px; width: 28px; margin-bottom: 3px; } .saved-name { font-size: 9px; } .queue-label { margin-bottom: 4px; } .piece-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .piece-controls button { min-height: 44px; font-size: 10px; } .shape-choices { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; } .shape-choice { padding: 4px 1px; min-height: 44px; font-size: 6px; gap: 3px; } .shape-choice svg { height: 22px; } footer { min-height: 24px; } .help > summary { padding: 3px 0 6px; }}@media (prefers-reduced-motion: no-preference) { button, a { transition: background-color .15s, border-color .15s; }}/* Leave room for the board when browser chrome reduces a small phone's height. */@media (max-width: 600px) and (max-height: 600px) { :root { --gap: 4px; } .game-toolbar { min-height: 44px; } .layout { grid-template-rows: 44px minmax(180px, 1fr) auto; } .piece-panel { gap: 5px; } .current-piece { padding: 4px 6px; grid-template-rows: 10px 1fr; } #current-preview { height: 35px; } #current-preview svg, .queue svg { height: 28px; } .saved-piece { min-height: 48px; padding: 4px 6px; grid-template-rows: 20px 16px; } .saved-preview { height: 25px; } .shape-choice { min-height: 44px; } footer { min-height: 22px; } .help > summary { padding: 2px 0 4px; }}.saved-games-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(82dvh, 720px); margin: auto; padding: 20px; overflow: auto; border: 1px solid #38534e; border-radius: 12px; background: #111b21; color: #e3e9e9; box-shadow: 0 20px 80px #0009;}.saved-games-dialog::backdrop { background: #070b10c9; backdrop-filter: blur(3px);}.save-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px;}.save-dialog-heading .eyebrow { margin: 0 0 4px;}.save-dialog-heading h2 { margin: 0; font-size: 22px;}.save-dialog-note { margin: 12px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5;}.save-game-form { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line);}.save-game-form label { font-size: 12px; color: #c2d1d2;}.save-name-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px;}.save-name-controls input { min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #0e151b; color: inherit; font: inherit;}.save-name-controls input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px;}.save-name-controls .primary { min-height: 44px; padding: 8px 14px; border: 1px solid #5a9a85; border-radius: 6px; background: #1c5447; color: #eafff7; font: inherit; font-size: 13px;}.save-name-controls .quiet { min-height: 44px; padding: 8px 12px; white-space: nowrap;}.save-games-status { min-height: 1.4em; margin: 10px 0; color: var(--orange); font-size: 12px;}.saved-games-empty { margin: 14px 0 4px; color: var(--muted); font-size: 13px;}.saved-games-list { display: grid; gap: 8px; max-height: 40dvh; margin: 0; padding: 0; overflow: auto; list-style: none;}.scenario-level-control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 14px 0; color: #c2d1d2; font-size: 12px;}.scenario-level-control input { width: 84px; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #0e151b; color: inherit; font: inherit;}.scenario-level-control input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px;}.saved-game-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);}.saved-game-details { display: grid; min-width: 0; gap: 3px;}.saved-game-details strong { overflow-wrap: anywhere; font-size: 14px;}.saved-game-details time, .saved-game-details span { color: var(--muted); font-size: 11px;}.saved-game-actions { display: flex; gap: 4px;}.saved-game-actions .quiet { min-height: 38px; padding: 6px 9px;}.saved-game-actions .save-delete { color: #d7a4a4;}@media (max-width: 600px) { .saved-games-dialog { padding: 16px; } .save-dialog-actions { display: flex; align-items: center; gap: 4px; } .save-name-controls { grid-template-columns: 1fr; }}@media (max-width: 340px) { .brand > span { display: none; }}