:root{color-scheme:light dark;--bg: #ffffff;--fg: #1a1a1a;--border: #d9d9d9;--accent: #2f6feb;--error: #c0392b;--panel: #eef2fb;font-family:system-ui,-apple-system,Segoe UI,sans-serif}@media (prefers-color-scheme: dark){:root{--bg: #16181c;--fg: #e8e8e8;--border: #34383f;--panel: #1b2330}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg)}#root{min-height:100vh;display:flex}.page{width:100%;min-width:0;max-width:520px;margin:auto;padding:2rem 1.5rem 4rem;display:flex;flex-direction:column;gap:2rem}.page-wide{max-width:900px}.back-link{align-self:flex-start;font-size:.85rem;color:var(--fg);opacity:.7;text-decoration:none}.back-link:hover{opacity:1;text-decoration:underline}h1{font-size:1.5rem;margin:0}h2{font-size:1rem;margin:0}section{display:flex;flex-direction:column;gap:.5rem;min-width:0}label{font-size:.85rem;margin-top:.5rem}input,select,button,textarea{font:inherit;padding:.5rem .65rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg)}button{cursor:pointer;border-color:var(--accent);color:var(--accent)}button:hover:not(:disabled){background:var(--accent);color:#fff}button:disabled{cursor:not-allowed;opacity:.5}.button-link{display:inline-block;font:inherit;padding:.5rem .65rem;border:1px solid var(--accent);border-radius:4px;color:var(--accent);text-decoration:none;cursor:pointer}.button-link:hover{background:var(--accent);color:#fff}.error{color:var(--error);font-size:.85rem;margin:0}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;padding:0;font-size:1rem;flex-shrink:0}.icon-button-plain{border:none;background:none}.icon-button-plain:hover:not(:disabled){background:none;color:var(--accent);opacity:.7}.home-header{display:flex;align-items:center;justify-content:space-between}.home-header-actions{display:flex;align-items:center;gap:.75rem}.home-username{font-size:.9rem;opacity:.8}.home-page{margin:0 auto;align-self:stretch;min-height:100vh;justify-content:space-between;padding-bottom:1.5rem}.carousel{display:flex;align-items:center;justify-content:center;gap:1rem;flex:1}.carousel-viewport{position:relative;max-width:100%;overflow:hidden}.carousel-track{display:flex;transition:transform .4s ease}.carousel-arrow{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;flex-shrink:0}.carousel-arrow-flipped{transform:rotate(180deg)}.game-tile{flex-shrink:0;height:21rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.75rem;padding:2rem 1.5rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--fg);text-decoration:none;transition:opacity .3s ease,border-color .3s ease}.game-tile:hover{border-color:var(--accent)}.game-tile-inactive{opacity:.35;pointer-events:none}.game-tile-icon{color:var(--accent);font-size:3.5rem;line-height:1}.game-tile h2{color:var(--accent);font-size:1.25rem;margin:0}.game-tile p{margin:0;font-size:.9rem;opacity:.8}.site-footer{display:flex;justify-content:center;gap:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.85rem}.site-footer a{color:var(--fg);opacity:.7;text-decoration:none}.site-footer a:hover{opacity:1;text-decoration:underline}.avatar-row{display:flex;align-items:center;gap:.75rem}.avatar-thumb,.avatar-thumb-placeholder{width:56px;height:56px;border-radius:50%;flex-shrink:0}.avatar-thumb{border:1px solid var(--border);object-fit:cover;background:#fff}.avatar-thumb-placeholder{border:1px dashed var(--border)}.avatar-fallback-note{font-size:.8rem;opacity:.7;margin:0}.checkbox-row{display:flex;align-items:center;gap:.5rem;cursor:pointer}.checkbox-row input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:1.2rem;height:1.2rem;margin:0;padding:0;flex-shrink:0;border:1.5px solid var(--border);border-radius:4px;background-color:var(--bg);background-repeat:no-repeat;background-position:center;background-size:65%;cursor:pointer}.checkbox-row input[type=checkbox]:hover:not(:disabled){border-color:var(--accent)}.checkbox-row input[type=checkbox]:checked{border-color:var(--accent);background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}.checkbox-row input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.camera-preview{width:100%;max-width:320px;border:1px solid var(--border);border-radius:4px;background:#000}.avatar-canvas{display:flex;flex-direction:column;gap:.75rem}.avatar-canvas-actions{display:flex;flex-direction:column;gap:.35rem}.avatar-canvas-row{display:flex;align-items:stretch;gap:.375rem}.avatar-canvas-surface{width:320px;height:320px;border:1px solid var(--border);border-radius:4px;touch-action:none;cursor:crosshair}.avatar-canvas-tools{display:flex;flex-direction:column;justify-content:space-between;align-items:center}.avatar-canvas-swatches{display:flex;flex-direction:column;gap:.5rem}.color-swatch{width:1.5rem;height:1.5rem;padding:0;border-radius:50%}.color-swatch[aria-pressed=true]{border-color:var(--fg);border-width:2px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:10}.modal{width:100%;max-width:420px;max-height:calc(100vh - 3rem);overflow-y:auto;display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:var(--bg);border:1px solid var(--border);border-radius:4px}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h2{margin:0}.modal-close{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;font-size:1.1rem;line-height:1}.modal-close:hover:not(:disabled){background:none;color:var(--accent);opacity:.7}.avatar-editor-modal{width:fit-content;max-width:calc(100vw - 3rem)}.avatar-editor-modal .modal-header{position:relative}.avatar-editor-modal .modal-close{position:absolute;top:50%;left:calc(320px + .55rem);transform:translateY(-50%)}.legal-page p{line-height:1.5;margin:0}.legal-page ul{margin:0;padding-left:1.25rem;line-height:1.5}