/* Path of Berserk (games/path-of-berserk.html): the stage is 16:9 at every width (the engine shows the same width of the
   level everywhere); the bars, the score and the touch buttons lie over it. Sizes in % and em, not vw: the page may be
   zoomed by the text size (⚙ large / extra large). */
.pob-hero{background:linear-gradient(90deg,rgba(12,8,6,.86) 0,rgba(12,8,6,.62) 48%,rgba(12,8,6,.1) 100%),
  url(../../images/berserk/cover.webp) 70% 30%/cover no-repeat,#1b1410;color:#fff;min-height:220px}   /* the painted cover (FR-BERSERK-18) */
.pob-hero h1{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.pob-hero p{color:#f1e6dc;max-width:34em;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.pob-hero .sub{color:#ff8a6a}
.pob-play{border-color:#b8322a}
.pob-controls{margin:14px 0 6px;overflow-x:auto}
.pob-controls table{border-collapse:collapse;font-size:14px;min-width:420px}
.pob-controls th,.pob-controls td{text-align:left;padding:4px 10px 4px 0;vertical-align:top}
.pob-controls th{color:var(--muted);font-weight:600}
.pob-controls td:first-child{font-weight:700}
.pob-controls kbd{display:inline-block;min-width:1.6em;padding:1px 5px;margin:0 2px 2px 0;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;background:var(--bg);font:600 12px/1.4 system-ui,sans-serif;text-align:center}
.pob-tabs{display:flex;gap:6px;margin:6px 0}
.pob-tabs .btn.on{border-color:var(--accent);color:var(--accent)}

/* The stage */
.wrap:has(> #v-game:not([hidden])){max-width:1180px}
.pob-stage{position:relative;width:100%;aspect-ratio:16/9;background:#1b1410;border-radius:12px;overflow:hidden;outline:none;
  user-select:none;-webkit-user-select:none;touch-action:none;container-type:inline-size}
.pob-stage:fullscreen{border-radius:0;aspect-ratio:auto;width:100%;height:100%}
.pob-canvas{position:absolute;inset:0;display:block}
.pob-bg{position:absolute;inset:0;background-repeat:no-repeat}   /* the painted backgrounds behind the canvas (render-three.js) */
/* Jarl Ulfr: his portrait when he comes, and beside his health bar (FR-BERSERK-18) */
.pob-jarl{position:absolute;left:50%;top:20%;transform:translateX(-50%);display:flex;align-items:center;gap:.6em;padding:.5em 1.2em .5em .5em;
  border:2px solid #b8932e;border-radius:12px;background:rgba(15,10,8,.82);color:#fff;font-weight:900;pointer-events:none;
  font-size:clamp(16px,3.6cqw,38px);text-shadow:0 2px 0 #000;box-shadow:0 0 24px rgba(0,0,0,.6);animation:pob-jarl .45s ease-out}
.pob-jarl img{width:3.4em;height:4.5em;object-fit:cover;border-radius:8px;border:2px solid #6b4fa8}
.pob-jarl[hidden],.pob-foe-face[hidden]{display:none}
.pob-foe-hud{position:relative}
.pob-foe-face{position:absolute;right:100%;top:0;margin-right:.4em;width:2.4em;height:2.4em;border-radius:50%;object-fit:cover;object-position:50% 25%;
  border:2px solid #b8932e}
@keyframes pob-jarl{from{opacity:0;transform:translateX(-50%) translateY(-30%) scale(1.15)}}
.pob-hud{position:absolute;inset:0 0 auto 0;display:flex;align-items:flex-start;gap:3%;padding:1.2% 1.6%;pointer-events:none;
  color:#fff;text-shadow:0 1px 2px #000;font-size:clamp(11px,1.7cqw,18px)}
.pob-hero-hud,.pob-foe-hud{width:30%;min-width:120px}
.pob-foe-hud{margin-left:auto}
.pob-foe-hud[hidden]{display:none}
.pob-name{font-weight:800;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pob-bar{height:.75em;margin-top:.25em;border:2px solid rgba(0,0,0,.7);border-radius:4px;background:rgba(0,0,0,.45);overflow:hidden}
.pob-bar i{display:block;height:100%;width:0;background:linear-gradient(#ffe066,#f2a900);transition:width .15s}
.pob-bar.hp i{background:linear-gradient(#7ee08a,#2fb36d)}
.pob-bar.rage{height:.5em}
.pob-bar.rage i{background:linear-gradient(#ff8a5a,#e5484d)}
.pob-bar.rage.full{box-shadow:0 0 8px 2px #ff6a3a;animation:pob-pulse .6s ease-in-out infinite alternate}
.pob-bar.rage.active i{background:linear-gradient(#fff2a0,#ff3a10)}
.pob-bar.foe i{background:linear-gradient(#ff9a8a,#c0302a)}
.pob-lives{margin-top:.2em;color:#ff6b6b;letter-spacing:1px}
.pob-lives small{color:#fff}
.pob-score{margin-left:auto;text-align:right;white-space:nowrap}
.pob-foe-hud:not([hidden]) + .pob-score{margin-left:3%}
.pob-score b{font-size:1.5em;font-variant-numeric:tabular-nums}
.pob-banner,.pob-go,.pob-ready{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;color:#fff;font-weight:900;
  text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.6);white-space:nowrap}
.pob-banner{top:28%;font-size:clamp(18px,4.5cqw,46px);letter-spacing:1px;animation:pob-in .35s ease-out}
.pob-go{top:40%;right:4%;left:auto;transform:none;font-size:clamp(22px,5cqw,52px);color:#ffd34a;animation:pob-go .7s ease-in-out infinite alternate}
.pob-ready{bottom:4%;font-size:clamp(12px,2cqw,20px);color:#ffb08a}
.pob-banner[hidden],.pob-go[hidden],.pob-ready[hidden],.pob-pause[hidden],.pob-touch[hidden],.pob-nogl[hidden]{display:none}
@keyframes pob-pulse{to{box-shadow:0 0 14px 4px #ff3a10}}
@keyframes pob-in{from{opacity:0;transform:translateX(-50%) scale(1.3)}}
@keyframes pob-go{to{transform:translateX(12px)}}
@media (prefers-reduced-motion:reduce){.pob-bar.rage.full,.pob-banner,.pob-go,.pob-jarl{animation:none}}
.pob-pause{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
.pob-pause .card{text-align:center;padding:18px 22px}
.pob-pause .actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
.pob-nogl{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:8%;text-align:center;color:#fff;background:#1b1410}

/* Touch: a stick wherever the left thumb lands, three buttons for the right thumb, and pause */
.pob-touch{position:absolute;inset:0;pointer-events:none}
.pob-stick-area{position:absolute;left:0;bottom:0;width:45%;height:75%;pointer-events:auto;touch-action:none}
.pob-knob{position:absolute;width:3.4em;height:3.4em;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,.18));border:2px solid rgba(255,255,255,.7);font-size:clamp(14px,2.4cqw,22px)}
.pob-knob[hidden]{display:none}
.pob-buttons{position:absolute;right:3%;bottom:6%;display:grid;grid-template-columns:auto auto;gap:.5em;pointer-events:auto;font-size:clamp(14px,2.4cqw,22px)}
.pob-tb{width:3.2em;height:3.2em;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:rgba(20,14,10,.45);color:#fff;
  font-size:1em;line-height:1;touch-action:none;pointer-events:auto}
.pob-tb.on{background:rgba(255,255,255,.35)}
.pob-tb.hit{grid-column:2;grid-row:2;width:3.8em;height:3.8em;background:rgba(184,50,42,.55)}
.pob-tb.jump{grid-column:1;grid-row:2;align-self:end}
.pob-tb.rage{grid-column:2;grid-row:1;justify-self:end}
.pob-tb.pause{position:absolute;top:22%;right:2%;width:2.4em;height:2.4em;font-size:clamp(12px,2cqw,18px)}

/* The end of a run */
.pob-score-lines{list-style:none;padding:0;margin:8px 0 12px;display:flex;flex-direction:column;gap:2px}
.pob-score-lines li{display:grid;grid-template-columns:1fr auto 5em;gap:10px;padding:3px 0;border-bottom:1px dashed var(--border)}
.pob-score-lines i{font-style:normal;color:var(--muted)}
.pob-score-lines b{text-align:right;font-variant-numeric:tabular-nums}
.pob-score-lines li.total{border-bottom:0;font-size:17px}

/* Changing the keys (FR-BERSERK-15) */
.pob-controls #keys-open{margin-top:10px}
.pob-k kbd,.pob-slot kbd,.pob-keys-msg kbd{display:inline-block;min-width:1.6em;padding:1px 5px;margin:0 2px 2px 0;border:1px solid var(--border);
  border-bottom-width:2px;border-radius:5px;background:var(--bg);font:600 12px/1.4 system-ui,sans-serif;text-align:center;color:var(--text)}
.pob-tip .pob-k kbd{font-size:11px;margin:0 1px}
.pob-keys{border-collapse:collapse;margin:6px 0 4px;width:100%}
.pob-keys th{text-align:left;font-weight:600;padding:3px 10px 3px 0;white-space:nowrap}
.pob-keys td{padding:3px 4px}
.pob-slot{box-sizing:border-box;min-width:4.5em;width:100%;justify-content:center;padding-left:6px;padding-right:6px}
.pob-slot.wait{border-color:var(--accent);color:var(--accent);animation:pob-pulse-key .8s ease-in-out infinite alternate}
@keyframes pob-pulse-key{to{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}}
@media (prefers-reduced-motion:reduce){.pob-slot.wait{animation:none}}
.pob-keys-msg{min-height:1.4em;margin:4px 0;color:var(--accent)}