/* Shared warm pixel surfaces for web account pages and in-game DOM forms. */
:root { --san-paper: #fff4d8; --san-ink: #30291f; --san-moss: #39392b; --san-gold: #f0ad50; }
@font-face { font-family: 'San Pixel'; src: url('/assets/fonts/pixelfont-webfont.woff2') format('woff2'); font-display: swap; }
body.san-account { box-sizing: border-box; margin: 0; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 32px; min-height: 100vh; background: var(--san-paper); color: var(--san-ink); font: 14px/1.8 'San Pixel', monospace; }
.san-account > * { box-sizing: border-box; max-width: min(560px,100%); margin-left: auto; margin-right: auto; overflow-wrap: anywhere; }
.san-account h1 { font-size: clamp(22px, 5vw, 32px); margin-top: 32px; }
.san-account form { padding: 24px; background: #eadfbd; border-bottom: 3px solid #c6b88c; }
.san-account input, .san-account select { display: block; box-sizing: border-box; width: 100%; max-width: none; min-height: 48px; margin: 8px 0 20px; padding: 12px; background: #fffaf0; color: var(--san-ink); border: 1px solid #887853; border-radius: 0; font: inherit; }
.san-account button { min-height: 48px; padding: 12px 18px; margin: 8px 8px 8px 0; background: var(--san-gold); color: var(--san-ink); border: 0; border-bottom: 3px solid #b77b32; border-radius: 0; font: inherit; cursor: pointer; }
.san-account a { color: #485c31; text-underline-offset: 4px; }
.san-account .error { color: #9b3324; overflow-wrap: anywhere; }
.san-account :focus-visible { outline: 3px solid #607447; outline-offset: 3px; }
#game-container input, #game-container select, .san-game-field { background: #fff4d8 !important; color: #30291f !important; border: 1px solid #887853 !important; border-radius: 0 !important; }
.san-game-field::placeholder { color: #61573e; opacity: 1; }
.san-game-field:focus-visible { outline: 3px solid #f0ad50; outline-offset: 2px; }
body[data-orientation='portrait'] .san-game-field { display: none; }
body.san-rankings { background: #39392b; color: #fff4d8; }
.san-rankings a { color: #f4d99a; }