:root {
    color-scheme: light;
    --ink: #17252a;
    --muted: #607177;
    --line: #d7dfdc;
    --paper: #ffffff;
    --wash: #f4f7f5;
    --brand: #176b5b;
    --brand-dark: #0f5145;
    --danger: #a12626;
    --success: #176b45;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", "Noto Sans SC", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--wash);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(23, 107, 91, 0.06), transparent 240px),
        var(--wash);
}

a {
    color: var(--brand);
}

button,
input {
    font: inherit;
}

button,
.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand);
    border-radius: 7px;
    padding: 0.58rem 1rem;
    color: #fff;
    background: var(--brand);
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

button:hover,
.button:hover {
    background: var(--brand-dark);
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(23, 107, 91, 0.25);
    outline-offset: 2px;
}

button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.button-secondary {
    color: var(--brand);
    background: transparent;
}

.button-secondary:hover {
    color: #fff;
}

.site-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.site-header {
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
}

.header-inner,
.main-content,
.footer-inner {
    width: min(1080px, calc(100% - 40px));
    margin: 0 auto;
}

.header-inner {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand {
    color: var(--ink);
    font-family: Georgia, "Noto Serif SC", serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.account-link {
    max-width: min(45vw, 360px);
    overflow: hidden;
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-content {
    flex: 1;
    padding: 72px 0 80px;
}

.hero {
    max-width: 720px;
    margin-bottom: 54px;
}

.eyebrow {
    margin: 0 0 0.7rem;
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

h1,
h2 {
    margin-top: 0;
    font-family: Georgia, "Noto Serif SC", serif;
    line-height: 1.24;
}

h1 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 5vw, 3.45rem);
    font-weight: 650;
}

h2 {
    margin-bottom: 0.8rem;
    font-size: 1.35rem;
}

.lead,
.section-heading p,
.empty-state p,
.supporting-text {
    color: var(--muted);
    line-height: 1.75;
}

.lead {
    max-width: 620px;
    margin: 0;
    font-size: 1.05rem;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 20px;
}

.section-heading h2,
.section-heading p {
    margin-bottom: 0;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.game-card,
.empty-state,
.panel {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: 0 10px 30px rgba(23, 37, 42, 0.045);
}

.game-card {
    overflow: hidden;
}

.game-image {
    aspect-ratio: 16 / 10;
    background: #e5ebe8;
    object-fit: cover;
}

.game-body {
    padding: 20px;
}

.game-body h3 {
    margin: 0;
    font-family: Georgia, "Noto Serif SC", serif;
    font-size: 1.3rem;
}

.game-body p {
    min-height: 3em;
    color: var(--muted);
    line-height: 1.65;
}

.game-body .game-kicker {
    min-height: 0;
    margin: 0 0 0.55rem;
    color: var(--brand);
    font-size: 0.77rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.game-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    align-items: center;
    gap: clamp(28px, 6vw, 72px);
    margin-bottom: 58px;
}

.game-detail-hero .hero {
    margin: 0;
}

.game-cover-large {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(23, 37, 42, 0.1);
}

.context-note {
    margin-top: 1.25rem;
    border-left: 3px solid #c8a45e;
    padding-left: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.level-list {
    display: grid;
    gap: 14px;
}

.level-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px;
    background: var(--paper);
    box-shadow: 0 8px 26px rgba(23, 37, 42, 0.04);
}

.level-number {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-dark);
    background: #e8f1ee;
    font-family: Georgia, serif;
    font-weight: 700;
}

.level-copy h3,
.level-copy p {
    margin: 0;
}

.level-copy p {
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.level-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 650;
}

.level-state.is-complete {
    color: var(--success);
}

.level-state.is-complete::before {
    content: "✓";
}

.empty-state {
    grid-column: 1 / -1;
    padding: 38px;
    text-align: center;
}

.empty-mark {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    color: var(--brand);
    background: #e8f1ee;
    font-size: 1.35rem;
}

.empty-state h3,
.empty-state p {
    margin: 0;
}

.empty-state p {
    margin-top: 0.4rem;
}

.site-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    background: var(--paper);
}

.footer-inner {
    padding: 28px 0;
    text-align: center;
}

.footer-inner p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.auth-main {
    display: grid;
    place-items: start center;
    padding-top: 54px;
}

.panel {
    width: min(100%, 500px);
    padding: clamp(24px, 5vw, 42px);
}

.panel-wide {
    width: min(100%, 620px);
}

.panel-header {
    margin-bottom: 26px;
}

.panel-header h1 {
    margin-bottom: 0.45rem;
    font-size: 2rem;
}

.panel-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--line);
}

.tab-button {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--muted);
    background: transparent;
}

.tab-button:hover {
    color: var(--ink);
    background: transparent;
}

.tab-button[aria-selected="true"] {
    border-bottom-color: var(--brand);
    color: var(--brand);
}

.form-stack {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field {
    display: grid;
    gap: 7px;
}

.field label {
    font-size: 0.92rem;
    font-weight: 650;
}

.optional {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 400;
}

.field input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #bdc9c5;
    border-radius: 7px;
    padding: 0.64rem 0.75rem;
    color: var(--ink);
    background: #fff;
}

.field input[readonly] {
    color: var(--muted);
    background: var(--wash);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.form-actions button {
    min-width: 120px;
}

.full-button {
    width: 100%;
}

.text-link {
    border: 0;
    padding: 0;
    color: var(--brand);
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
}

.text-link:hover {
    color: var(--brand-dark);
    background: transparent;
    text-decoration: underline;
}

.message {
    display: none;
    margin: 0 0 20px;
    border-radius: 7px;
    padding: 0.75rem 0.9rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.message.is-visible {
    display: block;
}

.message.error {
    color: var(--danger);
    background: #fff0f0;
}

.message.success {
    color: var(--success);
    background: #eaf6ef;
}

.profile-meta {
    margin-bottom: 28px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
}

.profile-meta dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.82rem;
}

.profile-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 650;
}

.profile-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
}

[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .header-inner,
    .main-content,
    .footer-inner {
        width: min(100% - 28px, 1080px);
    }

    .header-inner {
        min-height: 62px;
    }

    .main-content {
        padding: 46px 0 58px;
    }

    .hero {
        margin-bottom: 42px;
    }

    .game-grid {
        grid-template-columns: 1fr;
    }

    .empty-state {
        padding: 30px 20px;
    }

    .auth-main {
        padding-top: 28px;
    }

    .panel {
        padding: 24px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .game-detail-hero {
        grid-template-columns: 1fr;
    }

    .game-cover-large {
        order: -1;
    }

    .level-card {
        grid-template-columns: auto 1fr;
    }

    .level-card .button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* Whole-page touch layout, including long signed-in account names. */
button, .button { min-height: 44px; }
.header-inner > * { min-width: 0; }
.account-link { min-height: 44px; display: flex; align-items: center; overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 760px) { .header-inner { gap: 12px; } .brand { flex-shrink: 0; font-size: 1.12rem; } .account-link { font-size: .8rem; max-width: 46%; } .section-heading { flex-wrap: wrap; } .level-copy { min-width: 0; } }
.account-link { display: block; overflow: visible; padding: 10px 0; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }

/* The entry pages use the same visible-viewport budget as the game. */
@media (max-width:760px) {
 body[data-page="home"] .site-shell,body[data-page="game"] .site-shell,body[data-page="account"] .site-shell {min-height:100dvh;}
 body[data-page="home"] .header-inner,body[data-page="game"] .header-inner,body[data-page="account"] .header-inner{min-height:44px;}
 body[data-page="home"] .main-content,body[data-page="game"] .main-content{padding:clamp(8px,2vh,18px) 0;}
 body[data-page="home"] .hero,body[data-page="game"] .hero{margin:0 0 12px;}
 body[data-page="home"] h1{font-size:clamp(24px,3.4vh,30px);margin-bottom:8px;}
 body[data-page="home"] .lead,body[data-page="game"] .lead{font-size:14px;line-height:1.5;margin-bottom:6px;}
 body[data-page="home"] .eyebrow,body[data-page="game"] .eyebrow{margin-bottom:6px;font-size:11px;}
 body[data-page="home"] .section-heading,body[data-page="game"] .section-heading{margin-bottom:8px;gap:3px;}
 body[data-page="home"] .section-heading h2,body[data-page="game"] .section-heading h2{font-size:20px;margin-bottom:3px;}
 body[data-page="home"] .section-heading p,body[data-page="game"] .section-heading p{font-size:13px;margin:0;}
 body[data-page="home"] .game-card{display:grid;grid-template-columns:86px minmax(0,1fr);}
 body[data-page="home"] .game-image{height:100%;width:86px;object-fit:cover;}
 body[data-page="home"] .game-body{padding:10px;}
 body[data-page="home"] .game-body h3{font-size:18px;margin:5px 0;}
 body[data-page="home"] .game-body p{font-size:13px;line-height:1.5;margin:0 0 8px;}
 body[data-page="home"] .game-body .game-kicker{font-size:11px;margin:0;}
 body[data-page="home"] .site-footer,body[data-page="game"] .site-footer,body[data-page="account"] .site-footer{padding:6px 0;}
 body[data-page="home"] .footer-inner,body[data-page="game"] .footer-inner,body[data-page="account"] .footer-inner{display:flex;justify-content:space-between;gap:8px;font-size:11px;}
 body[data-page="home"] .footer-inner p,body[data-page="game"] .footer-inner p,body[data-page="account"] .footer-inner p{margin:0;}
 body[data-page="game"] .game-detail-hero{grid-template-columns:minmax(0,1fr) 72px;gap:8px;margin-bottom:8px;}
 body[data-page="game"] .game-cover-large{order:0;width:72px;align-self:start;aspect-ratio:1;object-fit:cover;}
 body[data-page="game"] h1{font-size:22px;margin:0 0 6px;}
 body[data-page="game"] .context-note{font-size:12px;line-height:1.5;margin-top:6px;}
 body[data-page="game"] .level-card{padding:10px;gap:6px 10px;}
 body[data-page="game"] .level-number{font-size:25px;}
 body[data-page="game"] .level-copy h3{font-size:16px;margin-bottom:4px;}
 body[data-page="game"] .level-copy p,body[data-page="game"] .level-state{font-size:12px;margin:2px 0;}
 body[data-page="game"] .section-heading>a{min-height:44px;font-size:13px;display:flex;align-items:center;}
 body[data-page="account"] .auth-main{padding:8px 0;}
 body[data-page="account"] .panel{padding:12px;}
 body[data-page="account"] .panel-header{margin-bottom:8px;}
 body[data-page="account"] .panel-header h1{font-size:24px;margin-bottom:5px;}
 body[data-page="account"] .panel-header p{font-size:13px;margin:0;}
 body[data-page="account"] .tabs{margin-bottom:10px;}
 body[data-page="account"] .form-stack{gap:8px;}
 body[data-page="account"] .field{gap:3px;}
 body[data-page="account"] .field label{font-size:13px;}
 body[data-page="account"] .field input{font-size:16px;padding:6px 8px;}
 body[data-page="account"] .form-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
 body[data-page="account"] .message{padding:6px;margin-bottom:6px;font-size:13px;}
}
@media(max-width:760px){
 body[data-page="home"] .footer-inner,body[data-page="game"] .footer-inner,body[data-page="account"] .footer-inner{padding:0;}
 body[data-page="home"] .footer-inner p,body[data-page="game"] .footer-inner p,body[data-page="account"] .footer-inner p{font-size:11px;line-height:1.5;}
 body[data-page="home"] .game-image,body[data-page="game"] .game-cover-large{object-fit:contain;}
}
@media(max-width:350px){
 body[data-page="home"] .game-card{grid-template-columns:56px minmax(0,1fr);}
 body[data-page="home"] .game-image{width:56px;}
 body[data-page="home"] .game-body{padding:8px;}
 body[data-page="home"] .hero{margin-bottom:7px;}
 body[data-page="home"] .lead{font-size:14px;}
 body[data-page="game"] .game-detail-hero{grid-template-columns:minmax(0,1fr) 48px;}
 body[data-page="game"] .game-cover-large{width:48px;}
 body[data-page="game"] .context-note{padding-left:7px;}
}
@media(max-width:760px){
 body[data-page="home"] .account-link,body[data-page="game"] .account-link{padding:2px 0;line-height:1.25;word-break:break-all;display:flex;align-items:center;}
 body[data-page="game"] .game-detail-hero .hero{margin:0;}
 body[data-page="game"] .context-note{margin:4px 0 0;}
 body[data-page="game"] .section-heading{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;}
 body[data-page="game"] .section-heading>div{display:contents;}
 body[data-page="game"] .section-heading h2{grid-column:1;grid-row:1;}
 body[data-page="game"] .section-heading p{grid-column:1/-1;grid-row:2;}
 body[data-page="game"] .section-heading>a{grid-column:2;grid-row:1;}
 body[data-page="account"] .panel{padding:8px;}
 body[data-page="account"] .tabs{margin-bottom:6px;}
 body[data-page="account"] .form-stack{gap:6px;}
 body[data-page="account"] .panel-header{margin-bottom:4px;}
}
@media(max-width:350px){
 body[data-page="game"] .main-content{padding:5px 0;}
 body[data-page="game"] .level-card{grid-template-columns:30px minmax(0,1fr);padding:8px;gap:6px;}
 body[data-page="game"] .level-number{width:30px;height:30px;font-size:21px;}
 body[data-page="game"] .level-copy h3{font-size:15px;line-height:1.35;}
 body[data-page="account"] .auth-main{padding:6px 0;}
}
@media(max-width:350px){body[data-page="home"] .main-content{padding:5px 0;}}

/* Platform pages share the visible mobile viewport; level assets remain independent. */
.profile-rights{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:15px}
@media(max-width:700px){
    .site-shell{min-height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
    .header-inner,.main-content,.footer-inner{width:calc(100% - 28px)}
    .header-inner{min-height:50px;gap:10px}.brand{font-size:18px}.account-link{font-size:14px}
    .main-content{padding:16px 0;display:flex;flex-direction:column;justify-content:center;gap:16px}
    .hero{margin:0}.hero h1{font-size:clamp(23px,6vw,30px);line-height:1.3;margin:5px 0}
    .eyebrow{margin:0}.lead{font-size:14px;line-height:1.5;margin:8px 0}
    .section-heading{margin-bottom:10px}.section-heading h2{font-size:20px}.section-heading p{font-size:13px;margin-top:4px}
    .game-grid{grid-template-columns:1fr}.game-card{display:grid;grid-template-columns:30% 1fr;align-items:center}.game-image{width:100%;height:100%;object-fit:contain}
    .game-body{padding:12px}.game-body h3{font-size:18px}.game-body p{font-size:14px;line-height:1.4;margin:6px 0;min-height:0}.game-body .game-kicker{font-size:12px}
    .footer-inner{padding:7px 0}.footer-inner p{font-size:12px;margin:2px 0}
    .game-detail-hero{grid-template-columns:1fr 30%;gap:12px;margin-bottom:0}.game-detail-hero .context-note{font-size:13px;line-height:1.4;margin-top:8px;padding-left:8px}
    .level-card{grid-template-columns:32px 1fr;gap:8px;padding:12px}.level-card .button{grid-column:1/-1}.level-number{width:30px;height:30px}.level-copy h3{font-size:16px}.level-copy p{font-size:13px}
    .panel{padding:16px}.panel-header{margin-bottom:12px}.panel-header h1{font-size:24px}.panel-header p{font-size:14px}.form-stack{gap:10px}.tabs{margin-bottom:12px}.field{gap:4px}.field input{min-height:42px;padding:9px 10px}.form-row{grid-template-columns:1fr 1fr;gap:10px}.profile-meta{margin:0 0 12px}.profile-footer{margin-top:12px;padding-top:12px}.message.is-visible{margin:6px 0;padding:8px}.auth-main{align-items:center}
}
@media(max-width:700px) and (max-height:590px){.main-content{padding:8px 0;gap:10px}.header-inner{min-height:44px}.hero h1{font-size:23px}.lead{margin:5px 0}.section-heading{margin-bottom:7px}.game-body{padding:9px}.panel{padding:12px}.form-stack{gap:7px}.panel-header{margin-bottom:8px}.tabs{margin-bottom:8px}}
@media(min-width:701px) and (max-height:900px){
 .main-content{padding:24px 0}.auth-main{padding-top:20px;padding-bottom:20px}.panel{padding:24px}.panel-header{margin-bottom:16px}.tabs{margin-bottom:16px}.form-stack{gap:12px}.footer-inner{padding:12px 0}.hero{margin-bottom:24px}.game-image{max-height:140px;width:100%;object-fit:contain}.game-detail-hero{margin-bottom:24px;gap:24px}.game-cover-large{max-height:240px;object-fit:contain}
}
@media(min-width:701px) and (max-height:900px){.game-grid{grid-template-columns:1fr}.game-card{display:grid;grid-template-columns:180px 1fr;align-items:center}.game-image{max-height:200px}.game-body p{min-height:0}.game-body{padding:16px}}
@media(max-width:700px){body[data-page=profile] .profile-meta{padding-bottom:10px}body[data-page=profile] .footer-inner{display:flex;justify-content:space-between;gap:6px}body[data-page=profile] .footer-inner p{font-size:11px}}