:root {
  --ink: #070c18;
  --wood: #16202c;
  --wood-light: #233242;
  --line: #3b4e60;
  --paper: #eadfc2;
  --text: #e8eef0;
  --muted: #9fb2bb;
  --orange: #f0791f;
  --orange-light: #ffa64d;
  --gold: #e8c15a;
  --cut: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #03060c; overflow: hidden; }
body { font-family: "Segoe UI", system-ui, sans-serif; color: var(--text); }
[hidden] { display: none !important; }

#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: center; overflow: hidden; background: var(--ink); }
#bg { position: absolute; inset: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

#loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 18px; letter-spacing: .08em; background: var(--ink); }

/* Tela titulo */
#title { position: absolute; inset: 0; animation: fade .9s ease; }
.logo { position: absolute; left: 88px; top: 40px; }
.logo h1 {
  margin: 0; font: 400 136px/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .03em;
  background: linear-gradient(#ffd27a 12%, var(--orange-light) 42%, #e4560f 82%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #481604) drop-shadow(0 10px 22px rgba(0,0,0,.75));
}
.logo p { margin: 2px 0 0 6px; font: 600 27px/1.2 "Yu Mincho", Georgia, serif; letter-spacing: .34em; color: var(--paper); text-transform: uppercase; text-shadow: 0 2px 8px #000; }
.logo-kanji { position: absolute; left: 402px; top: -18px; font: 700 118px/1 "Yu Mincho", "MS Mincho", serif; color: rgba(214, 57, 30, .86); text-shadow: 0 4px 18px rgba(0,0,0,.65); transform: rotate(-6deg); }
.start {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); padding: 14px 38px; font-size: 21px; font-weight: 600; letter-spacing: .06em;
  background: rgba(7,12,24,.68); border-block: 1px solid rgba(255,166,77,.75); animation: pulse 2.2s ease-in-out infinite;
}
.start:hover { background: rgba(240,121,31,.9); }
.legal { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(232,238,240,.68); font-size: 13px; }

/* Menu principal */
#lobby { position: absolute; inset: 0; animation: fade .45s ease; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4,8,16,.35) 0, rgba(4,8,16,0) 42%, rgba(4,8,16,.82) 66%), linear-gradient(0deg, rgba(4,8,16,.78), rgba(4,8,16,0) 24%), linear-gradient(180deg, rgba(4,8,16,.7), rgba(4,8,16,0) 18%); }

.topbar { position: absolute; left: 24px; right: 24px; top: 18px; display: flex; justify-content: space-between; align-items: center; }
.profile { display: flex; gap: 12px; align-items: center; }
.profile strong { display: block; font-size: 18px; line-height: 1.15; }
.profile span { display: block; color: var(--muted); font-size: 13px; }
.avatar { display: grid; place-items: center; width: 58px; height: 58px; font: 400 32px Impact, sans-serif; color: #33160a; background: linear-gradient(150deg, var(--orange-light), var(--orange)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.xp { width: 190px; height: 7px; margin-top: 6px; background: rgba(255,255,255,.14); }
.xp i { display: block; height: 100%; background: var(--gold); }

.wallet { display: flex; gap: 10px; }
.coin { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; background: rgba(7,12,24,.74); border-bottom: 2px solid var(--line); }
.coin b { font-size: 18px; font-variant-numeric: tabular-nums; }
.coin span { color: var(--muted); font-size: 13px; }

.modes { position: absolute; right: 24px; top: 96px; width: 470px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode {
  position: relative; display: block; min-height: 118px; padding: 15px 16px; text-align: left; overflow: hidden;
  background: linear-gradient(145deg, var(--wood-light), var(--wood)); border-left: 3px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: transform .14s ease, filter .14s ease;
}
.mode:hover, .mode:focus-visible { transform: translateX(-4px); filter: brightness(1.2); }
.mode strong { display: block; font: 400 27px/1.1 Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .03em; }
.mode p { position: relative; margin: 7px 0 0; color: #c2d0d6; font-size: 14px; line-height: 1.32; }
.mode em { display: block; margin-top: 8px; color: var(--gold); font-size: 12.5px; font-style: normal; font-weight: 600; }
.mode .mark { position: absolute; right: 14px; bottom: -14px; font: 700 76px/1 "Yu Mincho", "MS Mincho", serif; color: rgba(255,255,255,.07); }
.mode.main { grid-column: 1 / -1; min-height: 196px; padding: 20px 22px; background: linear-gradient(135deg, #e8701a, #a93c0c 74%); border-left-color: #ffd27a; }
.mode.main strong { font-size: 49px; color: #fff4dc; }
.mode.main p { color: #ffeacd; max-width: 300px; font-size: 16px; }
.mode.main em { color: #fff; font-size: 14px; margin-top: 12px; }
.mode.main .mark { font-size: 148px; right: 18px; bottom: -22px; color: rgba(70,18,0,.36); }
.mode.locked strong { color: #b6c3c9; }

.dock { position: absolute; left: 24px; bottom: 18px; display: flex; gap: 8px; }
.dock button { width: 104px; padding: 11px 6px 10px; text-align: center; background: rgba(7,12,24,.82); border-top: 2px solid var(--line); font-size: 15px; font-weight: 600; transition: background .14s; }
.dock button:hover { background: var(--wood-light); border-top-color: var(--orange-light); }
.dock svg { display: block; margin: 0 auto 4px; width: 25px; height: 25px; fill: none; stroke: var(--orange-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.caption { position: absolute; left: 318px; top: 96px; padding: 10px 14px; max-width: 306px; background: rgba(234,223,194,.94); color: #2a2118; font-size: 15px; line-height: 1.34; clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 16px)); }

/* Paineis */
.panel { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; padding: 22px 34px 24px; background: linear-gradient(180deg, rgba(7,12,24,.97), rgba(11,18,30,.97)); animation: fade .18s ease; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px solid var(--orange); }
.panel-head h2 { margin: 0; font: 400 38px/1 Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .03em; }
.panel-head button { padding: 9px 22px; background: var(--wood-light); font-weight: 600; }
.panel-head button:hover { background: var(--orange); }
.panel-body { flex: 1; min-height: 0; overflow: auto; padding-top: 16px; }
.lead { margin: 0 0 14px; color: #c2d0d6; font-size: 16px; }

.story { display: grid; grid-template-columns: 300px 1fr; gap: 22px; height: 100%; }
.arcs { display: flex; flex-direction: column; gap: 7px; }
.arc { padding: 11px 14px; background: var(--wood); border-left: 3px solid var(--line); }
.arc.on { background: var(--wood-light); border-left-color: var(--orange); }
.arc strong { display: block; font-size: 16px; }
.arc span { color: var(--muted); font-size: 13px; }
.chapter { padding: 20px 22px; background: var(--wood); border-top: 3px solid var(--orange); }
.chapter small { color: var(--orange-light); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.chapter h3 { margin: 4px 0 8px; font: 400 34px/1.1 Impact, "Arial Narrow Bold", sans-serif; }
.chapter p { margin: 0 0 14px; color: #c9d5da; font-size: 16px; line-height: 1.42; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.columns h4 { margin: 0 0 7px; color: var(--gold); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.columns ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.6; }
.play { padding: 13px 36px; font: 400 25px Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .04em; background: linear-gradient(135deg, #f07a20, #b3440e); }
.play:hover { filter: brightness(1.18); }
.note { margin-left: 14px; color: var(--muted); font-size: 14px; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.tile { padding: 14px; background: var(--wood); border-top: 3px solid var(--line); }
.tile.on { border-top-color: var(--orange); background: var(--wood-light); }
.tile .face { display: grid; place-items: center; height: 86px; margin-bottom: 10px; font: 400 44px Impact, sans-serif; color: rgba(255,255,255,.3); background: var(--ink); }
.tile.on .face { color: #33160a; background: linear-gradient(150deg, var(--orange-light), var(--orange)); }
.tile strong { display: block; font-size: 16px; margin-bottom: 3px; }
.tile span { display: block; color: var(--muted); font-size: 14px; line-height: 1.34; }
.tile em { display: block; margin-top: 7px; color: var(--gold); font-size: 13px; font-style: normal; font-weight: 600; }

.settings { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.settings .action { align-self: flex-start; padding: 11px 24px; background: var(--wood-light); font-weight: 600; }
.settings .action:hover { background: var(--orange); }
.settings table { border-collapse: collapse; font-size: 16px; }
.settings td { padding: 7px 18px 7px 0; border-bottom: 1px solid var(--wood-light); }
.settings td:first-child { color: var(--gold); font-weight: 600; }

.toast { position: absolute; left: 50%; bottom: 96px; z-index: 9; transform: translate(-50%, 12px); padding: 11px 22px; background: var(--paper); color: #2a2118; font-size: 16px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes fade { from { opacity: 0; } }
@keyframes pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }