@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(./fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/font-7.ttf) format('truetype');
}

:root{font-family:'DM Sans',sans-serif;color:#f4e8cf;background:#b68d76;--ink:#223936;--cream:#f4e8cf;--mint:#9ce0c4;--gold:#f4bd69}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}button,a{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}#game{height:100dvh;position:relative;overflow:hidden}#world{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:max(24px,env(safe-area-inset-top));left:30px;right:30px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.brand,.stats{pointer-events:auto}.brand a{font-size:10px;letter-spacing:2px;font-weight:800;color:#28413a;text-decoration:none}.brand h1{font:900 42px/.84 'Barlow Condensed',Impact,sans-serif;margin:11px 0;color:#f9e9c9;text-shadow:2px 3px #374b3f}.brand h1>span{display:block}.spark{color:var(--mint);padding-left:5px}.stats{display:flex;gap:9px;align-items:flex-start}.stat{background:var(--ink);padding:12px 19px;border-radius:8px;min-width:120px;box-shadow:0 3px #12262133}.stat>span{font-size:9px;font-weight:800;letter-spacing:1.2px;display:block;color:#b6c6b6}.stat strong{font:800 31px/1.1 'Barlow Condensed',Impact,sans-serif;display:block}.stat em{font-size:20px;color:var(--mint);font-style:normal}.small-button{background:var(--ink);color:var(--cream);border:1px solid #ffffff25;border-radius:8px;min-width:44px;height:45px;font-size:21px;position:relative}.meter{height:4px;background:#ffffff22;border-radius:2px;display:block;overflow:hidden;margin-top:5px}.meter b{display:block;height:100%;background:var(--mint);width:0;transition:width .2s}.phase{position:absolute;top:28px;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;font-size:10px;letter-spacing:1px;background:#223936e6;padding:10px 15px;border-radius:30px;white-space:nowrap}.phase>b{font-weight:600}.phase>span:last-child{color:#b5c5b5;border-left:1px solid #ffffff30;padding-left:9px}#phaseDot{width:6px;height:6px;background:var(--mint);border-radius:50%}.base-label{position:absolute;pointer-events:none;text-align:center;transform:translate(-50%,-100%);background:#223936e0;border:1px solid #b1d4b845;border-radius:6px;padding:7px 10px;min-width:100px}.base-label>span{font-size:9px;font-weight:800;letter-spacing:1px}.base-label small{font-size:9px;color:#c3d6bf}.base-label .meter{height:3px}.pad-marker{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:33px;height:33px;border:1px solid #f3e5bc99;background:#263e33cd;color:#ffe5ad;font-weight:800;font-size:15px;box-shadow:0 2px 0 #263d3540}.pad-marker.built{width:25px;height:25px;font-size:11px;background:#f3c779;color:#243f35}.pad-marker.selected{outline:3px solid #a3f3d7;outline-offset:3px}.bottom{position:absolute;left:30px;right:30px;bottom:max(24px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.actions{display:flex;gap:8px;pointer-events:auto}.primary,.secondary{border:0;border-radius:7px;padding:16px 20px;font-size:13px;font-weight:800;letter-spacing:.5px}.primary{color:var(--ink);background:var(--mint);box-shadow:0 4px #598f74;display:flex;justify-content:space-between;align-items:center;gap:24px}.primary:hover{background:#b9f0d8}.secondary{background:var(--ink);color:var(--cream);border:1px solid #ffffff24;box-shadow:0 4px #122d2940}.secondary:hover{background:#32544a}kbd{font:inherit;font-size:11px;border:1px solid #ffffff35;padding:2px 4px;margin-left:8px;border-radius:3px}#sound{height:50px}#muted{position:absolute;bottom:3px;right:5px;font-size:12px;font-style:normal}.control-hint{font-size:11px;color:#d8dfca;background:#223936cf;padding:12px 15px;border-radius:7px}.control-hint span{font-weight:900;letter-spacing:2px;color:#fff1d3}.control-hint b{margin:0 8px}#toast{position:absolute;top:19%;left:50%;transform:translate(-50%,0);opacity:0;transition:opacity .2s;background:var(--ink);border:1px solid #d6e3c640;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:700;max-width:90%;text-align:center;pointer-events:none}#toast.visible{opacity:1}.intro{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);background:#223936f2;border:1px solid #e5d9b333;border-radius:12px;padding:28px;width:390px;box-shadow:0 14px 50px #553d3422}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#c5d5bd}h2{font:800 34px/1.05 'Barlow Condensed',Impact,sans-serif;margin:10px 0 12px}.intro p{font-size:14px;line-height:1.6;color:#d2dfcb}.intro>.primary{width:100%}.intro small{display:block;text-align:center;font-size:10px;color:#b4c4ad;margin-top:17px}.steps{display:flex;justify-content:space-between;margin:22px 0;color:var(--mint);font:800 23px 'Barlow Condensed',Impact,sans-serif}.steps b{display:block;font:700 9px 'DM Sans',sans-serif;color:#bdcdb6;letter-spacing:1px;margin-top:3px}#game.playing .intro{display:none}#game:not(.playing) .pad-marker,#game:not(.playing) .control-hint{visibility:hidden}#buildPanel{position:absolute;right:30px;bottom:93px;width:330px;padding:20px;background:#223936f5;border:1px solid #d2daba40;border-radius:10px;box-shadow:0 10px 40px #26372740}.panel-head{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}.panel-head h2{font-size:27px;margin:6px 0 12px}.close{border:0;background:none;color:#dbe5cc;font-size:28px;line-height:1}.build-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:12px 0;color:var(--cream);border:0;border-top:1px solid #ffffff20;background:none}.build-choice strong{font-size:14px;display:block}.build-choice small{font-size:11px;display:block;line-height:1.4;color:#b6cbb0;margin-top:4px}.build-choice>span:last-child{color:var(--mint);font-size:15px;font-weight:800;white-space:nowrap}.build-choice:hover:not(:disabled){background:#ffffff08}dialog{background:var(--ink);color:var(--cream);width:min(450px,calc(100% - 30px));max-height:85dvh;padding:27px;border:1px solid #becfab55;border-radius:12px;box-shadow:0 22px 80px #16292966}dialog::backdrop{background:#172e3780;backdrop-filter:blur(4px)}dialog p{font-size:14px;line-height:1.75;color:#d0dcc4}dialog>.primary{width:100%}.text-button{display:block;background:none;border:0;color:#b6c8ab;text-decoration:underline;font-size:12px;margin:20px auto 0}#joystick{position:absolute;left:25px;bottom:37px;width:112px;height:112px;border-radius:50%;border:2px solid #f9eac777;background:#28443833;display:none;touch-action:none}#stick{position:absolute;left:32px;top:32px;width:44px;height:44px;background:#edf0d8b0;border:2px solid #ffffff55;border-radius:50%}#fatal{position:absolute;inset:20%;background:var(--ink);padding:30px}#fatal button{padding:15px}.danger #phaseDot{background:#efab85}.danger .phase{border:1px solid #c7836744}
@media(max-width:1150px){.phase{top:118px}.control-hint{display:none}}
@media(pointer:coarse){#game.playing #joystick{display:block}.control-hint{display:none}.bottom{justify-content:flex-end}}
@media(max-width:650px){header{top:max(16px,env(safe-area-inset-top));left:16px;right:16px}.brand a{font-size:8px;letter-spacing:1px}.brand h1{font-size:30px}.stats{gap:5px}.stat{padding:9px 11px;min-width:72px}.stat>span{font-size:8px;letter-spacing:.4px}.stat strong{font-size:25px}.stat em{font-size:15px}.small-button{min-width:33px;height:40px;font-size:18px}.phase{top:106px;font-size:9px;padding:8px 12px;gap:6px}.intro{width:calc(100% - 36px);max-width:375px;bottom:16%;padding:24px}.intro h2{font-size:31px}.intro p{font-size:13px}.bottom{left:16px;right:16px;bottom:max(24px,env(safe-area-inset-bottom));justify-content:flex-end}.primary,.secondary{font-size:11px;padding:15px 12px}.actions{gap:6px}kbd{display:none}#sound{height:45px}#buildPanel{width:calc(100% - 32px);max-width:340px;right:16px;bottom:90px;padding:17px}.pad-marker{width:29px;height:29px;font-size:12px}#toast{top:26%}.base-label{min-width:81px;padding:5px 8px}.base-label>span{font-size:8px}#joystick{bottom:92px;width:105px;height:105px}#stick{left:28px;top:28px}}
@media(max-height:520px){.phase{top:20px}.brand h1{font-size:27px}.intro{bottom:16%;padding:18px 23px}.intro .steps{display:none}.intro small{display:none}.intro p{margin-bottom:16px}.intro h2{font-size:29px}#buildPanel{bottom:78px;max-height:70dvh;overflow:auto}.bottom{bottom:15px}header{top:15px}.base-label{display:none}}