/* TENG MEDIA shared identity. Scene artwork and navigation geometry stay original. */
:root{--bg:#101112;--panel:#191a1c;--panel-2:#222426;--text:#f2f0e9;--muted:#b5b5b3;--line:#333536;--gold:#ed3e32;--gold-light:#f2f0e9;--green:#a7c9ad;--serif:'Oswald','Arial Narrow',Impact,sans-serif;--sans:Arial,Helvetica,sans-serif;--brand-red:#c92e25}
body{-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);text-transform:uppercase;letter-spacing:-.025em;font-weight:600}
.topbar{min-height:96px;padding:22px 3%;background:var(--bg);gap:32px}
.brand img{width:220px;height:auto;object-fit:contain}
.main-nav{gap:32px}
.nav-item{font-size:15px;font-weight:700;text-transform:uppercase;color:var(--text);padding:14px 0;white-space:nowrap}
.nav-item.active{color:var(--text)}
.nav-item.active:after{height:3px;background:var(--gold)}
.header-xp{color:var(--muted);font-size:12px}
.user-button{background:var(--brand-red);border:1px solid var(--brand-red);border-radius:6px;padding:10px 16px;color:#fff;font-size:14px;font-weight:700}
.avatar-mini{font:600 18px var(--sans);background:#ffffff14;border:1px solid #ffffff55;color:#fff;width:30px;height:30px}
.button{background:var(--brand-red);border-color:var(--brand-red);color:#fff;box-shadow:none;font-family:var(--serif);font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.15px;border-radius:5px;min-height:46px}
.button:hover,.user-button:hover{background:#aa251e;filter:none}
.button.secondary,.button.ghost{background:transparent;border-color:#737573;color:var(--text)}
.button.secondary:hover,.button.ghost:hover{background:#252628;border-color:var(--text)}
.button.small{font-size:14px}
.text-button:hover{color:#fff}
.icon-button,.world-back,.touch-pad button{background:#101112e8;border-color:#626466;color:var(--text)}
.icon-button:hover{background:#303234}
.world-topline{background:var(--surface,var(--panel));padding:17px 3%;font-size:11px;letter-spacing:1.4px;border-bottom:1px solid var(--line)}
#location-label{color:var(--text);font-weight:700}
#location-subtitle{color:var(--muted);font-size:12px}
.status-dot{width:7px;height:7px;border-radius:0;background:var(--gold);box-shadow:none}
.world-footer,.site-footer{background:var(--bg);color:var(--muted)}
.world-flavor{font-family:var(--sans);font-style:normal;font-size:12px;color:var(--muted)}
.adventure-strip{background:var(--panel);border-bottom:1px solid var(--line);padding-top:28px;padding-bottom:28px}
.adventure-strip h2{font-weight:600;font-size:28px}
.strip-icon{background:#ed3e3210;border-radius:4px}
.eyebrow{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.8px}
.free-tag{color:#bfe0c5;border-color:#466b4c;background:#17281b}
.page-heading h1{font-weight:600;line-height:1.08}
.grade-card,.journal-hero,.journal-lesson,.membership-banner,.modal,.lesson-sidebar,.prompt-box{background:var(--panel);border-color:var(--line)}
.grade-card:hover{background:#222426;border-color:#747674}
.grade-card.free{background:linear-gradient(135deg,#302020,#191a1c);border-color:#79413b}
.page-heading h1 em{font-style:normal;font-weight:600;color:#858783}
.page-heading p{font-size:15px}
.grade-card p,.grade-card-bottom{font-size:12px}
.journal-lesson:hover{background:#292b2d}
.journal-portrait{background:#292b2d}
.modal-close{background:#101112ed}
.modal-crest,#gate-form .modal-crest{display:block;width:180px;height:auto;object-fit:contain;margin-bottom:22px}
.grade-card h2,.journal-lesson h3,.journal-hero h2,.modal-body h2,.dialog-hero h2,.lesson-header h2,.lesson-notes h3,.quiz h3{font-weight:600;line-height:1.15}
.grade-number,.grade-glyph{color:var(--muted)}
.grade-detail,.modal-body,.membership-options,.lesson-main{background:var(--panel)}
.dialog-hero,.journal-hero,.membership-banner{background:#202224}
.lesson-notes p,.mission-box p,.prompt-box p,.grade-card p{color:var(--muted)}
.sidebar-lesson.active,.sidebar-lesson:hover{background:#292b2d}
.mission-box{background:#ed3e320a}
.auth-form input,.auth-form textarea,textarea,.mission-input{background:#101112;color:var(--text);border-color:#4a4c4d}
.auth-form input:focus,textarea:focus{border-color:var(--gold);outline-color:var(--gold)}
.character-choice label:has(input:checked){background:#ed3e3214}
#gate-form{background:#101112f5;border-color:#494b4c;border-radius:8px}
#gate-form .modal-body{background:transparent}
.gate-intro h1,#gate-form h2{font-weight:600;text-transform:uppercase;letter-spacing:-.025em;line-height:1.12}
.gate-intro p{color:var(--text)}
.gate-intro>.eyebrow{display:block;color:var(--text)}
.gate-brand{display:block;width:220px;height:auto;margin-bottom:24px}
.gate-mobile-logo{display:none}
.social-button{font-family:var(--sans);text-transform:none;background:#fff;color:#101112;border-color:#fff;font-size:13px}
.social-button:hover{background:#eef0f2}
.social-button.facebook,.social-button.facebook:hover{background:#2456a6;color:white;border-color:#4c78be}
.toast{background:#222426f5;border-color:#626466;color:var(--text)}
.portal-label{background:#101112ef;border-color:#747674;color:var(--text)}
.portal:hover .portal-label{background:#292b2d;border-color:#fff}
.player>span,.player .speech-bubble{background:#101112e8;border-color:#737573;color:#fff}
.room-chat .chat-form input{background:#101112d9;border-color:#626466;border-radius:5px}
.room-chat .chat-form input:focus{outline-color:var(--gold);background:#101112ee}
.room-chat .chat-form>button{background:var(--brand-red);border-color:var(--brand-red);border-radius:5px;color:#fff;font-weight:700}
.site-footer .footer-links a{color:var(--muted)}
@media(max-width:1050px){.topbar{gap:20px}.brand img{width:180px;height:auto}.main-nav{gap:20px}.nav-item{font-size:13px}.user-button{padding:8px 12px}}
@media(max-width:900px){.main-nav{display:none}.mobile-menu{display:flex;border:none;background:none;width:27px}}
@media(max-width:780px){.topbar{min-height:78px;padding:16px 4%;gap:12px}.brand img{width:170px;height:auto}.header-actions{gap:10px}.header-xp{display:none}.user-button{font-size:12px;padding:8px 10px}.avatar-mini{display:none}.world-topline{padding:14px 4%}.adventure-strip h2{font-size:24px}.mobile-menu{color:var(--text)}.gate-brand{width:190px;margin:0 auto 16px}}
@media(max-width:450px){.brand img{width:145px;height:auto}.topbar{gap:8px}.user-button{max-width:110px}.user-button>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-actions .button{font-size:12px}.adventure-strip .button{margin-left:0;max-width:none}.site-footer{gap:14px}}

/* Put the brand above the headline in the stacked entrance layout. */
@media(max-width:760px){
  .gate-mobile-logo{display:block;width:150px;height:auto;margin:0 auto 16px}
  #gate-form .modal-crest{display:none}
}

/* Phone entrance typography: compact headings, readable forms, generous tap targets. */
@media(max-width:600px){
  #account-gate{padding:24px 16px;gap:18px}
  #account-gate .gate-intro h1{font-size:clamp(26px,7.2vw,30px);line-height:1.18;margin:10px 0 0;text-wrap:balance}
  #account-gate .gate-intro>.eyebrow{font-size:10px;letter-spacing:1.4px}
  #account-gate .gate-school-preview{margin-top:18px}
  #gate-form .modal-body{padding:22px}
  #gate-form .modal-crest{width:160px;margin-bottom:18px}
  #gate-form h2{font-size:clamp(22px,6.1vw,26px);line-height:1.2;margin:10px 0 12px;text-wrap:balance}
  #gate-form .eyebrow{font-size:10px;letter-spacing:1.2px}
  #gate-form .modal-body>p{font-size:14px;line-height:1.55}
  #gate-form .auth-form label{font-size:12px}
  #gate-form .auth-form .input{font-size:16px;min-height:46px}
  #gate-form .auth-form>.button{font-size:15px;min-height:46px}
  #gate-form .social-auth .small-print{font-size:11px!important;line-height:1.6!important}
}

/* Supporting screens use the same identity as the entrance and account hub. */
dialog{border-color:var(--line)}
.lesson-row,.billing-toggle,.screen-icon{background:var(--bg)}
.lesson-row:hover{background:#292b2d;border-color:#737573}
.billing-toggle button.selected{background:#292b2d;color:var(--text)}
.lesson-screen{border-color:var(--line)}
.quiz-option:has(input:checked){background:#ed3e3214}
.dialog-hero p,.screen-center p,.auth-form label{color:var(--text)}
.form-message,.quiz-result.error{color:#ffb2a8}
.world-viewport .room-chat{background:#101112d9;border-color:var(--line)}