.twh-game-shell,
.twh-game-shell * { box-sizing: border-box; }
.twh-game-shell button,
.twh-game-shell select { font: inherit; }
.twh-game-shell button { -webkit-tap-highlight-color: transparent; }
.twh-game-shell {
  --navy-950: #07121e;
  --navy-900: #0b1927;
  --navy-800: #10263a;
  --navy-700: #183a56;
  --blue: #178be0;
  --blue-deep: #07538f;
  --gold: #ffc83d;
  --green: #51c93d;
  --cream: #fff4da;
  position: relative;
  isolation: isolate;
  width: min(1120px, 100%);
  margin: 18px auto;
  overflow: hidden;
  color: #fff;
  border: 2px solid #274968;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(5,14,24,.04), rgba(5,14,24,.62)),
    var(--twh-ui-warehouse-bg, url("../images/ui/warehouse-bg.svg")) center/cover no-repeat,
    #081725;
  box-shadow: 0 30px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.18);
  font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.2;
  text-align: left;
}
.twh-game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 48% 34%, rgba(75,154,211,.18), transparent 38%), linear-gradient(90deg, rgba(0,0,0,.18), transparent 14%, transparent 84%, rgba(0,0,0,.24));
}
.twh-game-shell [hidden] { display: none !important; }

/* Branded top HUD */
.twh-brand-hud {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 15px 17px 7px;
}
.twh-logo {
  position: relative;
  display: inline-grid;
  justify-self: start;
  min-width: 240px;
  padding: 9px 26px 10px 72px;
  transform: rotate(-1deg);
  border: 3px solid #071a2b;
  border-radius: 14px 20px 13px 15px;
  background: linear-gradient(180deg, #227cca 0 54%, #0f4f97 54% 100%);
  box-shadow: 0 6px 0 #06172a, 0 12px 24px rgba(0,0,0,.32), inset 0 2px 0 rgba(255,255,255,.35);
  text-transform: uppercase;
  text-shadow: 0 3px 0 #07192d, 0 0 8px rgba(0,0,0,.25);
}
.twh-logo::before {
  content: "";
  position: absolute;
  left: 13px;
  top: -13px;
  width: 68px;
  height: 68px;
  background: var(--twh-ui-logo, url("../images/ui/logo-box.svg")) center/contain no-repeat;
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.35));
}
.twh-logo strong { color: #f9fbff; font-size: clamp(25px, 3.3vw, 43px); font-weight: 1000; letter-spacing: -.05em; line-height: .8; -webkit-text-stroke: 1px #11233a; }
.twh-logo b { color: #ffc31b; font-size: clamp(24px, 3.2vw, 41px); font-weight: 1000; letter-spacing: -.045em; line-height: 1; -webkit-text-stroke: 1px #6f3100; }
.twh-logo small { margin-top: 3px; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: center; }

.twh-resource-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.twh-resource {
  min-width: 112px;
  height: 42px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 5px;
  padding: 3px 12px 3px 3px;
  border: 2px solid #071626;
  border-radius: 999px;
  background: linear-gradient(180deg, #12283d, #081522);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 0 rgba(0,0,0,.3);
}
.twh-resource i { width: 34px; height: 34px; display: block; background-position: center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }
.twh-resource strong { color: #fff; font-size: 16px; font-weight: 1000; white-space: nowrap; text-shadow: 0 2px #000; }
.twh-resource.heart i { background-image: var(--twh-ui-heart, url("../images/ui/heart.svg")); }
.twh-resource.coin i { background-image: var(--twh-ui-coin, url("../images/ui/coin.svg")); }
.twh-resource.gem i { background-image: var(--twh-ui-gem, url("../images/ui/gem.svg")); }
.twh-resource.heart strong::after { content: " FULL"; color: #f7fbff; font-size: 11px; margin-left: 4px; }
.twh-menu-button {
  width: 47px;
  height: 47px;
  border: 2px solid #4a76a2;
  border-radius: 13px;
  background: var(--twh-ui-menu, url("../images/ui/menu.svg")) center/66% no-repeat, linear-gradient(#274a70,#0d2742);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 5px 0 #06172b;
  cursor: pointer;
}
.twh-menu-button:active { transform: translateY(3px); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 2px 0 #06172b; }

/* Level progress */
.twh-level-strip {
  width: min(640px, calc(100% - 32px));
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 38px;
  align-items: center;
  gap: 8px;
  margin: 0 auto 5px;
  padding: 7px 9px;
  border: 2px solid rgba(70,112,151,.75);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12,31,49,.96), rgba(5,17,29,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 6px 18px rgba(0,0,0,.3);
}
.twh-level-nav {
  width: 36px;
  height: 34px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px;
  background: linear-gradient(#258bd1,#0b5795);
  box-shadow: 0 3px 0 #052e51;
  font-size: 25px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
}
.twh-level-main { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.twh-level-copy { min-width: 90px; display: grid; gap: 2px; }
.twh-level-copy strong { font-size: 13px; font-weight: 1000; }
.twh-level-copy small { overflow: hidden; color: #a8c4d9; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.twh-level-progress { position: relative; overflow: hidden; height: 15px; border: 2px solid #050e17; border-radius: 999px; background: #0a1722; box-shadow: inset 0 3px 5px rgba(0,0,0,.5); }
.twh-level-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#36a62e,#84e73f 70%,#b9ff63); box-shadow: inset 0 2px rgba(255,255,255,.35); transition: width .35s ease; }
.twh-level-stars { display: flex; align-items: center; gap: 2px; }
.twh-level-stars span { color: #455461; font-size: 20px; text-shadow: 0 2px #000; transition: transform .2s ease, color .2s ease; }
.twh-level-stars span.is-on { color: #ffd338; transform: scale(1.08); filter: drop-shadow(0 0 5px rgba(255,205,39,.45)); }

/* Main gameplay scene */
.twh-scene-frame {
  position: relative;
  margin: 0 10px;
  border: 2px solid rgba(67,98,126,.8);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(7,21,33,.35), rgba(4,12,21,.65));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.34);
}
.twh-scene-grid { display: grid; grid-template-columns: minmax(0, 1fr) 195px; min-height: 530px; }
.twh-stage-wrap { position: relative; min-width: 0; overflow: hidden; border-radius: 20px 0 0 20px; }
.twh-stage { width: 100%; height: 100%; min-height: 530px; }
.twh-stage svg { display: block; width: 100%; height: 100%; min-height: inherit; }
.twh-renderer { touch-action: manipulation; }
.twh-object image { transition: filter .18s ease; }
.twh-object:hover image { filter: brightness(1.04); }

.twh-combo-display {
  position: absolute;
  z-index: 8;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  color: #ffd02c;
  font-size: clamp(24px, 4vw, 42px);
  font-style: italic;
  font-weight: 1000;
  letter-spacing: -.04em;
  -webkit-text-stroke: 2px #6e2700;
  text-shadow: 0 4px 0 #5b2400, 0 0 18px rgba(255,176,17,.4);
}
.twh-combo-burst {
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 16%;
  width: 250px;
  height: 130px;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%) scale(.4);
  opacity: 0;
  pointer-events: none;
}
.twh-combo-burst strong { position: relative; z-index: 3; color: #fff; font-size: 37px; font-style: italic; font-weight: 1000; -webkit-text-stroke: 2px #7c2d00; text-shadow: 0 5px #6b2700, 0 0 16px #ffb31e; }
.twh-combo-burst b { position: absolute; z-index: 3; top: 83px; color: #fff2c9; font-size: 23px; text-shadow: 0 3px #7b3d00; }
.twh-combo-burst::before { content:""; position:absolute; inset:5px; border-radius:50%; background:radial-gradient(circle,#fff7bd 0,#ffd13a 16%,rgba(255,154,13,.22) 42%,transparent 70%); filter:blur(3px); }
.twh-combo-burst.is-active { animation: twh-burst-pop 1.1s cubic-bezier(.18,.9,.2,1) both; }
.twh-burst-particles i { position:absolute; left:50%; top:50%; color:#ffd32c; font-style:normal; font-size:22px; text-shadow:0 0 8px #fff; transform:rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle))); }
.twh-combo-burst.is-active .twh-burst-particles i { animation:twh-star-fly .8s ease-out both; }

.twh-float-message {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: 22px;
  max-width: 85%;
  padding: 9px 15px;
  transform: translate(-50%,18px) scale(.94);
  opacity: 0;
  color: #fff;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(8,22,34,.94);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  transition: opacity .22s ease, transform .22s ease;
}
.twh-float-message[data-type="error"] { border-color:#ff6a6a; background:#641e28; }
.twh-float-message[data-type="order"] { color:#12310d; border-color:#f6da67; background:#ffdb55; }
.twh-float-message.is-visible { opacity: 1; transform: translate(-50%,0) scale(1); }

/* Orders */
.twh-orders-panel {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  border-left: 2px solid rgba(78,108,136,.65);
  border-radius: 0 20px 20px 0;
  background: linear-gradient(180deg, rgba(25,39,54,.98), rgba(10,20,31,.98));
  box-shadow: inset 1px 0 rgba(255,255,255,.07);
}
.twh-orders-title { display:flex; align-items:center; justify-content:space-between; gap:5px; color:#fff; font-size:15px; font-weight:1000; text-transform:uppercase; }
.twh-orders-title::after { content:""; width:45px; height:40px; background:var(--twh-ui-chest, url("../images/ui/chest.svg")) center/contain no-repeat; filter:drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.twh-orders-list { display:grid; gap:8px; }
.twh-order-card {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 8px;
  color: #17212a;
  border: 3px solid #d4aa61;
  border-radius: 13px;
  background: var(--twh-ui-order-card, none) center/100% 100% no-repeat, linear-gradient(145deg,#fff8e8,#f3dfbb);
  box-shadow: 0 5px 0 #6c431f, inset 0 1px #fff;
  transition: transform .25s ease, filter .25s ease;
}
.twh-order-card header { display:flex; justify-content:space-between; align-items:center; }
.twh-order-card header b { font-size:10px; }
.twh-order-card header i { display:grid; place-items:center; width:20px; height:20px; color:#fff; border-radius:50%; background:#42aa39; }
.twh-order-items { display:flex; align-items:end; justify-content:center; gap:3px; min-height:52px; }
.twh-order-sprite { width:46px; height:46px; display:grid; place-items:end center; }
.twh-order-sprite img { display:block; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 3px 2px rgba(0,0,0,.18)); }
.twh-order-stars { text-align:center; line-height:1; }
.twh-order-stars span { color:#c4b49a; font-size:15px; -webkit-text-stroke:1px #77511a; }
.twh-order-stars span.is-on { color:#ffc72b; }
.twh-order-card > strong { display:block; color:#2e9d28; font-size:15px; text-align:center; }
.twh-order-card.is-complete { filter:saturate(.55); transform:scale(.97); }
.twh-order-card.is-complete::after { content:"✓"; position:absolute; inset:45% -20px auto; padding:4px; transform:rotate(-8deg); color:#fff; background:rgba(40,151,54,.92); font-size:10px; font-weight:1000; text-align:center; }
.twh-mini-goal { margin-top:auto; padding:8px; border:1px solid rgba(255,255,255,.14); border-radius:11px; background:rgba(2,12,20,.52); }
.twh-mini-goal header { display:flex; align-items:center; justify-content:space-between; color:#b7c9d7; font-size:9px; font-weight:900; text-transform:uppercase; }
.twh-mini-goal header strong { color:#fff; font-size:14px; }
.twh-fill-bar { overflow:hidden; height:9px; margin-top:6px; border:1px solid #071018; border-radius:999px; background:#0a1823; }
.twh-fill-bar i { display:block; width:0; height:100%; background:linear-gradient(90deg,#2f9c2b,#75dc44); transition:width .28s ease; }

/* Below-stage information */
.twh-scene-footer { position:absolute; z-index:9; left:12px; bottom:10px; display:flex; gap:7px; pointer-events:none; }
.twh-mini-stat { min-width:75px; padding:6px 9px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(3,14,24,.72); box-shadow:0 4px 12px rgba(0,0,0,.25); }
.twh-mini-stat span { display:block; color:#9db4c6; font-size:8px; font-weight:900; text-transform:uppercase; }
.twh-mini-stat strong { font-size:15px; }
.twh-save-status { align-self:center; color:#8fefa1; opacity:0; font-size:9px; font-weight:900; transition:opacity .2s ease; }
.twh-save-status.is-visible { opacity:1; }

/* Conveyor */
.twh-pack-station { padding: 10px 13px 14px; }
.twh-pack-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:0 4px 7px; }
.twh-pack-heading div { display:grid; gap:1px; }
.twh-pack-heading strong { font-size:13px; font-weight:1000; text-transform:uppercase; }
.twh-pack-heading small { color:#9eb4c5; font-size:9px; }
.twh-selected-meta { color:#ffd54a; font-size:10px; font-weight:900; text-align:right; }
.twh-selected-meta b { display:block; color:#fff; font-size:9px; }
.twh-conveyor {
  position: relative;
  min-height: 123px;
  overflow: hidden;
  padding: 11px 56px 18px 13px;
  border: 4px solid #435c71;
  border-radius: 19px;
  background: var(--twh-ui-conveyor, none) center/100% 100% no-repeat, linear-gradient(180deg,#203446 0 54%,#101d28 54% 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.15), inset 0 -10px 18px rgba(0,0,0,.42), 0 9px 22px rgba(0,0,0,.32);
}
.twh-conveyor::before,.twh-conveyor::after { content:""; position:absolute; left:0; right:0; z-index:0; height:9px; background:repeating-linear-gradient(90deg,#e39c1e 0 28px,#253744 28px 52px); }
.twh-conveyor::before { top:0; }
.twh-conveyor::after { bottom:0; }
.twh-conveyor-rollers { position:absolute; z-index:0; left:-50px; right:35px; bottom:11px; height:37px; background:repeating-linear-gradient(90deg,#536773 0 24px,#9ba9b0 24px 30px,#263642 30px 43px); transform:skewX(-16deg); box-shadow:inset 0 6px 7px rgba(255,255,255,.13),inset 0 -9px 9px rgba(0,0,0,.38); animation:twh-belt-roll 2.2s linear infinite; }
.twh-next-items { position:relative; z-index:2; display:grid; grid-template-columns:repeat(var(--twh-queue-count,4),minmax(78px,1fr)); gap:8px; align-items:end; }
.twh-next-item {
  position:relative;
  min-width:0;
  height:90px;
  display:grid;
  place-items:center;
  padding:5px;
  border:2px solid rgba(154,184,207,.22);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(52,72,89,.9),rgba(10,21,31,.92));
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 7px 10px rgba(0,0,0,.28);
  cursor:grab;
  transform-origin:50% 100%;
  animation:twh-package-arrive .45s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--queue-index) * 45ms);
}
.twh-next-item.is-selected { z-index:3; border-color:#ffd13f; transform:translateY(-6px) scale(1.035); box-shadow:0 0 0 2px rgba(255,207,58,.25),0 0 22px rgba(255,180,22,.3),inset 0 1px rgba(255,255,255,.18); }
.twh-queue-sprite { width:86px; height:65px; display:grid; place-items:end center; }
.twh-queue-sprite img { display:block; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 7px 5px rgba(0,0,0,.34)); pointer-events:none; }
.twh-queue-fallback { width:54px; height:44px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(145deg,var(--item-accent),var(--item-color)); }
.twh-next-item > b { position:absolute; right:4px; top:4px; width:21px; height:21px; display:grid; place-items:center; color:#fff; border:2px solid #fff; border-radius:50%; background:#d93b43; box-shadow:0 2px 4px rgba(0,0,0,.4); font-size:9px; }
.twh-next-item > em { position:absolute; left:50%; bottom:-15px; transform:translateX(-50%); padding:2px 8px; color:#162314; border-radius:999px; background:#ffda50; font-size:7px; font-style:normal; font-weight:1000; letter-spacing:.07em; }
.twh-conveyor-gate { position:absolute; z-index:4; right:7px; top:8px; bottom:8px; width:42px; display:grid; place-items:center; border:2px solid #5d7d96; border-radius:11px; background:linear-gradient(#294b65,#0d2739); box-shadow:inset 0 1px rgba(255,255,255,.18),-7px 0 12px rgba(0,0,0,.24); }
.twh-conveyor-gate::before { content:""; position:absolute; inset:7px 11px; border-left:3px solid #84a9c4; border-right:3px solid #84a9c4; opacity:.65; }
.twh-conveyor-gate i { position:relative; z-index:2; width:25px; height:25px; background:url("../images/ui/down.svg") center/contain no-repeat; animation:twh-gate-pulse 1.2s ease-in-out infinite; }
.twh-conveyor.is-shifting .twh-next-item { animation:twh-conveyor-shift .52s ease both; }

/* Powerups */
.twh-actions { display:grid; grid-template-columns:repeat(5,minmax(62px,1fr)); gap:9px; margin-top:11px; }
.twh-action {
  position:relative;
  min-height:76px;
  display:grid;
  place-items:center;
  padding:7px 5px 5px;
  color:#fff;
  border:2px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:linear-gradient(#278ed9,#0d5b9a);
  box-shadow:inset 0 2px rgba(255,255,255,.24),0 6px 0 #06375f,0 10px 16px rgba(0,0,0,.25);
  cursor:pointer;
  text-shadow:0 2px rgba(0,0,0,.5);
}
.twh-action:nth-child(1) { background:linear-gradient(#63c858,#2a9239); box-shadow:inset 0 2px rgba(255,255,255,.25),0 6px 0 #176429,0 10px 16px rgba(0,0,0,.25); }
.twh-action:nth-child(2) { background:linear-gradient(#ffda3d,#d69a12); box-shadow:inset 0 2px rgba(255,255,255,.3),0 6px 0 #885600,0 10px 16px rgba(0,0,0,.25); }
.twh-action:nth-child(3) { background:linear-gradient(#f6a536,#c86713); box-shadow:inset 0 2px rgba(255,255,255,.28),0 6px 0 #7e3800,0 10px 16px rgba(0,0,0,.25); }
.twh-action:nth-child(5) { background:linear-gradient(#4bb9ec,#176ca8); }
.twh-action::before { content:""; width:38px; height:38px; background-position:center; background-repeat:no-repeat; background-size:contain; filter:drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
.twh-action[data-action="refresh"]::before { background-image:url("../images/ui/refresh.svg"); }
.twh-action[data-action="hint"]::before { background-image:var(--twh-ui-hint, url("../images/ui/hint.svg")); }
.twh-action[data-action="undo"]::before { background-image:url("../images/ui/undo.svg"); }
.twh-action[data-action="rotate"]::before { background-image:url("../images/ui/rotate.svg"); }
.twh-action[data-action="restart"]::before { background-image:url("../images/ui/restart.svg"); }
.twh-action span { font-size:9px; font-weight:1000; letter-spacing:.04em; text-transform:uppercase; }
.twh-action b { position:absolute; right:-4px; top:-7px; width:23px; height:23px; display:grid; place-items:center; color:#fff; border:2px solid #fff; border-radius:50%; background:#da3541; box-shadow:0 2px 3px rgba(0,0,0,.4); font-size:10px; }
.twh-action:active { transform:translateY(4px); box-shadow:inset 0 2px rgba(255,255,255,.18),0 2px 0 #06375f; }
.twh-action:disabled { filter:grayscale(.7); opacity:.5; cursor:not-allowed; }

/* Menu / complete */
.twh-menu-panel,.twh-game-over { position:absolute; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(3,10,18,.82); backdrop-filter:blur(7px); }
.twh-menu-panel[hidden],.twh-game-over[hidden] { display:none; }
.twh-modal-card { width:min(430px,100%); padding:24px; border:3px solid #3a6589; border-radius:21px; background:linear-gradient(180deg,#203c56,#0b1e30); box-shadow:0 24px 80px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.2); text-align:center; }
.twh-modal-card h2 { margin:0 0 8px; color:#ffd23b; font-size:30px; font-weight:1000; text-shadow:0 3px #6d3200; }
.twh-modal-card p { color:#bed0dc; font-size:12px; }
.twh-menu-select { width:100%; margin:10px 0; padding:11px; color:#fff; border:1px solid #527794; border-radius:10px; background:#0c2234; font-weight:800; }
.twh-modal-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:14px; }
.twh-modal-actions button { padding:11px 17px; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:linear-gradient(#258bd2,#0d5c9b); box-shadow:0 4px 0 #06375d; font-weight:900; cursor:pointer; }
.twh-modal-actions button.is-green { background:linear-gradient(#68d057,#27903b); box-shadow:0 4px 0 #176028; }
.twh-final-stars { display:flex; justify-content:center; gap:8px; margin:12px 0; }
.twh-final-stars span { color:#3f5364; font-size:42px; text-shadow:0 3px #000; }
.twh-final-stars span.is-on { color:#ffd13b; filter:drop-shadow(0 0 8px rgba(255,202,38,.55)); animation:twh-final-star .5s ease both; }
.twh-final-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:10px 0; }
.twh-final-stats div { padding:10px; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:rgba(2,11,18,.4); }
.twh-final-stats span { display:block; color:#91aabd; font-size:9px; font-weight:900; text-transform:uppercase; }
.twh-final-stats strong { font-size:22px; }

@keyframes twh-belt-roll { to { background-position-x:172px; } }
@keyframes twh-package-arrive { from { opacity:0; transform:translateX(48px) translateY(-8px) scale(.86); } to { opacity:1; transform:translate(0) scale(1); } }
@keyframes twh-conveyor-shift { from { transform:translateX(38px); opacity:.45; } to { transform:translateX(0); opacity:1; } }
@keyframes twh-gate-pulse { 50% { transform:translateY(5px); filter:brightness(1.3); } }
@keyframes twh-burst-pop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.35); } 28% { opacity:1; transform:translate(-50%,-50%) scale(1.12); } 75% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-70%) scale(.92); } }
@keyframes twh-star-fly { 0% { opacity:0; transform:rotate(var(--angle)) translateX(0) rotate(calc(-1 * var(--angle))) scale(.4); } 35% { opacity:1; } 100% { opacity:0; transform:rotate(var(--angle)) translateX(var(--distance)) rotate(calc(-1 * var(--angle))) scale(1.1); } }
@keyframes twh-final-star { from { opacity:0; transform:translateY(-20px) scale(.4) rotate(-20deg); } to { opacity:1; transform:none; } }

@media (max-width: 900px) {
  .twh-game-shell { margin:8px auto; border-radius:20px; }
  .twh-brand-hud { grid-template-columns:1fr; gap:9px; }
  .twh-resource-row { justify-content:center; }
  .twh-logo { justify-self:center; }
  .twh-scene-grid { grid-template-columns:minmax(0,1fr) 170px; }
  .twh-orders-panel { padding:9px 7px; }
}

@media (max-width: 700px) {
  .twh-game-shell { width:100%; margin:0 auto; border-width:0; border-radius:0; }
  .twh-brand-hud { display:flex; align-items:center; justify-content:space-between; padding:9px 8px 4px; }
  .twh-logo { min-width:145px; padding:7px 13px 8px 47px; border-width:2px; border-radius:9px; box-shadow:0 4px 0 #06172a,0 8px 16px rgba(0,0,0,.3); }
  .twh-logo::before { left:5px; top:-7px; width:49px; height:49px; }
  .twh-logo strong,.twh-logo b { font-size:21px; }
  .twh-logo small { display:none; }
  .twh-resource-row { flex-wrap:nowrap; gap:4px; }
  .twh-resource { min-width:58px; width:auto; height:33px; grid-template-columns:27px auto; padding-right:7px; gap:2px; }
  .twh-resource i { width:27px; height:27px; }
  .twh-resource strong { font-size:11px; }
  .twh-resource.heart strong::after { display:none; }
  .twh-menu-button { width:37px; height:37px; border-radius:9px; box-shadow:0 3px 0 #06172b; }
  .twh-resource.gem { display:none; }
  .twh-level-strip { width:calc(100% - 14px); grid-template-columns:31px minmax(0,1fr) auto 31px; padding:5px; margin-bottom:4px; }
  .twh-level-nav { width:29px; height:29px; font-size:21px; }
  .twh-level-main { gap:5px; }
  .twh-level-copy { min-width:72px; }
  .twh-level-copy strong { font-size:10px; }
  .twh-level-copy small { font-size:7px; }
  .twh-level-stars span { font-size:15px; }
  .twh-scene-frame { margin:0 4px; border-radius:15px; }
  .twh-scene-grid { display:block; min-height:380px; }
  .twh-stage-wrap { min-height:380px; border-radius:14px; }
  .twh-stage { min-height:380px; padding-right:76px; }
  .twh-stage svg { min-height:380px; }
  .twh-orders-panel { position:absolute; top:7px; right:7px; width:105px; max-height:355px; overflow:hidden; gap:5px; padding:6px 5px; border:1px solid #4c6277; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.38); }
  .twh-orders-title { font-size:9px; }
  .twh-orders-title::after { width:30px; height:26px; }
  .twh-orders-list { gap:5px; }
  .twh-order-card { min-height:84px; padding:4px; border-width:2px; border-radius:8px; box-shadow:0 3px 0 #6c431f; }
  .twh-order-card header b { font-size:7px; }
  .twh-order-items { min-height:37px; gap:0; }
  .twh-order-sprite { width:30px; height:32px; }
  .twh-order-stars span { font-size:10px; }
  .twh-order-card > strong { font-size:10px; }
  .twh-mini-goal { padding:4px; }
  .twh-mini-goal header { font-size:6px; }
  .twh-mini-goal header strong { font-size:9px; }
  .twh-scene-footer { left:7px; bottom:7px; gap:4px; }
  .twh-mini-stat { min-width:50px; padding:4px 6px; border-radius:7px; }
  .twh-mini-stat span { font-size:6px; }
  .twh-mini-stat strong { font-size:10px; }
  .twh-save-status { font-size:7px; }
  .twh-combo-display { top:10px; left:42%; font-size:24px; }
  .twh-combo-burst { left:42%; }
  .twh-pack-station { padding:8px 6px 11px; }
  .twh-pack-heading { margin:0 3px 5px; }
  .twh-pack-heading strong { font-size:10px; }
  .twh-pack-heading small { display:none; }
  .twh-selected-meta { font-size:8px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .twh-conveyor { min-height:99px; padding:9px 43px 15px 7px; border-width:3px; border-radius:14px; }
  .twh-conveyor-rollers { height:29px; }
  .twh-next-items { grid-template-columns:repeat(var(--twh-queue-count,4),minmax(48px,1fr)); gap:4px; }
  .twh-next-item { height:69px; padding:2px; border-radius:9px; }
  .twh-queue-sprite { width:58px; height:49px; }
  .twh-next-item > b { width:18px; height:18px; font-size:7px; }
  .twh-next-item > em { bottom:-12px; font-size:6px; padding:1px 5px; }
  .twh-conveyor-gate { right:5px; width:32px; border-radius:8px; }
  .twh-conveyor-gate::before { inset:6px 8px; }
  .twh-actions { gap:5px; margin-top:8px; }
  .twh-action { min-height:59px; padding:5px 2px 3px; border-radius:10px; box-shadow:inset 0 2px rgba(255,255,255,.22),0 4px 0 #06375f; }
  .twh-action::before { width:29px; height:29px; }
  .twh-action span { font-size:7px; }
  .twh-action b { right:-2px; top:-5px; width:19px; height:19px; font-size:8px; }
}

@media (max-width: 390px) {
  .twh-logo { min-width:128px; padding-left:42px; }
  .twh-logo strong,.twh-logo b { font-size:18px; }
  .twh-resource.coin { min-width:53px; }
  .twh-stage { padding-right:68px; }
  .twh-orders-panel { width:94px; }
  .twh-action span { font-size:6px; }
}