:root{
  --cream:#faf3e8;
  --paper:#f5ead8;
  --beige:#e8d8c0;
  --accent:#C059FF;
  --rose:#e8b0b8;
  --sage:#b8c8a8;
  --mint:#c8dcc0;
  --sky:#b8d0e8;
  --lavender:#c8b8e0;
  --sand:#e8d8b8;
  --butter:#f0e0a0;
  --brown-soft:#8060a0;
  --brown-dark:#5a407a;
  --ink:#40305a;
  --ink-soft:#60507a;
  --shadow:0 12px 40px rgba(90,64,122,.18);
  --shadow-soft:0 4px 16px rgba(90,64,122,.12);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{
  height:100%; overflow:hidden;
  background:var(--cream); color:var(--ink);
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  user-select:none;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
canvas{display:block; max-width:100%}

#screens{position:relative; width:100vw; height:100vh; overflow:hidden}

.screen{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
  transform:scale(1.02);
  overflow:hidden;
  background:var(--cream);
}
.screen.active{opacity:1; pointer-events:auto; transform:scale(1)}

.bg-anim{position:absolute; inset:0; z-index:0; overflow:hidden}
.bg-start{
  background:linear-gradient(160deg,#faf3e8 0%,#f0dfef 50%,#e4c0f5 100%);
}
.bg-start::before{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 30% 40%, rgba(194,89,255,.25), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(240,224,160,.35), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(200,184,224,.25), transparent 60%);
  animation:swirl 30s linear infinite;
}
.bg-lab{
  background:linear-gradient(160deg,#f5ead8 0%,#e8d8c0 100%);
}
.bg-lab::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 25%, rgba(184,208,232,.35), transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(200,184,224,.3), transparent 55%);
}
.bg-wardrobe{
  background:linear-gradient(160deg,#faf3e8 0%,#f0dfef 100%);
}
.bg-wardrobe::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 30%, rgba(194,89,255,.2), transparent 60%);
}
.bg-mission{
  background:linear-gradient(160deg,#f5ead8 0%,#e8d8c0 100%);
}
.bg-report{
  background:radial-gradient(circle at 50% 40%, #faf0dd 0%, #f0dfc0 70%);
  animation:pulseBg 5s ease-in-out infinite;
}
.bg-encyclo{
  background:linear-gradient(160deg,#f5ead8 0%,#e8dfd0 100%);
}
.bg-encyclo::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(200,184,224,.2), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(184,208,232,.2), transparent 55%);
}
.bg-final{
  background:linear-gradient(160deg,#faf3e8 0%,#f0dfef 40%,#e4c0f5 100%);
}
.bg-final::before{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 50% 30%, rgba(194,89,255,.3), transparent 55%),
    radial-gradient(circle at 20% 70%, rgba(240,224,160,.4), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(200,184,224,.3), transparent 55%);
  animation:swirl 40s linear infinite;
}

@keyframes swirl{to{transform:rotate(360deg)}}
@keyframes pulseBg{50%{filter:brightness(1.03)}}

.screen-content{
  position:relative; z-index:1;
  width:100%; height:100%;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:24px 20px 80px;
}
.screen-content.center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:24px 20px;
}

.logo-wrap{margin-bottom:4px; animation:floatY 3s ease-in-out infinite}
.logo-wrap canvas{filter:drop-shadow(0 12px 22px rgba(194,89,255,.4))}
@keyframes floatY{50%{transform:translateY(-10px)}}

.org-tag{
  font-size:11px; letter-spacing:5px; color:var(--accent);
  text-transform:uppercase; margin-bottom:6px; font-weight:700;
}
.game-title{
  font-size:56px; font-weight:900; letter-spacing:4px; color:var(--accent);
  text-shadow:0 3px 0 rgba(90,64,122,.2), 0 8px 26px rgba(194,89,255,.4);
  animation:titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow{
  0%,100%{text-shadow:0 3px 0 rgba(90,64,122,.2), 0 8px 26px rgba(194,89,255,.4)}
  50%{text-shadow:0 3px 0 rgba(90,64,122,.2), 0 8px 40px rgba(194,89,255,.7)}
}
.game-subtitle{
  font-size:14px; letter-spacing:8px; color:var(--ink-soft);
  font-weight:600; margin:0 0 22px; text-transform:uppercase;
}
.story-box{
  max-width:620px;
  background:rgba(255,255,255,.6);
  border:2px solid var(--beige);
  border-radius:18px; padding:16px 24px; margin:14px 0 26px;
  font-style:italic; color:var(--ink-soft);
  font-size:14.5px; line-height:1.7;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(6px);
}

.start-buttons{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}

.controls-hint{
  display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  margin-top:28px; font-size:13px; color:var(--ink-soft);
}
.controls-hint > div{display:flex; align-items:center; gap:4px}

kbd{
  background:var(--paper); border:1px solid var(--beige);
  border-radius:6px; padding:2px 8px;
  font-family:monospace; color:var(--ink); font-size:12px;
  box-shadow:0 1px 0 var(--beige);
}

.btn{
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg, #C059FF, #9b30eb);
  color:#fff;
  border:none; border-radius:14px;
  padding:12px 24px; transition:.2s;
  box-shadow:0 4px 0 #8520c9, 0 6px 20px rgba(194,89,255,.25);
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  text-shadow:0 1px 1px rgba(90,64,122,.25);
  touch-action:manipulation;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 #8520c9, 0 10px 24px rgba(194,89,255,.35);
}
.btn:active{transform:translateY(2px); box-shadow:0 2px 0 #8520c9}
.btn-primary{background:linear-gradient(135deg,#C059FF,#9b30eb)}
.btn-lg{font-size:16px; padding:15px 34px}
.btn-ghost{
  background:rgba(255,255,255,.6); color:var(--ink);
  border:2px solid var(--beige); box-shadow:none;
  text-shadow:none;
}
.btn-ghost:hover{background:#fff; box-shadow:var(--shadow-soft)}
.btn-icon{
  font-size:20px; padding:10px 15px;
  background:rgba(255,255,255,.75); color:var(--ink);
  border:2px solid var(--beige); box-shadow:0 3px 0 var(--beige);
  text-shadow:none;
}
.btn-icon:hover{background:#fff}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

.about-card{
  background:rgba(255,255,255,.92);
  border:3px solid var(--accent); border-radius:28px;
  max-width:560px; width:100%; padding:36px;
  box-shadow:0 24px 70px rgba(194,89,255,.35);
  animation:reportIn .7s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(10px);
}
.about-title{
  font-size:26px; font-weight:900; color:var(--accent);
  margin-bottom:28px; letter-spacing:1px;
}
.about-list{
  display:flex; flex-direction:column; gap:16px; margin-bottom:28px;
}
.about-item{
  display:flex; align-items:center; gap:16px;
  background:var(--paper);
  border:2px solid var(--beige); border-radius:16px;
  padding:16px 22px;
  transition:.2s;
}
.about-item:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}
.about-role{
  font-size:13px; font-weight:800; color:var(--accent);
  text-transform:uppercase; letter-spacing:1px;
  min-width:110px; text-align:left;
}
.about-name{
  font-size:16px; font-weight:700; color:var(--ink);
  text-align:left; flex:1;
}
.about-footer{
  font-size:14px; color:var(--ink-soft); line-height:1.7;
}
.about-footer small{
  font-size:12px; color:var(--ink-soft); opacity:.8;
}

@keyframes reportIn{
  from{opacity:0; transform:scale(.85) translateY(30px)}
  to{opacity:1; transform:scale(1) translateY(0)}
}

.screen-head{
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  flex-wrap:wrap; max-width:1200px; margin-left:auto; margin-right:auto;
  padding:12px 18px;
  background:rgba(255,255,255,.6);
  border-radius:16px;
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-soft);
}
.screen-head h2{color:var(--ink); font-size:22px; flex:1; min-width:200px; font-weight:800}

.reset-btn {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(194,89,255,.1) !important;
}
.reset-btn:hover {
  background: rgba(194,89,255,.2) !important;
}

.tabs{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; max-width:1200px; margin-left:auto; margin-right:auto}
.tab{
  padding:12px 22px; border-radius:14px;
  background:rgba(255,255,255,.6); border:2px solid var(--beige);
  color:var(--ink-soft); cursor:pointer; font-weight:700; font-size:14px;
  font-family:inherit; transition:.2s;
  touch-action:manipulation;
}
.tab:hover{color:var(--ink); border-color:var(--accent); transform:translateY(-2px)}
.tab.active{
  background:linear-gradient(135deg,#C059FF,#9b30eb); color:#fff;
  border-color:#9b30eb; text-shadow:0 1px 1px rgba(90,64,122,.25);
}
.tab-panel{display:none; max-width:1200px; margin:0 auto}
.tab-panel.active{display:block; animation:panelIn .4s ease-out}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)}}

.lab-intro{
  background:rgba(255,255,255,.65);
  border-left:5px solid var(--accent);
  padding:14px 18px; border-radius:12px;
  color:var(--ink-soft); font-size:14px; margin-bottom:22px; line-height:1.55;
  box-shadow:var(--shadow-soft);
}
.dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 4px}
.dot.natural{background:var(--sage)}
.dot.synthetic{background:var(--sky)}
.dot.hitech{background:var(--lavender)}

.layer-section{margin-bottom:30px}
.layer-section h3{
  color:var(--ink); font-size:16px; margin-bottom:14px;
  letter-spacing:.3px; font-weight:800;
}
.layer-section .dim{color:var(--ink-soft); font-weight:400; font-size:13px}

.grid-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}

.mat-card{
  background:rgba(255,255,255,.75);
  border:2px solid var(--beige); border-radius:16px;
  padding:16px; transition:.22s;
  box-shadow:var(--shadow-soft);
}
.mat-card:hover{border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow)}
.mat-card .type{
  font-size:10px; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:1.5px; font-weight:700;
}
.mat-card .ic{font-size:32px; margin:6px 0}
.mat-card .nm{font-weight:800; color:var(--ink); font-size:14.5px; margin:4px 0 6px}
.mat-card .desc{font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:12px; min-height:50px}
.mat-card .props{display:flex; flex-wrap:wrap; gap:6px}
.mat-card .prop{
  font-size:11px; background:var(--paper); border:1px solid var(--beige);
  border-radius:7px; padding:3px 9px; color:var(--ink-soft); font-weight:600;
}
.mat-card .prop b{color:var(--ink)}
.mat-card.natural{border-left:5px solid var(--sage)}
.mat-card.synthetic{border-left:5px solid var(--sky)}
.mat-card.hitech{border-left:5px solid var(--lavender)}
.mat-card.film{border-left:5px solid var(--rose)}

.mg-wrap{text-align:center; padding:0 12px}
.mg-wrap h3{color:var(--ink); margin-bottom:12px; font-size:18px}
.mg-intro{max-width:620px; margin:0 auto 18px; color:var(--ink-soft); font-size:14px; line-height:1.6}
#mgCanvas{
  display:block; margin:0 auto; width:100%; max-width:720px;
  border-radius:18px; border:2px solid var(--beige);
  background:#f5e8d8; box-shadow:var(--shadow);
}
.mg-controls{max-width:480px; margin:18px auto}
.mg-controls label{color:var(--ink-soft); font-size:14px; display:block; margin-bottom:8px; font-weight:600}
.mg-controls b{color:var(--accent); font-size:17px}
input[type=range]{
  width:100%; accent-color:var(--accent); height:10px;
  background:var(--paper); border-radius:10px;
  -webkit-appearance:none; appearance:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,#C059FF,#9b30eb);
  cursor:pointer; box-shadow:0 2px 6px rgba(194,89,255,.5);
}
.mg-counters{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:16px}
.mg-counter{
  background:rgba(255,255,255,.75); border:2px solid var(--beige);
  border-radius:14px; padding:12px 18px; font-size:12px;
  color:var(--ink-soft); text-align:center; min-width:120px;
  font-weight:600;
}
.mg-counter b{display:block; color:var(--accent); font-size:20px; margin-top:4px}
.mg-verdict{
  margin-top:16px; padding:14px; border-radius:14px; font-weight:700;
  display:none; font-size:14.5px; text-align:center;
}
.mg-verdict.show{display:block; animation:panelIn .35s}
.mg-verdict.win{background:#dff0d0; color:#5a8030; border:2px solid var(--sage)}
.mg-verdict.lose{background:#fbe0e0; color:#b06060; border:2px solid var(--rose)}

#screen-world{background:#f0e8d8}
#game{width:100%; height:100%; position:absolute; inset:0}

.hud{
  position:absolute; top:14px; left:14px; right:14px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; z-index:10;
  pointer-events:none;
}
.hud-panel, .badge, .hud-buttons, .hud-bars{pointer-events:auto}

.hud-panel{
  background:rgba(255,255,255,.85); border:2px solid var(--beige);
  border-radius:16px; padding:10px 18px;
  backdrop-filter:blur(10px); box-shadow:var(--shadow-soft);
}
.zone-name{font-weight:800; font-size:15px; color:var(--ink); letter-spacing:.3px}
.zone-meta{font-size:12px; color:var(--ink-soft); margin-top:3px}

.badge{
  background:linear-gradient(135deg,#fff5e0,#f5e0c0);
  border:2px solid var(--beige); border-radius:16px;
  padding:11px 18px; font-size:13px; color:var(--ink); font-weight:700;
  box-shadow:var(--shadow-soft);
}
.hud-buttons{display:flex; gap:8px}

.hud-bars{display:flex; gap:12px; margin-left:auto}
.bar-wrap{width:180px}
.bar-label{
  font-size:11px; color:var(--ink-soft); display:flex;
  justify-content:space-between; margin-bottom:4px; font-weight:700;
}
.bar{
  height:16px; background:var(--paper);
  border:2px solid var(--beige); border-radius:10px;
  overflow:hidden; position:relative;
}
.bar i{
  display:block; height:100%; width:100%;
  transition:width .2s linear; position:relative;
  border-radius:8px;
}
.bar.warm i{background:linear-gradient(90deg,#e8b0b8,#f0cba8,#c8dca8)}
.bar.dry  i{background:linear-gradient(90deg,#f0d0a8,#b8d0e8,#c8dca8)}

.controls-bar{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.85); border:2px solid var(--beige);
  border-radius:14px; padding:10px 22px;
  display:flex; gap:16px; font-size:13px; color:var(--ink-soft);
  z-index:10; backdrop-filter:blur(8px); flex-wrap:wrap; justify-content:center;
  box-shadow:var(--shadow-soft); font-weight:600;
}

.prompt{
  position:absolute; bottom:96px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,#e4c0f5,#C059FF); color:#fff;
  font-weight:800; padding:12px 24px; border-radius:22px;
  font-size:14px; z-index:15;
  animation:bobY 1.4s ease-in-out infinite;
  box-shadow:0 8px 24px rgba(194,89,255,.4);
  display:none; border:2px solid #ab3fe6;
}
.prompt.show{display:block}
@keyframes bobY{50%{transform:translateX(-50%) translateY(-8px)}}

.dialogue{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  width:min(760px,92vw); z-index:20;
  background:rgba(255,255,255,.95);
  border:3px solid var(--accent); border-radius:20px;
  padding:20px 24px;
  box-shadow:0 22px 60px rgba(194,89,255,.35);
  display:none;
  backdrop-filter:blur(10px);
}
.dialogue.show{display:block; animation:dialogueIn .4s ease-out}
@keyframes dialogueIn{
  from{opacity:0; transform:translateX(-50%) translateY(24px)}
  to{opacity:1; transform:translateX(-50%) translateY(0)}
}
.dlg-head{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.dlg-ava{
  font-size:44px; background:var(--paper);
  border:2px solid var(--beige); border-radius:16px;
  padding:6px 14px;
}
.dlg-name{font-weight:800; color:var(--ink); font-size:17px}
.dlg-role{font-size:12px; color:var(--ink-soft); margin-top:2px; font-weight:600}
.dlg-text{
  font-size:15px; line-height:1.65; color:var(--ink-soft);
  font-style:italic; min-height:60px; margin-bottom:16px;
}
.dlg-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.w-task{color:var(--ink-soft); font-size:13px; font-style:italic; flex:1; min-width:200px}
.w-layout{
  display:grid; grid-template-columns:280px 1fr; gap:24px;
  max-width:1200px; margin:0 auto;
}

.w-preview{
  background:rgba(255,255,255,.8);
  border:2px solid var(--beige); border-radius:20px;
  padding:18px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  position:sticky; top:20px; align-self:start;
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
}
.w-who{font-size:14px; color:var(--ink); font-weight:800; text-align:center}
.w-who small{color:var(--ink-soft); font-weight:500; display:block; margin-top:3px}
#previewCanvas{display:block; background:transparent; border-radius:12px; max-width:100%; height:auto}
.hint-box{
  background:rgba(194,89,255,.15); border:2px solid var(--lavender);
  border-radius:12px; padding:10px 14px;
  font-size:12px; color:var(--ink-soft); text-align:center;
  line-height:1.5; width:100%; font-weight:600;
}

.editor-block{
  background:rgba(255,255,255,.75);
  border:2px solid var(--beige); border-radius:16px;
  padding:16px; margin-bottom:16px;
  box-shadow:var(--shadow-soft);
}
.editor-block h4{
  color:var(--ink); font-size:13px; letter-spacing:.5px;
  text-transform:uppercase; margin-bottom:14px; font-weight:800;
}
.color-row, .pattern-row{display:flex; gap:10px; flex-wrap:wrap}
.color-swatch{
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:3px solid transparent; transition:.2s;
  box-shadow:inset 0 -4px 0 rgba(90,64,122,.15), 0 2px 6px rgba(90,64,122,.15);
  touch-action:manipulation;
}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.sel{
  border-color:#fff; transform:scale(1.18);
  box-shadow:0 0 0 3px var(--accent), inset 0 -4px 0 rgba(90,64,122,.15);
}
.pattern-btn{
  background:rgba(255,255,255,.7); border:2px solid var(--beige);
  border-radius:12px; padding:10px 16px; cursor:pointer;
  color:var(--ink-soft); font-family:inherit; font-size:12.5px;
  transition:.18s; display:flex; align-items:center; gap:8px;
  font-weight:700; touch-action:manipulation;
}
.pattern-btn:hover{
  border-color:var(--accent); color:var(--ink);
  transform:translateY(-2px);
  background:#fff;
}
.pattern-btn.sel{
  border-color:var(--accent);
  background:linear-gradient(135deg,#e4c0f5,#c890e8);
  color:var(--ink); transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(194,89,255,.25);
}
.pattern-btn .icon{font-size:16px}

.layer-block{margin-bottom:20px}
.layer-title{
  font-size:13px; color:var(--ink); font-weight:800;
  margin-bottom:12px; letter-spacing:.3px; text-transform:uppercase;
  background:rgba(255,255,255,.6);
  border-radius:10px; padding:8px 14px;
  display:inline-block;
}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px}
.card{
  background:rgba(255,255,255,.75);
  border:2px solid var(--beige); border-radius:14px;
  padding:12px; cursor:pointer; transition:.2s;
  box-shadow:var(--shadow-soft);
  touch-action:manipulation;
}
.card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow)}
.card.sel{
  border-color:var(--accent);
  background:linear-gradient(135deg, rgba(194,89,255,.2), rgba(200,184,224,.35));
  box-shadow:0 0 0 3px rgba(194,89,255,.3), var(--shadow-soft);
  transform:translateY(-2px);
}
.card .ic{font-size:26px; display:block; margin-bottom:6px}
.card .nm{font-weight:800; font-size:12.5px; color:var(--ink)}
.card .desc{font-size:10.5px; color:var(--ink-soft); margin-top:5px; line-height:1.4; min-height:28px}
.card .stat{font-size:10px; color:var(--ink-soft); margin-top:8px; display:flex; gap:4px; flex-wrap:wrap; font-weight:600}
.card .stat b{color:var(--accent)}

.w-actions{text-align:center; margin-top:28px}

.mission-title{color:var(--ink); font-size:22px; margin-bottom:6px; font-weight:800}
.mission-sub{color:var(--ink-soft); font-size:13px; margin-bottom:20px; font-weight:600}
.mission-canvas-wrap{
  position:relative; border-radius:20px; overflow:hidden;
  border:3px solid var(--beige); box-shadow:var(--shadow);
  max-width:960px; width:100%; margin:0 auto 20px;
}
.mission-canvas-wrap canvas{display:block; width:100%; height:auto}
.mission-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 55%, rgba(200,184,224,.55) 100%);
  animation:vignettePulse 3s ease-in-out infinite;
}
@keyframes vignettePulse{50%{opacity:.75}}
.mission-bars{
  display:flex; gap:16px; flex-wrap:wrap;
  max-width:960px; width:100%; margin:0 auto;
}
.mission-bars .bar-wrap{flex:1; min-width:200px; width:auto}

.report-card{
  background:rgba(255,255,255,.92);
  border:3px solid var(--accent); border-radius:28px;
  max-width:660px; width:100%; padding:32px;
  box-shadow:0 24px 70px rgba(194,89,255,.35);
  animation:reportIn .7s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(10px);
}
@keyframes reportIn{
  from{opacity:0; transform:scale(.85) translateY(30px)}
  to{opacity:1; transform:scale(1) translateY(0)}
}
.report-label{font-size:12px; letter-spacing:4px; color:var(--ink-soft); text-transform:uppercase; font-weight:700}
.report-stars{font-size:56px; letter-spacing:10px; margin:14px 0; animation:starsIn .9s ease-out}
@keyframes starsIn{from{opacity:0; letter-spacing:30px} to{opacity:1; letter-spacing:10px}}
.report-comfort{
  font-size:72px; font-weight:900; color:var(--accent); line-height:1;
  text-shadow:0 4px 22px rgba(194,89,255,.5);
}
.report-comfort-label{color:var(--ink-soft); font-size:13px; margin:8px 0 24px; font-weight:700}
.report-table{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:20px}
.report-table td{
  padding:10px 14px; border-bottom:1px solid var(--beige);
  text-align:left; color:var(--ink-soft); font-weight:600;
}
.report-table td b{color:var(--ink); font-weight:800}
.report-table tr:last-child td{border-bottom:none; padding-top:16px}
.r-tip{
  padding:12px 16px; border-radius:12px; margin-bottom:10px;
  font-size:13.5px; line-height:1.5; border-left:5px solid;
  text-align:left; font-weight:600;
}
.r-tip.good{background:#e8f0d8; border-color:var(--sage); color:#5a7038}
.r-tip.bad{background:#fbe0e0; border-color:var(--rose); color:#a05858}
.report-artifact{
  margin:18px 0; padding:16px; border-radius:16px;
  background:linear-gradient(135deg, rgba(194,89,255,.2), rgba(200,184,224,.3));
  border:2px solid var(--accent);
  font-size:15px; color:var(--ink); font-weight:800;
  animation:artifactPop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes artifactPop{from{opacity:0; transform:scale(.8)} to{opacity:1; transform:scale(1)}}

.encyclo-subtitle{
  color:var(--ink); font-size:16px; margin:0 0 16px;
  letter-spacing:.3px; max-width:1200px; margin-left:auto; margin-right:auto;
  font-weight:800;
}
.art-grid, .legend-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px; margin-bottom:28px; max-width:1200px; margin-left:auto; margin-right:auto;
}
.art-card{
  background:rgba(255,255,255,.7);
  border:2px solid var(--beige); border-radius:18px;
  padding:20px; text-align:center; transition:.25s;
  box-shadow:var(--shadow-soft);
}
.art-card.unlocked{
  background:linear-gradient(160deg, rgba(194,89,255,.25), rgba(200,184,224,.4));
  border-color:var(--accent);
  animation:cardGlow 3s ease-in-out infinite;
}
@keyframes cardGlow{50%{box-shadow:0 0 34px rgba(194,89,255,.5), var(--shadow-soft)}}
.art-card .e{font-size:40px}
.art-card h4{margin:10px 0 4px; font-size:14px; color:var(--ink); font-weight:800}
.art-card.unlocked h4{color:var(--accent)}
.art-card .from{font-size:11.5px; color:var(--ink-soft); font-weight:600}
.art-card.locked{opacity:.55; filter:grayscale(.6)}

.legend-card{
  background:rgba(255,255,255,.75);
  border:2px solid var(--beige); border-radius:18px;
  padding:18px; position:relative; transition:.25s;
  box-shadow:var(--shadow-soft);
}
.legend-card.unlocked{
  border-color:var(--lavender);
  background:linear-gradient(160deg, rgba(200,184,224,.35), rgba(255,255,255,.8));
}
.legend-card.unlocked::after{
  content:"✨"; position:absolute; top:10px; right:14px; font-size:18px;
  animation:twinkle 2s ease-in-out infinite;
}
@keyframes twinkle{50%{transform:scale(1.35) rotate(18deg); opacity:.7}}
.legend-card.locked{opacity:.55; filter:grayscale(.6)}
.legend-card .ic{font-size:36px}
.legend-card .nm{font-weight:800; color:var(--ink); font-size:15px; margin:8px 0 4px}
.legend-card .need{font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; font-weight:600}
.legend-card .desc{font-size:12px; color:var(--ink-soft); line-height:1.55; margin-bottom:12px}
.legend-card .props{display:flex; flex-wrap:wrap; gap:5px}
.legend-card .prop{
  font-size:11px; background:var(--paper); border:1px solid var(--beige);
  border-radius:7px; padding:3px 9px; color:var(--ink-soft); font-weight:600;
}
.legend-card .prop b{color:var(--accent)}

.final-card{
  background:rgba(255,255,255,.94);
  border:3px solid var(--accent); border-radius:28px;
  max-width:760px; width:100%; padding:32px;
  box-shadow:0 24px 70px rgba(194,89,255,.4);
  animation:reportIn .8s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(10px);
}
.final-flag{
  font-size:64px; line-height:1;
  animation:flagWave 2s ease-in-out infinite;
}
@keyframes flagWave{
  0%,100%{transform:rotate(-6deg) scale(1)}
  50%{transform:rotate(6deg) scale(1.08)}
}
.final-label{
  font-size:14px; letter-spacing:8px; color:var(--accent);
  text-transform:uppercase; font-weight:900; margin-top:6px;
}
.final-title{
  font-size:26px; font-weight:900; color:var(--ink);
  margin:8px 0 24px;
}
.final-table{
  width:100%; border-collapse:collapse; font-size:14px;
  margin-bottom:22px;
  background:rgba(255,255,255,.5);
  border-radius:14px; overflow:hidden;
}
.final-table th{
  background:linear-gradient(135deg,#C059FF,#9b30eb);
  color:#fff; padding:12px 14px; text-align:left;
  font-weight:800; font-size:13px;
  text-shadow:0 1px 1px rgba(90,64,122,.25);
}
.final-table td{
  padding:11px 14px; border-bottom:1px solid var(--beige);
  color:var(--ink-soft); font-weight:600;
}
.final-table td b{color:var(--ink); font-weight:800}
.final-table tbody tr:last-child td{border-bottom:1px solid var(--beige)}
.final-table tfoot td{
  background:rgba(194,89,255,.1);
  font-weight:800; color:var(--ink);
  border-bottom:none; padding:14px;
}
.final-table tfoot .f-avg{ color:var(--accent); font-size:20px; }
.final-table tfoot .f-score{ color:var(--accent); font-size:16px; }
.final-table .f-row-fail td{ opacity:.6; }
.final-verdict{
  padding:22px 24px; border-radius:18px;
  font-size:20px; font-weight:900; text-align:center;
  margin-bottom:24px;
  animation:reportIn .9s cubic-bezier(.34,1.56,.64,1) .2s backwards;
}
.final-verdict.perfect{
  background:linear-gradient(135deg, rgba(194,89,255,.25), rgba(240,224,160,.4));
  border:3px solid var(--accent);
  color:var(--accent);
  text-shadow:0 2px 12px rgba(194,89,255,.4);
  animation:reportIn .9s cubic-bezier(.34,1.56,.64,1) .2s backwards,
            perfectGlow 2.5s ease-in-out infinite 1s;
}
@keyframes perfectGlow{
  50%{box-shadow:0 0 40px rgba(194,89,255,.6); transform:scale(1.02)}
}
.final-verdict.good{
  background:#e8f0d8; border:3px solid var(--sage); color:#5a7038;
}
.final-verdict.bad{
  background:#fbe0e0; border:3px solid var(--rose); color:#a05858;
}
.final-actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

#musicBtn {
  transition: all .2s;
}
#musicBtn:active {
  transform: scale(0.9);
}

.toast{
  position:fixed; top:30px; left:50%;
  transform:translateX(-50%) translateY(-100px);
  background:linear-gradient(135deg,#e4c0f5,#C059FF);
  color:#fff; font-weight:800; padding:16px 28px;
  border-radius:16px; z-index:200;
  box-shadow:0 15px 44px rgba(194,89,255,.5);
  font-size:14px; opacity:0;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none; max-width:90vw; text-align:center;
  border:2px solid #ab3fe6;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.hidden{display:none !important}
.dim{color:var(--ink-soft)}

@media (max-width: 1024px) {
  .game-title{ font-size:44px; letter-spacing:3px; }
  .game-subtitle{ font-size:12px; letter-spacing:6px; }
  .story-box{ font-size:13.5px; padding:14px 20px; }
  .w-layout{ grid-template-columns:240px 1fr; gap:18px; }
  .hud-bars .bar-wrap{ width:150px; }
  .controls-bar{ gap:12px; padding:8px 16px; font-size:12px; }
}

@media (max-width: 820px) {
  .screen-content{ padding:16px 12px 80px; }
  .game-title{ font-size:36px; letter-spacing:2px; }
  .game-subtitle{ font-size:11px; letter-spacing:4px; }
  .story-box{ font-size:13px; padding:12px 16px; margin:10px 0 18px; }
  .logo-wrap canvas{ width:160px; height:182px; }
  .controls-hint{ gap:12px; font-size:11px; }
  .start-buttons{ flex-direction:column; width:100%; max-width:300px; }
  .start-buttons .btn{ width:100%; }

  .screen-head{ padding:10px 14px; gap:10px; }
  .screen-head h2{ font-size:18px; min-width:auto; }
  .screen-head .btn{ font-size:12px; padding:8px 14px; }

  .w-layout{ grid-template-columns:1fr; gap:16px; }
  .w-preview{ position:static; flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .w-preview canvas{ max-height:200px; width:auto; }
  .w-who{ flex-basis:100%; }
  .hint-box{ flex-basis:100%; }

  .hud{ flex-direction:column; gap:8px; }
  .hud-panel{ padding:8px 14px; }
  .zone-name{ font-size:13px; }
  .zone-meta{ font-size:11px; }
  .badge{ padding:8px 14px; font-size:12px; }
  .hud-buttons{ position:absolute; top:0; right:0; }
  .hud-bars{ margin-left:0; width:100%; }
  .bar-wrap{ width:48%; }

  .controls-bar{ bottom:12px; padding:8px 12px; gap:8px; font-size:11px; }
  .prompt{ bottom:80px; font-size:12px; padding:10px 18px; }
  .dialogue{ bottom:12px; padding:16px; border-radius:16px; }
  .dlg-ava{ font-size:34px; padding:4px 10px; }
  .dlg-name{ font-size:15px; }
  .dlg-text{ font-size:13.5px; min-height:auto; }
  .dlg-actions .btn{ font-size:12px; padding:10px 18px; }

  .grid-cards{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .mat-card .desc{ min-height:auto; }
  .mg-counters{ gap:8px; }
  .mg-counter{ padding:8px 12px; min-width:90px; font-size:11px; }
  .mg-counter b{ font-size:16px; }

  .cards{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .card .desc{ min-height:auto; }

  .report-card{ padding:20px; border-radius:20px; }
  .report-comfort{ font-size:56px; }
  .report-stars{ font-size:40px; }
  .report-table{ font-size:12px; }
  .report-table td{ padding:8px 10px; }

  .about-card{ padding:24px; }
  .about-title{ font-size:20px; margin-bottom:20px; }
  .about-item{ flex-direction:column; align-items:flex-start; gap:6px; padding:14px 18px; }
  .about-role{ min-width:auto; }

  .art-grid, .legend-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
  .art-card .e{ font-size:30px; }
  .legend-card .ic{ font-size:28px; }

  .mission-bars{ flex-direction:column; }
  .mission-bars .bar-wrap{ min-width:auto; }

  .final-card{ padding:22px; border-radius:20px; }
  .final-flag{ font-size:48px; }
  .final-title{ font-size:20px; }
  .final-table{ font-size:12px; }
  .final-table th{ padding:9px 10px; font-size:11px; }
  .final-table td{ padding:8px 10px; }
  .final-verdict{ font-size:16px; padding:16px; }
  .final-actions{ flex-direction:column; }
  .final-actions .btn{ width:100%; }
}

@media (max-width: 480px) {
  .game-title{ font-size:28px; letter-spacing:1px; }
  .game-subtitle{ font-size:10px; letter-spacing:3px; }
  .logo-wrap canvas{ width:130px; height:148px; }
  .story-box{ font-size:12px; padding:10px 14px; }
  .controls-hint{ display:none; }
  .controls-bar{ display:none; }
  .prompt{ bottom:20px; }

  .hud-bars{ flex-direction:column; gap:6px; }
  .bar-wrap{ width:100%; }

  .grid-cards{ grid-template-columns:1fr 1fr; gap:8px; }
  .mat-card{ padding:10px; }
  .mat-card .ic{ font-size:24px; }
  .mat-card .nm{ font-size:12px; }
  .mat-card .desc{ font-size:10.5px; }

  .cards{ grid-template-columns:1fr 1fr; gap:8px; }
  .card{ padding:10px; }
  .card .ic{ font-size:22px; }
  .card .nm{ font-size:11px; }
  .card .desc{ font-size:9.5px; }

  .color-swatch{ width:30px; height:30px; }
  .pattern-btn{ padding:8px 12px; font-size:11px; }

  .report-card{ padding:16px; }
  .report-comfort{ font-size:44px; }
  .report-stars{ font-size:32px; letter-spacing:6px; }

  .about-card{ padding:18px; }
  .about-title{ font-size:18px; }
  .about-item{ padding:12px 14px; }
  .about-name{ font-size:14px; }

  .art-grid, .legend-grid{ grid-template-columns:1fr; }

  .final-card{ padding:16px; }
  .final-flag{ font-size:38px; }
  .final-label{ font-size:11px; letter-spacing:5px; }
  .final-title{ font-size:16px; }
  .final-table{ font-size:10.5px; }
  .final-table th, .final-table td{ padding:6px 8px; }
  .final-verdict{ font-size:14px; padding:12px; }
  .final-table tfoot .f-avg{ font-size:16px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .screen-content{ padding:10px 16px 60px; }
  .game-title{ font-size:32px; }
  .logo-wrap{ display:none; }
  .story-box{ display:none; }
  .controls-hint{ display:none; }
  .start-buttons{ flex-direction:row; }

  .hud{ flex-direction:row; }
  .hud-bars{ width:auto; margin-left:auto; }
  .bar-wrap{ width:120px; }

  .controls-bar{ display:none; }

  .report-card{ max-width:90vw; padding:16px; }
  .report-comfort{ font-size:40px; }
  .report-stars{ font-size:28px; }
}

@media (hover: none) {
  .btn:hover{ transform:none; box-shadow:0 4px 0 #8520c9, 0 6px 20px rgba(194,89,255,.25); }
  .card:hover{ transform:none; border-color:var(--beige); box-shadow:var(--shadow-soft); }
  .mat-card:hover{ transform:none; border-color:var(--beige); box-shadow:var(--shadow-soft); }
  .color-swatch:hover{ transform:none; }
  .pattern-btn:hover{ transform:none; }
}

@media (max-width: 820px) {
  input, button, select, textarea {
    font-size: 16px;
  }
  input[type=range]{
    height: 20px;
  }
  input[type=range]::-webkit-slider-thumb{
    width: 28px;
    height: 28px;
  }
}