:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #090b13; color: #f6f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #1c2440, #090b13 55%); }
#v2-app { min-height: 100vh; display: grid; place-content: center; }
.state-card, .shell-main { width: min(92vw, 680px); padding: 2rem; border: 1px solid #303957; border-radius: 20px; background: rgba(12, 16, 29, .92); box-shadow: 0 20px 70px rgba(0, 0, 0, .35); }
.eyebrow { color: #83d8ff; font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
h1 { margin: .35rem 0 .75rem; font-size: clamp(2rem, 7vw, 3.5rem); }
p { color: #c7cbda; line-height: 1.6; }
#v2-app[data-state="preview"], #v2-app[data-state="shell"], #v2-app[data-state="authenticated"], #v2-app[data-state="ready"], #v2-app[data-state="home"], #v2-app[data-state="profile"], #v2-app[data-state="account"], #v2-app[data-state="account-flow"], #v2-app[data-state="connect4"], #v2-app[data-state="arena"] { display: block; place-content: normal; }
#v2-app[data-state="domino"] { display:block; place-content:normal; }
.preview-banner { padding: .6rem 1rem; text-align: center; background: #ffd166; color: #171106; font-weight: 900; letter-spacing: .08em; }
.shell-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #303957; }
.shell-header span { color: #9ca4bb; }
.shell-main { margin: 12vh auto 0; }
.auth-card { margin: 12vh auto 0; }
.auth-card form { display: grid; gap: .8rem; }
input, button { width: 100%; padding: .85rem 1rem; border-radius: 10px; border: 1px solid #3a4568; font: inherit; }
input { color: #f6f7fb; background: #111728; }
button { color: #09101a; background: #83d8ff; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
.secondary { color: #dce4ff; background: transparent; }
.link-button { color: #83d8ff; background: transparent; border-color: transparent; }
.success-message { color: #9cf3bd; }
.auth-error { color: #ff9292; margin: 0; }
.app-notice, .game-entry-error { color: #ffcf8b; font-weight: 700; }
.user-id { font-family: ui-monospace, monospace; font-size: .85rem; word-break: break-all; }
.username-feedback { min-height: 1.5rem; margin: 0; }
#v2-context-retry + #v2-logout { margin-top: .75rem; }
.app-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid #303957; background: rgba(9, 11, 19, .88); }
.app-header nav { display: flex; gap: .5rem; }
.app-header a { color: #c7cbda; padding: .55rem .75rem; border-radius: 8px; text-decoration: none; }
.app-header a[aria-current="page"] { color: #09101a; background: #83d8ff; font-weight: 800; }
.app-account { display: flex; align-items: center; gap: .75rem; }
.app-account button { width: auto; }
.header-username { color: #83d8ff; font-weight: 800; }
.app-outlet { width: min(92vw, 760px); margin: 8vh auto 0; padding: 2rem; border: 1px solid #303957; border-radius: 20px; background: rgba(12, 16, 29, .92); }
@media (max-width: 900px) { .app-header { grid-template-columns: minmax(0, 1fr); gap: .85rem; } .app-header nav, .app-account { min-width: 0; flex-wrap: wrap; } .app-account { justify-content: space-between; } .header-username { overflow-wrap: anywhere; } }
.profile-fields { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .75rem 1.25rem; }
.profile-fields dt { color: #9ca4bb; }
.profile-fields dd { margin: 0; }
.profile-avatar { display: grid; place-items: center; width: 96px; height: 96px; margin: 1rem 0; border-radius: 50%; object-fit: cover; background: #202b49; color: #83d8ff; font-size: 2.5rem; font-weight: 900; }
.profile-editor { display: grid; gap: .75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #303957; }
.game-entry { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid #3a4568; border-radius: 16px; background: #111728; }
.game-entry h2 { margin: .2rem 0; font-size: 1.75rem; }
.connect4-page-actions { display: flex; gap: .75rem; margin-bottom: 1rem; }
.connect4-page-actions button { width: auto; }
.connect4-invite { padding: 1rem; border: 1px solid #3a4568; border-radius: 12px; background: #111728; }
.connect4-invite input { margin-top: .5rem; }
.connect4-page-error { color: #ff9292; }
@media (max-width: 680px) { .app-outlet { width: 100%; margin-top: 1rem; padding: 1rem; border-radius: 0; } .connect4-page-actions { flex-wrap: wrap; } .connect4-invite input { font-size: 16px; } }
.rooms-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.room-form,.room-card{display:grid;gap:.75rem;padding:1rem;border:1px solid #334155;border-radius:1rem;background:#111827}.room-list{display:grid;gap:.75rem;margin-top:1.25rem}.room-card{grid-template-columns:1fr auto;align-items:center}.member-list{display:grid;gap:.65rem;padding:0;list-style:none}.member-list li{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid #334155}.rooms-status{min-height:1.5rem}@media(max-width:640px){.rooms-controls,.room-card{grid-template-columns:1fr}}
.arena-challenge-form{display:grid;grid-template-columns:2fr 1fr auto;gap:.75rem}.arena-challenge-form select{padding:.85rem;border:1px solid #3a4568;border-radius:10px;color:#f6f7fb;background:#111728}.arena-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.5rem}.arena-card{display:grid;gap:.55rem;padding:1rem;margin:.65rem 0;border:1px solid #3a4568;border-radius:14px;background:#111728}.arena-card span{color:#aeb6cb}.arena-actions{display:flex;gap:.5rem}.arena-ranking{margin-top:1.5rem}.arena-ranking li{padding:.55rem;border-bottom:1px solid #303957}.arena-status{min-height:1.5rem}@media(max-width:680px){.arena-challenge-form,.arena-columns{grid-template-columns:1fr}.arena-actions{flex-wrap:wrap}}
.arena-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.arena-catalog>h2{grid-column:1/-1}.arena-game-card{display:grid;gap:.5rem;padding:1rem;border:1px solid #3a4568;border-radius:14px;background:#111728}.arena-game-card h3,.arena-game-card p{margin:0}.arena-game-hud{position:sticky;top:.5rem;z-index:2;padding:.75rem;border-radius:12px;background:#202b49;font-weight:800}.arena-playfield{display:grid;min-height:300px;place-items:center;margin:1rem 0;padding:1rem;border:1px solid #3a4568;border-radius:18px;background:#0b1020}.arena-symbol-grid{display:grid;grid-template-columns:repeat(var(--side),minmax(42px,1fr));gap:.45rem;width:min(100%,520px)}.arena-answer-grid,.arena-memory-grid{display:grid;grid-template-columns:repeat(2,minmax(90px,1fr));gap:.75rem;width:min(100%,440px)}.arena-hunt-grid{display:grid;grid-template-columns:repeat(6,minmax(38px,1fr));gap:.35rem;width:min(100%,520px)}.arena-choice{aspect-ratio:1;display:grid;place-items:center;padding:.4rem;font-size:clamp(1rem,4vw,2rem)}.arena-question{font-size:clamp(2rem,9vw,5rem);font-weight:900;text-align:center}.arena-memory-preview{letter-spacing:.5rem;font-size:1.4rem}.arena-game-actions{display:flex;gap:.75rem}.arena-game-actions button,.arena-back{width:auto}.arena-final-result{font-size:1.1rem;font-weight:800}@media(max-width:680px){.arena-catalog{grid-template-columns:1fr}.arena-playfield{min-height:260px;padding:.65rem}.arena-hunt-grid{grid-template-columns:repeat(4,minmax(38px,1fr))}.arena-game-actions{flex-wrap:wrap}}
.live-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.live-card{display:grid;gap:.7rem;padding:1rem;border:1px solid #3a4568;border-radius:16px;background:#111728}.live-card select{min-width:0;padding:.75rem;border:1px solid #3a4568;border-radius:10px;color:#fff;background:#111728}.live-players{display:grid;gap:.5rem;padding:0;list-style:none}.live-players li,.live-stage,.live-bracket{padding:1rem;border:1px solid #3a4568;border-radius:14px;background:#111728}.live-stage{display:grid;gap:.8rem;min-height:220px;place-content:center;margin:1rem 0;text-align:center}.live-prompt{font-size:clamp(1.4rem,8vw,3.5rem);font-weight:900}.live-actions,.live-choices{display:flex;flex-wrap:wrap;gap:.6rem}.live-actions button,.live-choices button,.live-tap,.live-stage button,.live-stage input,.app-outlet>.secondary{width:auto}.live-tap{min-width:min(70vw,320px);min-height:120px;font-size:2rem}@media(max-width:680px){.live-catalog{grid-template-columns:1fr}.live-stage{min-height:190px}.live-actions button{flex:1 1 9rem}}
.wallet-panel,.matchmaking-panel{width:min(100%,48rem);margin-inline:auto;display:grid;gap:1rem}.wallet-balance{font-size:clamp(1.75rem,8vw,3rem)}.wallet-ledger{display:grid;gap:.5rem;padding-left:1.25rem}.matchmaking-panel form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.matchmaking-panel select,.matchmaking-panel button{min-width:0;max-width:100%}.economy-error{color:#ffb4b4}@media(max-width:480px){.matchmaking-panel form>*{width:100%}}
.history-stats{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.history-stat{padding:.55rem .7rem;border:1px solid #3a4568;border-radius:10px}.history-list{display:grid;gap:.65rem;padding:0;list-style:none}.history-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.75rem;align-items:center;padding:.8rem;border:1px solid #3a4568;border-radius:12px}.history-item time{font-size:.85rem;color:#b7bfd8}@media(max-width:680px){.history-item{grid-template-columns:1fr}.history-item time{overflow-wrap:anywhere}}
.product-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.25rem 0}.hub-card{display:grid;align-content:start;gap:.55rem;min-width:0;padding:1rem;border:1px solid #3a4568;border-radius:14px;background:#111728}.hub-card h2,.hub-card p{margin:0}.hub-card button{width:auto;margin-top:auto}@media(max-width:560px){.product-hub{grid-template-columns:1fr}}
.progression-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:1rem 0;padding:1rem;border:1px solid #3a4568;border-radius:14px;background:#111728}.progression-card h2,.progression-card h3,.progression-meter,.progression-activity,.progression-achievements{grid-column:1/-1}.progression-meter{width:100%}.progression-activity,.progression-achievements{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}.progression-activity li{display:flex;justify-content:space-between;gap:.75rem;min-width:0}.progression-activity time{color:#b7bfd8;font-size:.85rem}@media(max-width:680px){.progression-card{grid-template-columns:1fr}.progression-activity li{align-items:flex-start;flex-direction:column}}
.domino-game{display:grid;gap:1rem;min-width:0}.domino-hud{position:sticky;top:.5rem;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding:.8rem;border-radius:12px;background:#202b49}.domino-seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:0;list-style:none}.domino-seats li{min-width:0;padding:.65rem;border:1px solid #3a4568;border-radius:10px;overflow-wrap:anywhere}.domino-seats .is-me{border-color:#83d8ff}.domino-board{display:flex;align-items:center;gap:.3rem;min-width:0;min-height:170px;padding:1rem;overflow-x:auto;border:1px solid #3a4568;border-radius:16px;background:#0b1020}.domino-board-tile,.domino-tile{display:inline-grid;flex:0 0 auto;place-items:center;min-width:58px;min-height:76px;padding:.55rem;border:2px solid #536182;border-radius:9px;background:#f6f1df;color:#121826;font-weight:900}.domino-hand{display:flex;gap:.45rem;min-width:0;padding:.65rem;overflow-x:auto}.domino-tile.is-legal{border-color:#57d68d;box-shadow:0 0 0 2px rgba(87,214,141,.25)}.domino-actions{display:flex;flex-wrap:wrap;gap:.6rem}.domino-actions button{width:auto;min-height:48px}.domino-rules{padding:.8rem;border:1px solid #3a4568;border-radius:12px}@media(max-width:560px){.domino-seats{grid-template-columns:1fr}.domino-board{min-height:130px;padding:.65rem}.domino-tile{min-width:54px;min-height:70px}.domino-actions button{flex:1 1 9rem}}
.truco-game{display:grid;gap:1rem;min-width:0}.truco-hud{position:sticky;top:.5rem;z-index:2;display:flex;flex-wrap:wrap;gap:.7rem;justify-content:space-between;padding:.8rem;border-radius:12px;background:#202b49}.truco-opponent,.truco-hand{display:flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;padding:.75rem;overflow-x:auto}.truco-table{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:180px;padding:1rem;border:1px solid #3a4568;border-radius:16px;background:#0b1020}.truco-card,.truco-card-back,.truco-played-card{display:grid;flex:0 0 88px;min-height:126px;place-items:center;padding:.55rem;border:2px solid #637096;border-radius:10px;text-align:center;font-weight:800}.truco-card,.truco-played-card{background:#f7f0d8;color:#17120d}.truco-card-back{background:repeating-linear-gradient(45deg,#172647,#172647 8px,#29406d 8px,#29406d 16px);color:#fff}.truco-actions{display:flex;flex-wrap:wrap;gap:.55rem}.truco-actions button{width:auto;min-height:48px}.truco-rules{padding:.8rem;border:1px solid #3a4568;border-radius:12px}@media(max-width:560px){.truco-card,.truco-card-back,.truco-played-card{flex-basis:76px;min-height:110px}.truco-table{min-height:145px}.truco-actions button{flex:1 1 8rem}}