*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#f97316;--dark:#0d0d1a;--card:#1a1a2e;
  --text:#e2e8f0;--muted:#94a3b8;--radius:12px;
  --shadow:0 4px 24px rgba(0,0,0,.6)
}
html,body{height:100%;background:var(--dark);color:var(--text);
  font-family:'Open Sans',sans-serif;overflow-x:hidden}
#app{min-height:100vh}

.screen{display:none;flex-direction:column;align-items:center;
  min-height:100vh;padding:20px 16px 40px;animation:fadeIn .35s ease}
.screen.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* MENU */
.menu-hero{text-align:center;padding:20px 0 10px}
.cover-img{width:min(280px,80vw);border-radius:var(--radius);
  box-shadow:var(--shadow);border:3px solid var(--orange);margin-bottom:16px}
h1{font-family:'Oswald',sans-serif;font-size:clamp(2rem,8vw,3rem);
  color:var(--orange);line-height:1.1;text-shadow:0 0 20px rgba(249,115,22,.4)}
.subtitle{color:var(--muted);margin-top:6px;font-size:.95rem}
.welcome{color:var(--muted);margin-bottom:8px}
.menu-buttons{display:flex;flex-direction:column;gap:12px;
  width:min(360px,100%);margin-top:20px}

/* BUTTONS */
.btn{border:none;border-radius:var(--radius);padding:14px 24px;
  font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;
  width:100%;letter-spacing:.5px}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:#ea6000;transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(249,115,22,.4)}
.btn-secondary{background:#1e3a5f;color:#fff}
.btn-secondary:hover{background:#274e80}
.btn-outline{background:transparent;color:var(--orange);border:2px solid var(--orange)}
.btn-outline:hover{background:rgba(249,115,22,.1)}
.btn-ghost{background:transparent;color:var(--muted);font-weight:400}
.btn-ghost:hover{color:var(--text)}
.btn-icon{background:rgba(255,255,255,.08);border:none;border-radius:8px;
  padding:8px 12px;cursor:pointer;font-size:1.1rem;color:var(--text)}
.btn-icon:hover{background:rgba(255,255,255,.16)}

/* FORMS */
.form-group{display:flex;flex-direction:column;gap:12px;width:min(360px,100%)}
h2{font-family:'Oswald',sans-serif;font-size:1.8rem;color:var(--orange);margin-bottom:20px}
input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);padding:14px 16px;color:var(--text);
  font-size:1rem;width:100%}
input:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(249,115,22,.2)}
.error-msg{color:#f87171;font-size:.9rem;text-align:center;min-height:20px;margin-top:4px}

/* GAME */
#screen-game{padding:0;align-items:stretch}
#game-header{display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid rgba(255,255,255,.08)}
#game-username{flex:1;font-size:.85rem;color:var(--muted)}
#game-score{font-weight:700;color:var(--orange);margin-right:4px}
#scene-wrapper{display:flex;flex-direction:column;
  min-height:calc(100vh - 54px);transition:background .6s;padding-bottom:30px}
#scene-mood-bar{padding:8px 16px;font-size:.8rem;font-weight:600;
  text-align:center;letter-spacing:1px;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5)}
#scene-character{display:flex;justify-content:center;padding:20px 16px 0}
#scene-img{width:min(200px,55vw);border-radius:var(--radius);
  border:2px solid rgba(249,115,22,.5);
  box-shadow:0 8px 32px rgba(0,0,0,.7);
  object-fit:cover;aspect-ratio:2/3}
#scene-content{padding:20px 20px 8px}
#scene-title{font-family:'Oswald',sans-serif;font-size:1.5rem;
  color:var(--orange);margin-bottom:12px}
#scene-description{line-height:1.8;font-size:.97rem;color:var(--text)}
#scene-choices{display:flex;flex-direction:column;gap:10px;padding:16px 20px 20px}
.choice-btn{background:rgba(249,115,22,.12);
  border:1px solid rgba(249,115,22,.3);color:var(--text);
  border-radius:var(--radius);padding:14px 18px;font-size:.95rem;
  cursor:pointer;text-align:left;transition:all .2s;
  animation:slideUp .4s ease both}
.choice-btn:hover{background:rgba(249,115,22,.25);
  border-color:var(--orange);transform:translateX(4px)}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1}}
.loading{text-align:center;color:var(--muted);padding:30px;font-style:italic}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:rgba(30,58,95,.95);color:#fff;
  padding:12px 24px;border-radius:24px;font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow);transition:transform .3s;z-index:100;
  border:1px solid rgba(249,115,22,.4);white-space:nowrap}
.toast.visible{transform:translateX(-50%) translateY(0)}

/* LEADERBOARD */
#screen-leaderboard{gap:16px}
.board-table{width:100%;max-width:600px;border-collapse:collapse;font-size:.9rem}
.board-table th{background:rgba(249,115,22,.2);color:var(--orange);
  padding:10px 8px;text-align:left}
.board-table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.gold td{color:#fbbf24}.silver td{color:#cbd5e1}.bronze td{color:#d97706}

/* DESKTOP */
@media(min-width:600px){
  #scene-wrapper{max-width:640px;margin:0 auto}
  #scene-img{width:180px}
}