body[data-theme="quarantine"]{--theme-bg:#172633;--theme-deep:#02070c;--theme-panel:#0b151f;--theme-line:#397887;--theme-accent:#ff4650;--theme-text:#e7f5f6}
body[data-theme="hospital"]{--theme-bg:#17302d;--theme-deep:#020a09;--theme-panel:#0d1c19;--theme-line:#3d8272;--theme-accent:#ff5966;--theme-text:#e7faf4}
body[data-theme="laboratory"]{--theme-bg:#102b38;--theme-deep:#02080d;--theme-panel:#0b1a22;--theme-line:#347b91;--theme-accent:#62e6ff;--theme-text:#e5f8fc}
body[data-theme="school"]{--theme-bg:#30271f;--theme-deep:#0b0705;--theme-panel:#201913;--theme-line:#765a3b;--theme-accent:#ff554a;--theme-text:#f6eada}
body[data-theme="city"]{--theme-bg:#202538;--theme-deep:#03050b;--theme-panel:#121725;--theme-line:#4b587b;--theme-accent:#ff435b;--theme-text:#e9edfa}
body[data-theme="bunker"]{--theme-bg:#281b18;--theme-deep:#050302;--theme-panel:#1b1210;--theme-line:#694338;--theme-accent:#ff4938;--theme-text:#f7e8df}

body.concept-theme{background:radial-gradient(circle at 50% 12%,var(--theme-bg),var(--theme-deep) 78%);color:var(--theme-text)}
.concept-theme #gameShell{width:min(100%,1180px);display:grid;grid-template-columns:minmax(0,960px) 200px;gap:12px}
.concept-theme header{grid-column:1/-1;padding:8px 12px;border:2px solid var(--theme-line);border-radius:16px;background:var(--theme-panel);box-shadow:0 8px 24px #0004,inset 0 1px #fff}
.concept-theme header strong{color:var(--theme-accent);text-shadow:0 0 10px var(--theme-line)}
.concept-theme .label{color:var(--theme-text);opacity:.7}.concept-theme .title{color:var(--theme-text)}.concept-theme .title small{color:var(--theme-accent)}
.concept-theme .status{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-self:stretch;gap:10px;padding:0}
.concept-theme .status>div{flex:1;min-height:78px;padding:13px 11px;border:2px solid var(--theme-line);border-radius:14px;background:var(--theme-panel);box-shadow:inset 0 1px #fff,0 6px 18px #0003}
.concept-theme #hearts::before,.concept-theme .xp::before,.concept-theme #combo::before{display:block;margin-bottom:9px;color:var(--theme-accent);font-size:10px;font-weight:900;letter-spacing:1.5px}
.concept-theme #hearts::before{content:"LIFE"}.concept-theme #combo::before{content:"MISSION"}
.concept-theme .xp{height:auto;overflow:visible;clip-path:none;position:relative}.concept-theme .xp::before{content:"ENERGY"}
.concept-theme .xp span{position:absolute;left:11px;right:11px;bottom:15px;width:auto!important;height:11px;border-radius:8px;background:linear-gradient(90deg,var(--theme-line),var(--theme-accent));box-shadow:0 0 12px var(--theme-line)}
.concept-theme .xp b{top:auto;bottom:30px;line-height:18px;text-align:left;color:var(--theme-text)}
.concept-theme #combo{text-align:left;color:var(--theme-accent)}
.concept-theme #canvasWrap{grid-column:1;grid-row:2;border:5px solid var(--theme-line);border-radius:18px;background:var(--theme-deep);box-shadow:0 0 0 2px #fff8,0 16px 40px #0007,inset 0 0 36px #000}
.concept-theme #dpad,.concept-theme #skillButtons{grid-column:1/-1}
.concept-theme button{border-color:var(--theme-line);background:linear-gradient(#303767,#171d42);border-radius:11px;color:#fff}
.concept-theme button:hover{background:linear-gradient(#444d88,#252c5b);filter:none}
.concept-theme .panel{border:3px solid var(--theme-line);background:linear-gradient(145deg,#202754f7,#0d1230f7);color:#f8fbff;box-shadow:0 18px 45px #0009;clip-path:none;border-radius:22px}
.concept-theme .panel h1,.concept-theme .panel h2{color:#fff;text-shadow:0 0 16px var(--theme-line)}
.concept-theme .panel p,.concept-theme .panel .help,.concept-theme .editor-help{color:#d3dcf5}
.concept-theme .eyebrow{color:#ffd4ec}.concept-theme .card{border-color:var(--theme-line);background:linear-gradient(#2c356a,#151b3f)}
.concept-theme .card b{color:#fff}.concept-theme .card small{color:#dbe4ff;opacity:1}
.concept-theme .card.selected{border-color:#fff;background:linear-gradient(#4d5790,#252d64);box-shadow:0 0 24px var(--theme-line)}
.concept-theme .result-grid span{background:#0b1130;color:#b9c7eb}.concept-theme .result-grid b{color:#fff}
.concept-theme .theme-picker{color:#e9efff}.concept-theme .theme-picker select{background:#101632;color:#fff;border-color:var(--theme-line)}

@media(max-width:820px){
  .concept-theme #gameShell{display:block;width:min(100%,960px)}
  .concept-theme .status{display:grid;grid-template-columns:110px 1fr 120px;gap:7px;padding:8px 0}
  .concept-theme .status>div{min-height:54px;padding:8px}
  .concept-theme #hearts::before,.concept-theme .xp::before,.concept-theme #combo::before{margin-bottom:4px}
  .concept-theme .xp span{left:8px;right:8px;bottom:9px}.concept-theme .xp b{bottom:22px}
}
@media(max-width:560px){.concept-theme .status{grid-template-columns:85px 1fr 90px;gap:5px}.concept-theme .status>div{padding:6px}}

/* Compact top HUD: life icons plus an energy/level bar. */
.concept-theme #gameShell{display:block;width:min(100%,960px)}
.concept-theme .status{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px;padding:8px 2px}
.concept-theme .status #combo{display:none}
.concept-theme .status #hearts{display:flex;align-items:center;width:100%;height:30px;min-height:30px;padding:2px 8px;border:0;background:transparent;overflow:hidden;box-shadow:none}
.concept-theme .status #hearts::before{display:inline-block;margin:0 10px 0 0;color:#fff;font-size:9px;font-weight:900;letter-spacing:1.4px;content:"LIFE"}
.concept-theme .status #hearts .heart{font-size:17px;margin-right:5px}
.concept-theme .status .xp{display:block;width:100%;height:20px;min-height:20px;padding:0;border:1px solid #273b72;border-radius:3px;background:#080d29;overflow:hidden;clip-path:none;box-shadow:inset 0 1px #fff2}
.concept-theme .status .xp::before{position:absolute;z-index:2;left:8px;top:3px;margin:0;color:#fff;font-size:8px;line-height:12px;content:"ENERGY"}
.concept-theme .status .xp span{position:absolute;left:60px;right:45px;top:4px;bottom:auto;width:auto!important;height:10px;border-radius:0;background:linear-gradient(90deg,#9268f4,#60d9ff,#4ef2df);box-shadow:0 0 10px var(--theme-line);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease}
.concept-theme .status .xp b{position:absolute;z-index:2;left:auto;right:8px;top:1px;bottom:auto;width:auto;color:#fff;font-size:9px;line-height:16px;text-shadow:0 1px 3px #000}
.concept-theme #canvasWrap{display:block;width:100%;grid-column:auto;grid-row:auto}

@media(max-width:560px){
  .concept-theme .status{grid-template-columns:105px 1fr;gap:5px}
  .concept-theme .status #hearts::before{display:none}
  .concept-theme .status #hearts{padding-left:2px}
  .concept-theme .status #hearts .heart{font-size:14px;margin-right:3px}
  .concept-theme .status .xp::before{display:none}
  .concept-theme .status .xp span{left:6px}
}

/* Mobile landscape: centered maze, full-width HUD, balanced control gutters. */
@media (pointer:coarse) and (orientation:landscape),(orientation:landscape) and (max-height:600px){
  body.concept-theme #gameShell{
    display:grid;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    grid-template-columns:minmax(0,1fr) var(--mobile-maze) minmax(0,1fr);
    grid-template-rows:40px 24px minmax(0,1fr);
    gap:0;
  }
  body.concept-theme header{
    grid-column:1/4;
    grid-row:1;
    min-width:0;
    min-height:40px;
    height:40px;
    padding:3px 8px;
    border-width:1px;
    border-radius:0;
  }
  body.concept-theme .status{
    grid-column:1/4;
    grid-row:2;
    display:grid;
    min-width:0;
    min-height:24px;
    height:24px;
    grid-template-columns:minmax(110px,.75fr) minmax(180px,2fr) minmax(80px,.75fr);
    align-items:center;
    align-self:stretch;
    gap:7px;
    padding:2px 8px;
    border-bottom:1px solid var(--theme-line);
    background:color-mix(in srgb,var(--theme-panel) 86%,#020617);
    overflow:hidden;
  }
  body.concept-theme .status>div{min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  body.concept-theme .status #hearts{
    width:100%;
    height:20px;
    min-height:20px;
    padding:0;
  }
  body.concept-theme .status #hearts::before{margin-right:5px;font-size:7px}
  body.concept-theme .status #hearts .heart{margin-right:2px;font-size:13px}
  body.concept-theme .status .xp{width:100%;height:17px;min-height:17px}
  body.concept-theme .status #combo{display:block;text-align:right}
  body.concept-theme #canvasWrap{
    display:block;
    grid-column:2;
    grid-row:3;
    align-self:start;
    justify-self:center;
    width:var(--mobile-maze);
    height:var(--mobile-game-h);
    border-width:2px;
    border-radius:0;
  }
}

/* Keep LIFE visible inside the compact mobile HUD. */
@media (pointer:coarse) and (orientation:portrait),(orientation:portrait) and (max-width:600px){
  body.concept-theme header{grid-template-columns:minmax(96px,1.05fr) minmax(130px,1.8fr) minmax(92px,1fr)}
  body.concept-theme header .hud-stage{display:grid;min-width:0;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:4px;row-gap:1px}
  body.concept-theme header .hud-stage>.label{display:none}
  body.concept-theme header .hud-stage>strong{grid-column:1;grid-row:1;line-height:1}
  body.concept-theme header .hud-stage-status{grid-column:2;grid-row:1;min-width:0;margin:0}
  body.concept-theme header .hud-life{display:flex!important;visibility:visible;grid-column:1/3;grid-row:2;min-width:0;min-height:14px;margin:0;gap:3px;align-items:center;line-height:1}
  body.concept-theme header .hud-life>span{display:inline-block;flex:0 0 auto;font-size:6px}
  body.concept-theme header .hud-life #hearts{display:flex;min-width:0;min-height:13px;align-items:center;overflow:visible}
}

@media (pointer:coarse) and (orientation:landscape),(orientation:landscape) and (max-height:600px){
  body.concept-theme header .hud-stage{display:grid;min-width:0;grid-template-columns:auto minmax(0,1fr);grid-template-rows:17px 15px;align-items:center;column-gap:4px;row-gap:0}
  body.concept-theme header .hud-stage>.label{display:none}
  body.concept-theme header .hud-stage>strong{grid-column:1;grid-row:1;line-height:16px}
  body.concept-theme header .hud-stage-status{grid-column:2;grid-row:1;min-width:0;margin:0}
  body.concept-theme header .hud-life{display:flex!important;visibility:visible;grid-column:1/3;grid-row:2;min-width:0;min-height:15px;margin:0;gap:3px;align-items:center;line-height:1}
  body.concept-theme header .hud-life>span{display:inline-block;flex:0 0 auto;font-size:6px}
  body.concept-theme header .hud-life #hearts{display:flex;min-width:0;min-height:13px;align-items:center;overflow:visible}
}

/* LIFE and ENERGY are integrated into one compact top HUD. */
.concept-theme header{
  min-height:66px;
  padding:5px 10px;
}
.concept-theme .hud-life #hearts,
.concept-theme .hud-energy .xp{
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.concept-theme .hud-life #hearts::before,
.concept-theme .hud-energy .xp::before,
.concept-theme #combo::before{display:none;content:none}
.concept-theme .hud-life #hearts{display:flex;height:auto;overflow:visible}
.concept-theme .hud-energy .xp{
  display:block;
  position:relative;
  width:100%;
  height:13px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--theme-line) 60%,#1c2747);
  border-radius:4px;
  background:#070c21;
  clip-path:none;
}
.concept-theme .hud-energy .xp span{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%;
  border-radius:0;
  background:linear-gradient(90deg,#ff4ea5,#8c65ff,var(--theme-accent));
  box-shadow:0 0 10px var(--theme-line);
  transform:scaleX(0);
  transform-origin:left center;
}
.concept-theme .hud-energy .xp b{
  position:absolute;
  inset:0;
  width:auto;
  color:#fff;
  font-size:8px;
  line-height:11px;
  text-align:center;
}
.concept-theme .hud-energy #level{color:var(--theme-text)}
.concept-theme .score-block #combo{color:var(--theme-accent);text-align:right}
.concept-theme #canvasWrap{margin-top:4px}

@media(max-width:560px){
  .concept-theme header{min-height:56px;padding:3px 5px}
  .concept-theme .hud-energy .xp{height:11px}
  .concept-theme .hud-energy .xp b{font-size:6px;line-height:9px}
}

@media (pointer:coarse) and (orientation:landscape),(orientation:landscape) and (max-height:600px){
  body.concept-theme #gameShell{
    grid-template-rows:48px minmax(0,1fr);
  }
  body.concept-theme header{
    grid-column:1/4;
    grid-row:1;
    min-height:48px;
    height:48px;
  }
  body.concept-theme #canvasWrap{
    grid-column:2;
    grid-row:2;
  }
}