
:root {
  --world-accent: #63e6ff;
  --world-accent-2: #a78bfa;
  --world-warn: #ffcf5a;
  --world-danger: #ff6b8a;
  --world-good: #5ee6a8;
  --world-ink: #ecf8ff;
  --world-muted: #a9bfd4;
  --world-panel: rgba(9, 20, 39, .88);
  --world-border: rgba(146, 195, 236, .2);
}
body.world-game-page { background: radial-gradient(circle at 50% 0%, rgba(65,105,225,.14), transparent 42%), #07101f; color: var(--world-ink); }
body.world-racer { --world-accent:#63e6ff; --world-accent-2:#ff70b7; }
body.world-castle { --world-accent:#ffd166; --world-accent-2:#9b7cff; }
body.world-ninja { --world-accent:#ff8d6b; --world-accent-2:#ff4f9a; }
body.world-space { --world-accent:#72f1b8; --world-accent-2:#6ca8ff; }
body.world-detective { --world-accent:#ffcc66; --world-accent-2:#85a7ff; }
body.world-restaurant { --world-accent:#ff9d76; --world-accent-2:#ffd166; }
body.world-rhythm { --world-accent:#c084fc; --world-accent-2:#2dd4bf; }
body.world-zombie { --world-accent:#9ee66b; --world-accent-2:#ffd166; }
.world-hero { padding: 3rem 0 1.4rem; }
.world-hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:1.25rem; align-items:stretch; }
.world-hero-copy,.world-control-panel,.world-stage-shell,.world-side-card,.world-story-card { border:1px solid var(--world-border); background:linear-gradient(155deg,rgba(16,34,61,.94),rgba(6,15,31,.94)); border-radius:24px; box-shadow:0 22px 60px rgba(0,0,0,.24); }
.world-hero-copy { padding:clamp(1.5rem,3vw,2.7rem); position:relative; overflow:hidden; }
.world-hero-copy::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-100px; top:-120px; background:radial-gradient(circle,var(--world-accent),transparent 65%); opacity:.17; }
.world-kicker { display:inline-flex; padding:.42rem .75rem; border-radius:999px; background:color-mix(in srgb,var(--world-accent) 18%,transparent); color:var(--world-accent); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem; }
.world-hero h1 { margin:.9rem 0 .65rem; font-size:clamp(2.1rem,5vw,4rem); line-height:1.02; }
.world-hero p { color:var(--world-muted); max-width:760px; font-size:1.04rem; }
.world-control-panel { padding:1.25rem; display:flex; flex-direction:column; justify-content:center; gap:.9rem; }
.world-control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.world-field label { display:block; font-size:.78rem; color:var(--world-muted); margin-bottom:.35rem; font-weight:700; }
.world-field select,.world-field input { width:100%; min-height:44px; border-radius:12px; border:1px solid var(--world-border); background:#0b1830; color:white; padding:.65rem .75rem; }
.world-actions { display:flex; flex-wrap:wrap; gap:.65rem; }
.world-main { padding:1rem 0 4rem; }
.world-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,320px); gap:1.15rem; align-items:start; }
.world-stage-shell { overflow:hidden; }
.world-topbar { display:flex; justify-content:space-between; gap:.65rem; align-items:center; flex-wrap:wrap; padding:.8rem 1rem; background:rgba(1,8,20,.72); border-bottom:1px solid var(--world-border); }
.world-pill { display:inline-flex; gap:.35rem; align-items:center; border:1px solid var(--world-border); background:rgba(13,31,57,.86); border-radius:999px; padding:.42rem .7rem; color:var(--world-muted); font-size:.82rem; }
.world-pill strong { color:white; }
.world-stage { position:relative; min-height:560px; background:#07101f; overflow:hidden; }
.world-canvas { display:block; width:100%; height:560px; }
.world-input-dock { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); width:min(760px,calc(100% - 30px)); padding:.85rem; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(5,13,29,.9); backdrop-filter:blur(12px); box-shadow:0 15px 35px rgba(0,0,0,.3); }
.world-target-row { display:flex; justify-content:space-between; gap:1rem; color:var(--world-muted); font-size:.82rem; margin-bottom:.5rem; }
.world-target-row strong { color:var(--world-accent); }
.world-type-input { width:100%; height:54px; border-radius:14px; border:2px solid color-mix(in srgb,var(--world-accent) 58%,#24405f); background:#071526; color:white; padding:0 1rem; font-size:1.15rem; outline:none; }
.world-type-input:focus { box-shadow:0 0 0 4px color-mix(in srgb,var(--world-accent) 18%,transparent); }
.world-type-input.good { animation:worldGood .28s ease; }
.world-type-input.bad { animation:worldBad .28s ease; }
@keyframes worldGood { 50%{border-color:var(--world-good);box-shadow:0 0 22px rgba(94,230,168,.4)} }
@keyframes worldBad { 20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)} }
.world-side { display:grid; gap:1rem; }
.world-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.world-stat { padding:.9rem; border-radius:16px; border:1px solid var(--world-border); background:var(--world-panel); }
.world-stat span { display:block; color:var(--world-muted); font-size:.78rem; }
.world-stat strong { display:block; margin-top:.15rem; font-size:1.45rem; }
.world-side-card { padding:1rem; }
.world-side-card h3 { margin:.1rem 0 .65rem; }
.world-side-card p,.world-side-card li { color:var(--world-muted); font-size:.92rem; }
.world-side-card ul,.world-side-card ol { margin:.55rem 0 0; padding-left:1.2rem; }
.world-meter { height:12px; background:#071224; border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.08); margin:.4rem 0 .9rem; }
.world-meter span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--world-accent),var(--world-accent-2)); transition:width .2s ease; }
.world-meter.danger span { background:linear-gradient(90deg,#ffd166,var(--world-danger)); }
.world-overlay { position:absolute; inset:0; display:none; place-items:center; padding:1.2rem; background:rgba(2,8,19,.78); backdrop-filter:blur(8px); z-index:12; }
.world-overlay.open { display:grid; }
.world-result-card { width:min(520px,100%); text-align:center; border:1px solid var(--world-border); background:#0b1930; border-radius:24px; padding:1.5rem; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.world-result-icon { font-size:3.4rem; display:block; }
.world-result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:1rem 0; }
.world-result-stats div { background:#071224; border-radius:14px; padding:.75rem .4rem; }
.world-result-stats strong,.world-result-stats span { display:block; }
.world-result-stats span { color:var(--world-muted); font-size:.75rem; }
.world-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.world-game-card { position:relative; overflow:hidden; min-height:330px; padding:1.25rem; border-radius:22px; border:1px solid var(--world-border); background:linear-gradient(155deg,rgba(21,42,73,.94),rgba(7,17,34,.96)); color:white; text-decoration:none; display:flex; flex-direction:column; }
.world-game-card::after { content:""; position:absolute; width:190px;height:190px;border-radius:50%;right:-70px;top:-70px;background:radial-gradient(circle,var(--card-accent,var(--world-accent)),transparent 68%);opacity:.19; }
.world-card-icon { font-size:3rem; margin-bottom:1rem; }
.world-game-card h3 { font-size:1.35rem; margin:.2rem 0 .45rem; }
.world-game-card p { color:var(--world-muted); flex:1; }
.world-game-card .btn { align-self:flex-start; }
.world-mini-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:.75rem 0 1rem; }
.world-mini-tags span { font-size:.72rem; padding:.3rem .55rem; border-radius:999px; background:rgba(255,255,255,.08); color:#dcecff; }
.world-story-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px); gap:1rem; }
.world-story-card { padding:1.25rem; }
.world-statement { min-height:150px; display:grid; place-items:center; text-align:center; padding:1.2rem; margin:1rem 0; border-radius:18px; border:1px dashed color-mix(in srgb,var(--world-accent) 55%,transparent); background:rgba(0,0,0,.16); font-size:1.16rem; line-height:1.65; }
.world-clue-list { display:grid; gap:.55rem; }
.world-clue { padding:.75rem; border-radius:14px; background:#071224; border-left:4px solid var(--world-accent); color:var(--world-muted); }
.world-clue.revealed { color:white; }
.world-suspects { display:grid; gap:.65rem; }
.world-suspect { text-align:left; padding:.8rem; border:1px solid var(--world-border); border-radius:14px; background:#0b1830; color:white; cursor:pointer; }
.world-suspect:hover,.world-suspect:focus-visible { border-color:var(--world-accent); }
.world-live-banner { position:absolute; top:16px; left:50%; transform:translateX(-50%); background:rgba(5,13,29,.82); border:1px solid var(--world-border); border-radius:999px; padding:.5rem .85rem; z-index:5; color:var(--world-muted); }
.world-live-banner strong { color:var(--world-accent); }
@media (max-width:1000px){.world-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.world-layout,.world-story-layout{grid-template-columns:1fr}.world-side{grid-template-columns:repeat(2,minmax(0,1fr))}.world-stats{grid-column:1/-1}.world-hero-grid{grid-template-columns:1fr}}
@media (max-width:650px){.world-card-grid{grid-template-columns:1fr}.world-control-grid{grid-template-columns:1fr}.world-stage{min-height:500px}.world-canvas{height:500px}.world-side{grid-template-columns:1fr}.world-result-stats{grid-template-columns:1fr 1fr}.world-result-stats div:last-child{grid-column:1/-1}.world-input-dock{bottom:10px}.world-hero{padding-top:1.4rem}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.world-type-input.good,.world-type-input.bad{animation:none!important}}
