@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{position:relative;overflow-x:hidden;background:
radial-gradient(circle at 50% 18%,rgba(56,86,132,.20) 0%,rgba(56,86,132,0) 30%),
radial-gradient(circle at 50% 105%,rgba(52,63,84,.22) 0%,rgba(52,63,84,0) 36%),
linear-gradient(180deg,#0c1220 0%,#0a1020 22%,#080908 68%,#070605 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-family:'Press Start 2P',monospace;gap:18px;padding:22px 12px;color:#d4c89a}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.45;background:
linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 86%,rgba(0,0,0,.55) 100%),
linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 22%,rgba(0,0,0,.34) 100%),
repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,rgba(0,0,0,0) 2px 8px)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 140px rgba(0,0,0,.92),inset 0 0 32px rgba(0,0,0,.65)}
.screen-wrap{position:relative;padding:14px;border-radius:10px;background:
linear-gradient(180deg,#16201b 0%,#0e1311 46%,#0b0b09 100%);border:1px solid rgba(193,165,103,.36);box-shadow:
0 0 0 1px rgba(28,46,37,.95) inset,
0 0 0 3px rgba(12,24,20,.92),
0 0 0 4px rgba(91,118,98,.20),
0 0 0 8px rgba(8,10,8,.95),
0 20px 60px rgba(0,0,0,.82),
0 0 45px rgba(63,98,80,.14),
0 0 22px rgba(173,145,83,.08);margin-bottom:10px}
.menu-credit{display:none}.menu-credit.hidden{display:none}
.menu-about-btn{position:absolute;top:8px;left:8px;z-index:6;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(196,168,99,.34);border-radius:999px;background:rgba(6,9,7,.84);box-shadow:0 0 0 1px rgba(18,26,20,.92) inset,0 0 10px rgba(0,0,0,.24);color:#d4c89a;font:700 11px/1 Arial,sans-serif;text-shadow:0 1px 0 rgba(0,0,0,.75);cursor:pointer;user-select:none;-webkit-user-select:none}.menu-about-btn.hidden{display:none}.menu-about-btn:hover{background:rgba(14,20,15,.92)}.menu-about-btn:active{transform:translateY(1px)}
.about-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;z-index:40;background:rgba(0,0,0,.72)}.about-modal.hidden{display:none}.about-card{width:min(92vw,360px);background:linear-gradient(180deg,rgba(9,12,10,.98),rgba(4,6,5,.98));border:1px solid rgba(193,165,103,.42);box-shadow:0 0 0 1px rgba(28,46,37,.95) inset,0 0 0 3px rgba(12,24,20,.92),0 18px 50px rgba(0,0,0,.72);border-radius:10px;padding:14px 14px 12px;position:relative;color:#d4c89a;text-shadow:1px 1px 0 #070b06}.about-card::before{content:"";position:absolute;inset:6px;border-radius:6px;pointer-events:none;border:1px solid rgba(164,189,171,.12)}.about-close{position:absolute;top:8px;right:10px;appearance:none;border:none;background:none;color:#8ea4b4;cursor:pointer;font:700 14px/1 Arial,sans-serif;opacity:.72}.about-close:hover{opacity:1}.about-title{text-align:center;font-size:11px;letter-spacing:.12em;margin:0 0 12px;color:#e6d7ab}.about-body{display:flex;flex-direction:column;gap:10px;font-size:11px;line-height:1.45}.about-line{color:#d4c89a}.about-line strong{color:#e6d7ab}.about-link{color:#9cb6c8;text-decoration:none}.about-link:hover{text-decoration:underline}.about-license{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border:1px solid rgba(193,165,103,.34);border-radius:7px;background:rgba(14,20,15,.88);color:#d4c89a;text-decoration:none;font-size:10px;letter-spacing:.08em;width:fit-content}.about-license:hover{background:rgba(22,30,23,.95)}
.screen-wrap-holder{display:flex;justify-content:center;align-items:flex-start;width:100%;overflow:visible;transition:none}
.screen-wrap{transform:scale(var(--game-zoom,1));transform-origin:top center;transition:transform .18s ease}
.zoom-strip{width:min(92vw,344px);padding:6px 9px;border:1px solid #2b3f20;background:rgba(4,7,4,0.58);box-shadow:0 0 0 1px rgba(10,18,9,0.82) inset;color:#b7c5d1;text-shadow:1px 1px 0 #050806;display:flex;justify-content:center;align-items:center;gap:9px;min-height:14px;opacity:.86;flex-wrap:wrap}
.zoom-label{color:#d4c89a;font-size:8px;letter-spacing:1.2px}
.zoom-controls{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.zoom-btn{
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;appearance:none;border:1px solid rgba(193,165,103,.26);background:rgba(10,15,10,.82);color:#b7c5d1;box-shadow:0 0 0 1px rgba(10,18,9,.82) inset;padding:4px 7px;min-width:40px;border-radius:6px;font:700 8px/1 Arial,sans-serif;letter-spacing:.08em;cursor:pointer;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.zoom-btn:hover{background:rgba(18,25,18,.92);color:#d4c89a}
.zoom-btn.active{border-color:rgba(212,200,154,.52);background:rgba(26,34,24,.96);color:#e6d7ab;box-shadow:0 0 0 1px rgba(26,34,24,.92) inset,0 0 8px rgba(0,0,0,.24)}
.screen-wrap::before{content:'';position:absolute;inset:6px;border-radius:6px;pointer-events:none;border:1px solid rgba(164,189,171,.14);box-shadow:inset 0 0 0 1px rgba(18,29,22,.92),inset 0 0 24px rgba(89,126,106,.06)}
.screen-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:10px;background:
radial-gradient(circle at 50% 0%,rgba(120,156,138,.12),rgba(120,156,138,0) 42%),
linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 18%,rgba(0,0,0,.16) 86%,rgba(0,0,0,.34) 100%)}
#gameCanvas{display:block;width:min(344px,92vw);height:auto;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:3px;box-shadow:0 0 0 1px rgba(196,168,99,.2),0 0 0 3px rgba(10,12,9,.88),0 0 24px rgba(0,0,0,.35)}
.touch-pause-btn{position:absolute;top:8px;right:8px;z-index:8;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(196,168,99,.34);border-radius:999px;background:rgba(6,9,7,.60);box-shadow:0 0 0 1px rgba(18,26,20,.70) inset,0 0 10px rgba(0,0,0,.22);color:#e6d7ab;font:700 14px/1 Arial,sans-serif;letter-spacing:0;text-transform:none;text-shadow:0 1px 0 rgba(0,0,0,.75);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;opacity:.65}.touch-pause-btn.hidden{display:none}.touch-pause-btn:active{transform:translateY(1px);background:rgba(16,22,17,.96)}
.touch-action-btn{position:absolute;z-index:8;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(196,168,99,.34);border-radius:999px;background:rgba(6,9,7,.60);box-shadow:0 0 0 1px rgba(18,26,20,.70) inset,0 0 10px rgba(0,0,0,.22);color:#e6d7ab;font:700 10px/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.75);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;opacity:.75}.touch-action-btn.hidden{display:none}.touch-action-btn:active{transform:translateY(1px);background:rgba(16,22,17,.96)}
#touchInteractBtn{bottom:10px;left:10px}
#touchDodgeBtn{bottom:10px;right:10px}
/* name-entry modal */
.name-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72)}.name-modal-overlay.hidden{display:none}
.name-modal{background:linear-gradient(180deg,rgba(15,16,16,.99),rgba(7,8,8,.99));border:1px solid rgba(196,168,99,.44);border-radius:4px;box-shadow:0 0 0 1px rgba(36,38,37,.94) inset,0 0 0 2px rgba(10,11,11,.96),0 16px 48px rgba(0,0,0,.82);padding:22px 24px 18px;display:flex;flex-direction:column;gap:12px;min-width:220px;max-width:90vw}
.name-modal-title{color:#d4c89a;font-size:10px;letter-spacing:.18em;text-shadow:0 1px 0 rgba(0,0,0,.82);text-align:center}
.name-modal-input{background:rgba(6,9,7,.80);border:1px solid rgba(196,168,99,.34);border-radius:2px;color:#e6d7ab;font:700 13px/1 Arial,sans-serif;letter-spacing:.06em;padding:8px 10px;outline:none;width:100%;box-sizing:border-box;text-shadow:0 1px 0 rgba(0,0,0,.75)}.name-modal-input:focus{border-color:rgba(196,168,99,.7)}
.name-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.name-modal-btn{appearance:none;border:1px solid rgba(196,168,99,.34);border-radius:2px;background:rgba(6,9,7,.80);color:#e6d7ab;font:700 9px/1 Arial,sans-serif;letter-spacing:.1em;padding:7px 14px;cursor:pointer;text-transform:uppercase}.name-modal-btn:hover{background:rgba(22,26,22,.96);border-color:rgba(196,168,99,.6)}.name-modal-btn.primary{border-color:rgba(196,168,99,.6);background:rgba(30,26,18,.96)}
.hint{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:min(92vw,430px);font-size:9px;letter-spacing:1px;line-height:1.3;text-align:center}
.info-strip{width:min(92vw,304px);padding:5px 9px;border:1px solid #2b3f20;background:rgba(4,7,4,0.58);box-shadow:0 0 0 1px rgba(10,18,9,0.82) inset;color:#b7c5d1;text-shadow:1px 1px 0 #050806;display:flex;justify-content:center;align-items:center;gap:6px;min-height:12px;opacity:.72}
.info-strip a{color:#9cb6c8;text-decoration:none}
.info-strip a:hover{text-decoration:underline}
.info-strip.version-link{width:auto;min-width:0;padding:3px 8px;font-size:8px;letter-spacing:.8px;background:rgba(4,7,4,0.42);border-color:#24351b;color:#8ea4b4;opacity:.62;gap:5px}
.info-strip.version-link a{color:#8ea4b4}
.info-strip .bullet{opacity:.72}
.version-dismiss{appearance:none;border:none;background:none;color:#8ea4b4;opacity:.52;cursor:pointer;font:inherit;font-size:9px;line-height:1;padding:0 0 0 1px}
.version-dismiss:hover{opacity:.9}
.info-panel-hidden{display:none}
.info-panel{width:min(92vw,304px);border:1px solid #36502a;background:rgba(4,7,4,0.82);box-shadow:0 0 0 1px rgba(12,22,10,0.92) inset;color:#d4c89a;text-shadow:1px 1px 0 #070b06;position:relative}
.info-panel summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;padding:8px 30px 7px 24px;font-size:9px;letter-spacing:1.2px;user-select:none}
.info-panel summary::-webkit-details-marker{display:none}
.info-panel summary::before{content:'+';position:absolute;left:9px;top:50%;transform:translateY(-52%);color:#7d9767;opacity:.72;font-size:12px;line-height:1}
.info-panel[open] summary::before{content:'−'}
.panel-dismiss{appearance:none;border:none;background:none;color:#7d9767;opacity:.5;cursor:pointer;font:inherit;font-size:12px;line-height:1;padding:0;position:absolute;right:8px;top:7px;z-index:3}
.panel-dismiss:hover{opacity:.88}
.info-panel .panel-body{padding:2px 14px 12px 14px;border-top:1px solid rgba(54,80,42,.85);display:flex;flex-direction:column;gap:8px}
.info-panel .panel-rule{height:1px;background:rgba(54,80,42,.55);margin:1px 0 0}
.info-panel .panel-group{display:flex;flex-direction:column;gap:5px}
.info-panel .panel-head{color:#9fb7c7;font-size:9px;letter-spacing:1.3px;text-shadow:1px 1px 0 #070b06}
.info-panel .panel-line{font-size:8px;line-height:1.5;color:#d4c89a}
.info-panel .panel-line strong{color:#e6d7ab}
.info-panel .panel-line.note{color:#c1cfda}
.info-panel .panel-line.heart strong{color:#ff9977}
.info-panel .panel-line.sword strong{color:#e6d7ab}
.info-panel .panel-line.shield strong{color:#88c8ff}
.info-panel .panel-line.speed strong{color:#f0b020}
.info-panel .panel-head.hd-yellow{color:#f0b020}
.info-panel .panel-head.hd-warm{color:#d4c89a}
.info-panel .panel-head.hd-blue{color:#8ec3d8}
.info-panel .panel-line.step strong{color:#c4b2d6}
@media (max-width:520px){body{gap:16px;padding:16px 8px}.screen-wrap{padding:12px}.hint{gap:6px}.info-strip,.info-panel{width:min(92vw,296px)}.info-strip{padding:5px 8px}.zoom-strip{width:min(92vw,296px);padding:6px 8px;gap:7px}.zoom-btn{
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;min-width:38px;padding:4px 6px;font-size:8px}.info-panel summary{padding:8px 28px 7px 22px;font-size:8px}.panel-dismiss{right:7px;top:7px}.info-panel .panel-body{padding:2px 10px 10px 10px}.info-panel .panel-head{font-size:8px}.info-panel .panel-line{font-size:7px}.touch-pause-btn{top:6px;right:6px;min-width:64px;height:26px;font-size:9px}.menu-about-btn{top:6px;left:6px;width:22px;height:22px;font-size:12px}.about-card{padding:13px 12px 11px}.about-body{font-size:10px}}

/* --- electron custom titlebar --- */
#electron-titlebar{
  display:none;
  position:fixed;top:0;left:0;right:0;height:28px;
  background:rgba(7,8,7,0.97);
  border-bottom:1px solid rgba(146,122,76,.20);
  -webkit-app-region:drag;
  app-region:drag;
  z-index:9999;
  align-items:center;
  justify-content:flex-end;
  padding:0 4px;
  user-select:none;
}
#electron-titlebar.visible{display:flex;}
.etb-btn{
  -webkit-app-region:no-drag;
  app-region:no-drag;
  width:28px;height:22px;
  border:none;background:none;
  color:rgba(176,160,120,.55);
  font-size:11px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;
  transition:background .12s,color .12s;
}
.etb-btn:hover{background:rgba(146,122,76,.18);color:rgba(220,200,150,1);}
.etb-btn.etb-close:hover{background:rgba(160,42,34,.80);color:#fff;}
.etb-btn svg{display:block;width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}

/* --- player menu layout --- */
body{display:block;min-height:100vh;padding:20px 12px}
body.has-titlebar{padding-top:calc(20px + 28px);}
.screen-wrap{border-radius:3px;background:linear-gradient(180deg,#131816 0%,#0c100f 52%,#090908 100%);border:1px solid rgba(152,129,81,.44);box-shadow:0 0 0 1px rgba(32,38,35,.96) inset,0 0 0 2px rgba(10,12,10,.96),0 0 0 4px rgba(61,54,41,.75),0 16px 48px rgba(0,0,0,.82),0 0 20px rgba(99,84,56,.09)}
.screen-wrap::before{inset:5px;border-radius:1px;border:1px solid rgba(140,128,98,.14);box-shadow:inset 0 0 0 1px rgba(18,21,20,.94),inset 0 0 18px rgba(55,60,57,.08)}
.screen-wrap::after{border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 18%,rgba(0,0,0,.12) 82%,rgba(0,0,0,.32) 100%)}
#gameCanvas{border-radius:0;box-shadow:0 0 0 1px rgba(152,129,81,.24),0 0 0 3px rgba(10,12,9,.9),0 0 22px rgba(0,0,0,.38)}
.menu-about-btn{border-radius:2px;background:rgba(9,11,10,.92)}
.touch-pause-btn,.touch-action-btn{border-radius:2px;background:rgba(8,10,9,.94)}
.about-card,.about-license,.touch-pause-btn,.menu-about-btn,.zoom-btn,.player-about-actions .about-license,.player-about-actions .about-link-button{border-radius:2px}
.about-card{background:linear-gradient(180deg,rgba(12,13,12,.99),rgba(6,7,7,.99));border:1px solid rgba(152,129,81,.48);box-shadow:0 0 0 1px rgba(39,42,39,.96) inset,0 0 0 2px rgba(12,14,13,.96),0 16px 46px rgba(0,0,0,.78)}
.about-card::before{inset:5px;border-radius:0;border:1px solid rgba(154,142,112,.11)}
.player-shell{width:100%;max-width:none;margin:0 auto;display:grid;grid-template-columns:minmax(180px,var(--player-side-width,240px)) auto minmax(180px,var(--player-side-width,240px));gap:18px;align-items:start;justify-content:center}
.player-shell.stack-game{grid-template-columns:1fr;justify-items:center}
.player-shell.stack-game .player-stage,.player-shell.stack-game .player-menu-left,.player-shell.stack-game .player-menu-right{width:min(100%,var(--player-stage-width,420px));max-width:100%;min-width:0;justify-self:center;margin-inline:auto}
.player-shell.stack-game .player-stage{order:1;justify-content:center;grid-column:auto;align-items:center}
.player-shell.stack-game .player-menu-left{order:2;grid-column:auto}
.player-shell.stack-game .player-menu-right{order:3;grid-column:auto}
.player-shell.stack-game .player-menu-left > *, .player-shell.stack-game .player-menu-right > *{width:100%;max-width:100%}
.player-shell.stack-game .screen-wrap-holder,.player-shell.stack-game .player-stage .zoom-strip{align-self:center;margin-inline:auto}
.player-menu{display:grid;gap:12px;align-self:start;height:auto;align-content:start;grid-auto-rows:max-content;position:relative;z-index:1}
.player-menu > *{align-self:start}
.player-menu.has-floating-panel{z-index:120}
.player-menu.is-hidden{display:none}
.player-menu-left{grid-column:1;width:min(100%,var(--player-side-width,240px))}
.player-menu-right{grid-column:3;width:min(100%,var(--player-side-width,240px))}
.player-stage{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:18px;grid-column:2;min-width:0;position:relative;z-index:2;isolation:isolate;padding-top:2px}
.player-card{position:relative;background:linear-gradient(180deg,rgba(15,16,16,.98),rgba(7,8,8,.98));border:1px solid rgba(146,122,76,.44);box-shadow:0 0 0 1px rgba(36,38,37,.94) inset,0 0 0 2px rgba(10,11,11,.96),0 10px 22px rgba(0,0,0,.34);border-radius:2px;padding:12px 12px 11px;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}
.player-card::before{content:'';position:absolute;inset:5px;pointer-events:none;border:1px solid rgba(166,151,117,.10)}
.player-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 22%,rgba(0,0,0,.16) 88%,rgba(0,0,0,.28) 100%)}
.player-card > *{position:relative;z-index:1}
.player-card-title,.player-menu .zoom-label,.player-menu .info-panel summary{font-size:9px;letter-spacing:.16em;color:#d9c89d;text-shadow:0 1px 0 rgba(0,0,0,.82);text-align:center}
#aboutPanel .player-card-title{cursor:pointer;user-select:none}
.player-menu .zoom-strip,.player-menu .info-panel,.player-menu .player-about-card{width:100%;max-width:none}
.player-menu .zoom-strip{display:grid;gap:10px;padding:12px 12px 11px}.player-stage .zoom-strip{display:grid;gap:calc(10px * var(--game-zoom,1));padding:calc(12px * var(--game-zoom,1)) 12px calc(11px * var(--game-zoom,1));width:min(100%,var(--player-stage-width,420px));max-width:100%;box-sizing:border-box;text-align:center}
#zoomStrip .panel-dismiss{right:10px;top:calc(12px * var(--game-zoom,1))}
#zoomStrip .panel-minimize{right:30px;top:calc(12px * var(--game-zoom,1))}.player-stage .zoom-controls{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:calc(5px * var(--game-zoom,1));width:100%}.player-stage .zoom-btn{
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;width:100%;min-width:0;height:calc(26px * var(--game-zoom,1));padding:0 calc(3px * var(--game-zoom,1));font-size:calc(7px * var(--game-zoom,1));display:inline-flex;align-items:center;justify-content:center}.player-stage .zoom-label{font-size:calc(8px * var(--game-zoom,1))}
.player-menu .zoom-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.player-menu .zoom-btn{
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;width:100%;min-width:0;height:26px;padding:0 8px;font-size:8px;display:inline-flex;align-items:center;justify-content:center}
.player-menu .info-panel{margin:0;background:linear-gradient(180deg,rgba(15,16,16,.98),rgba(7,8,8,.98));border-color:rgba(146,122,76,.44);box-shadow:0 0 0 1px rgba(36,38,37,.94) inset,0 0 0 2px rgba(10,11,11,.96),0 10px 22px rgba(0,0,0,.34);border-radius:2px}
.player-menu .info-panel summary{justify-content:center;padding:12px 80px 10px 80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.player-menu .info-panel summary::before{display:none}
.player-menu .panel-dismiss{right:10px;top:10px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font:700 13px/1 Arial,sans-serif;color:#8f876f;opacity:.72}.player-menu .panel-minimize{right:30px;top:10px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font:700 13px/1 Arial,sans-serif;color:#8f876f;opacity:.72}
.player-menu details .panel-dismiss{top:11px;right:10px}.player-menu details .panel-minimize{top:11px;right:30px}
.panel-dismiss.box-dismiss,.panel-minimize.box-dismiss{appearance:none;border:none;background:none;color:#8f876f;opacity:.62;cursor:pointer;font:700 13px/1 Arial,sans-serif;line-height:1;padding:0;position:absolute;z-index:3}
.panel-dismiss.box-dismiss:hover,.panel-minimize.box-dismiss:hover{opacity:.95;color:#c8ba93}
.player-menu .info-panel .panel-body{padding:3px 12px 12px 12px;border-top:1px solid rgba(146,122,76,.30)}
.player-menu-right .info-panel{display:flex;flex-direction:column;align-self:start;height:auto;min-height:0;max-height:none;width:100%;min-width:0}.player-menu-right .info-panel .panel-body{flex:0 0 auto;min-height:0;max-height:none;overflow:visible;padding-right:12px;scrollbar-width:auto;scrollbar-color:auto}
#aboutPanel:not(.panel-maximized):not(.collapsed) .player-about-body{overflow:visible;padding-right:0}
#howToPlayPanel:not(.panel-maximized):not(.collapsed) .panel-body{padding-top:2px;padding-bottom:10px}
#howToPlayPanel:not(.panel-maximized):not(.collapsed) .panel-group{gap:calc(4px * var(--game-zoom,1))}
#howToPlayPanel:not(.panel-maximized):not(.collapsed) .panel-line{line-height:1.42}
.player-panel-tools{position:absolute;top:9px;right:56px;display:flex;gap:6px;z-index:3}
.player-tool-btn{appearance:none;border:1px solid rgba(146,122,76,.40);background:linear-gradient(180deg,rgba(23,24,23,.96),rgba(10,11,10,.96));color:#d5c79c;text-decoration:none;font-size:7px;letter-spacing:.1em;min-width:58px;height:20px;padding:0 8px;cursor:pointer;box-shadow:0 0 0 1px rgba(10,10,10,.96) inset;text-transform:uppercase}
.player-tool-btn:hover{background:linear-gradient(180deg,rgba(30,31,30,.98),rgba(14,15,14,.98))}
.player-tool-btn.hidden{display:none}.player-tool-btn.player-tool-icon{appearance:none;border:none;background:none;color:#8f876f;opacity:.62;cursor:pointer;font:700 13px/1 Arial,sans-serif;line-height:1;padding:0;min-width:auto;width:auto;height:auto;letter-spacing:0;text-transform:none;box-shadow:none}
.player-tool-btn.player-tool-icon:hover{background:none;opacity:.95;color:#c8ba93}
.player-card.collapsed{padding-bottom:10px;min-height:auto;height:auto;max-height:none;align-self:start}.player-card.collapsed .zoom-controls,.player-card.collapsed .player-about-body,.player-card.collapsed .player-about-actions,.player-card.collapsed .player-panel-tools{display:none}
#howToPlayPanel{position:relative;width:100%;min-width:0}
#howToPlayPanel .panel-body{border-top:none}
#howToPlayPanel.collapsed{padding-bottom:10px;min-height:auto;height:auto;max-height:none;align-self:start}
#howToPlayPanel.collapsed .panel-body{display:none}
#howToPlayPanel.collapsed .player-panel-tools{display:none}
#howToPlayPanel.collapsed summary{padding-right:80px;padding-left:80px;padding-bottom:10px;min-height:18px}
#howToPlayPanel.collapsed .panel-dismiss,#howToPlayPanel.collapsed .panel-minimize{display:flex !important;visibility:visible;opacity:.72;z-index:5}
#aboutPanel{position:relative}
#aboutPanel.panel-maximized{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(80vw,1100px);max-width:calc(100vw - 48px);height:min(80vh,900px);max-height:calc(100vh - 48px);z-index:80;margin:0;box-sizing:border-box;box-shadow:0 0 0 9999px rgba(0,0,0,.72),0 0 0 1px rgba(36,38,37,.94) inset,0 0 0 2px rgba(10,11,11,.96),0 18px 50px rgba(0,0,0,.58)}
#aboutPanel.panel-maximized .player-card-title{position:sticky;top:0;z-index:2;background:linear-gradient(180deg,rgba(15,16,16,.99),rgba(7,8,8,.99));padding:12px 12px 10px}
#aboutPanel.panel-maximized .player-about-body{max-height:calc(min(80vh,900px) - 90px);overflow-y:auto;padding-right:12px}
#aboutPanel.panel-maximized .player-about-body .panel-line{font-size:9px;line-height:1.6}
#aboutPanel.panel-maximized .player-about-body .panel-head{font-size:10px}
#howToPlayPanel.panel-maximized{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(80vw,1100px);max-width:calc(100vw - 48px);height:min(80vh,900px);max-height:calc(100vh - 48px);z-index:80;margin:0;box-sizing:border-box;box-shadow:0 0 0 9999px rgba(0,0,0,.72),0 0 0 1px rgba(36,38,37,.94) inset,0 0 0 2px rgba(10,11,11,.96),0 18px 50px rgba(0,0,0,.58)}
#howToPlayPanel.panel-maximized summary{position:sticky;top:0;z-index:2;background:linear-gradient(180deg,rgba(15,16,16,.99),rgba(7,8,8,.99))}
#howToPlayPanel.panel-maximized .panel-body{max-height:calc(min(80vh,900px) - 48px) !important;min-height:calc(min(80vh,900px) - 48px);overflow-y:auto;padding-right:12px}
#howToPlayPanel.panel-maximized .panel-line{font-size:9px;line-height:1.8;margin-bottom:2px}
#howToPlayPanel.panel-maximized .panel-head{font-size:10px;margin-bottom:4px;margin-top:2px}
#howToPlayPanel.panel-maximized .panel-group{display:flex;flex-direction:column;gap:8px}
#howToPlayPanel.panel-maximized .panel-rule{margin:12px 0}
#howToPlayPanel.panel-maximized .panel-body{display:flex;flex-direction:column;gap:14px}
#howToPlayPanel.panel-maximized .panel-dismiss{z-index:4}
.player-menu .panel-rule{background:rgba(146,122,76,.22)}
.player-menu .panel-head{font-size:8px;color:#9fb7c7}
.player-menu .panel-line{font-size:7px;line-height:1.5;color:#d2c6a1}
.player-about-body{display:grid;gap:7px;margin-top:6px;font-size:8px;line-height:1.55;color:#d2c6a1;text-shadow:0 1px 0 rgba(0,0,0,.8);flex:1;min-height:0;overflow-y:auto;padding-right:8px}.player-about-body::-webkit-scrollbar{width:8px}.player-about-body::-webkit-scrollbar-track{background:rgba(8,9,8,.74)}.player-about-body::-webkit-scrollbar-thumb{background:rgba(146,122,76,.56);border-radius:8px}.player-about-body .panel-group{display:flex;flex-direction:column;gap:5px}.player-about-body .panel-rule{height:1px;background:rgba(146,122,76,.22);margin:1px 0 0}.player-about-body .panel-head{font-size:8px;letter-spacing:1.3px;text-shadow:1px 1px 0 #070b06}.player-about-body .panel-head.hd-warm{color:#d4c89a}.player-about-body .panel-head.hd-blue{color:#8ec3d8}.player-about-body .panel-line{font-size:8px;line-height:1.55;color:#d2c6a1}.player-about-body .panel-line strong{color:#e6d7ab}.player-about-body .panel-line.note{color:#c1cfda}
.player-about-body strong{color:#e6d7ab}
.player-about-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;flex-shrink:0}
.player-about-actions .about-license,.player-about-actions .about-link-button{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border:1px solid rgba(146,122,76,.40);background:linear-gradient(180deg,rgba(23,24,23,.96),rgba(10,11,10,.96));color:#d5c79c;text-decoration:none;font-size:8px;letter-spacing:.1em;min-width:72px;cursor:pointer;box-shadow:0 0 0 1px rgba(10,10,10,.96) inset}
.player-about-actions .about-license:hover,.player-about-actions .about-link-button:hover{background:linear-gradient(180deg,rgba(30,31,30,.98),rgba(14,15,14,.98))}
.player-about-body .about-link{color:#9db3c0;text-decoration:none}
.player-about-body .about-link:hover{text-decoration:underline}
.player-card.is-hidden{display:none}
/* ── Side-panel content scaling with --menu-zoom ─────────────────────────
   The game canvas still uses --game-zoom. Desktop side menus use a softer
   zoom so they remain beside the game at 175%+ instead of forcing a stack. */
.player-menu{gap:calc(12px * var(--menu-zoom,1))}
.player-menu .player-card{padding:calc(12px * var(--menu-zoom,1)) calc(12px * var(--menu-zoom,1)) calc(11px * var(--menu-zoom,1))}
.player-menu .player-card-title{font-size:calc(9px * var(--menu-zoom,1));letter-spacing:.16em}
/* Summary: scale vertical pads + left indent; right stays fixed (clears UI buttons) */
.player-menu .info-panel summary{font-size:calc(9px * var(--menu-zoom,1));padding-top:calc(12px * var(--menu-zoom,1));padding-bottom:calc(10px * var(--menu-zoom,1));padding-left:calc(52px * var(--menu-zoom,1));padding-right:calc(52px * var(--menu-zoom,1))}
/* Panel body */
.player-menu .info-panel .panel-body{padding:calc(8px * var(--menu-zoom,1)) calc(12px * var(--menu-zoom,1)) calc(12px * var(--menu-zoom,1)) calc(12px * var(--menu-zoom,1))}
.player-menu-right .info-panel .panel-body{padding-right:calc(8px * var(--menu-zoom,1))}
/* Panel text */
.player-menu .panel-head{font-size:calc(8px * var(--menu-zoom,1))}
.player-menu .panel-line{font-size:calc(7px * var(--menu-zoom,1))}
.player-menu .panel-line:not(.note){color:#e8e4d8}
.player-menu .panel-group{gap:calc(5px * var(--menu-zoom,1))}
/* About body */
.player-about-body{gap:calc(7px * var(--menu-zoom,1));margin-top:calc(6px * var(--menu-zoom,1));font-size:calc(8px * var(--menu-zoom,1))}
.player-about-body .panel-group{gap:calc(5px * var(--menu-zoom,1))}
.player-about-body .panel-head{font-size:calc(8px * var(--menu-zoom,1))}
.player-about-body .panel-line{font-size:calc(8px * var(--menu-zoom,1))}
.player-about-body .panel-line:not(.note){color:#e8e4d8}
/* About action buttons */
.player-about-actions{gap:calc(7px * var(--menu-zoom,1));margin-top:calc(4px * var(--menu-zoom,1))}
.player-about-actions .about-license,.player-about-actions .about-link-button{padding:calc(6px * var(--menu-zoom,1)) calc(8px * var(--menu-zoom,1));font-size:calc(8px * var(--menu-zoom,1));min-width:calc(72px * var(--menu-zoom,1));height:auto}
.player-page-footer{width:100%;display:flex;justify-content:center;margin:8px auto 0;padding:4px 0 10px;box-sizing:border-box}.player-page-footer.is-hidden{display:none}.player-page-footer-inner{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(100%,var(--player-stage-width,420px));max-width:min(100%,var(--player-stage-width,420px));margin-inline:auto;text-align:center;color:rgba(198,204,210,.62);text-shadow:0 1px 0 rgba(0,0,0,.78)}.player-page-footer-card{position:relative;padding:14px 14px 12px;border:1px solid rgba(134,140,146,.16);background:linear-gradient(180deg,rgba(18,20,22,.28),rgba(9,10,11,.28));box-shadow:0 0 0 1px rgba(7,8,9,.88) inset;backdrop-filter:blur(2px)}.player-page-footer-dismiss{position:absolute;top:8px;right:9px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;color:rgba(182,188,196,.46);font:700 11px/1 Arial,sans-serif;cursor:pointer;opacity:.72;transition:opacity .14s ease,color .14s ease,background .14s ease}.player-page-footer-dismiss:hover{opacity:1;color:rgba(218,224,230,.82);background:rgba(255,255,255,.04)}.player-page-footer-dismiss:active{transform:translateY(1px)}.player-page-footer-site,.player-page-footer-copy{font-size:8px;letter-spacing:.12em;line-height:1.25}.player-page-footer-site{color:rgba(214,218,222,.70)}.player-page-footer-copy a{color:rgba(188,196,204,.66);text-decoration:none}.player-page-footer-copy a:hover{color:rgba(218,224,230,.82);text-decoration:none}.player-page-footer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}.player-page-footer-actions .about-license,.player-page-footer-actions .about-link-button{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:6px 8px;border:1px solid rgba(168,174,180,.18);background:linear-gradient(180deg,rgba(24,26,28,.34),rgba(12,14,15,.34));color:rgba(212,217,222,.62);text-decoration:none;font-size:8px;letter-spacing:.1em;box-shadow:0 0 0 1px rgba(6,8,9,.82) inset;opacity:.88}.player-page-footer-actions .about-license:hover,.player-page-footer-actions .about-link-button:hover{border-color:rgba(196,201,206,.28);background:linear-gradient(180deg,rgba(34,36,38,.44),rgba(18,20,22,.44));color:rgba(228,232,236,.82)}
@media (max-width:980px){.player-shell{grid-template-columns:minmax(140px,var(--player-side-width,176px)) auto minmax(140px,var(--player-side-width,176px));gap:12px}}
@media (max-width:520px){body{padding:16px 8px}.player-shell{gap:12px}.player-card,.player-menu .zoom-strip,.player-menu .info-panel{padding-left:12px;padding-right:12px}.player-menu .zoom-btn{
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;height:24px;padding:0 6px;font-size:7px}.player-menu .info-panel summary{padding:12px 80px 9px 80px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-menu .panel-dismiss{right:10px;top:11px}.player-menu .panel-minimize{right:30px;top:11px}.player-menu details .panel-dismiss{top:12px;right:10px}.player-menu details .panel-minimize{top:12px;right:30px}.player-menu .info-panel .panel-body{padding:2px 10px 11px 10px}.player-menu .panel-head{font-size:8px}.player-menu .panel-line,.player-about-body,.player-about-actions .about-license,.player-about-actions .about-link-button{font-size:7px}.player-panel-tools{top:10px;right:56px;gap:4px}.player-tool-btn{min-width:52px;height:19px;padding:0 6px;font-size:6px}#howToPlayPanel.panel-maximized{left:6vw;top:8vh;width:88vw;height:84vh;max-height:84vh}#howToPlayPanel.panel-maximized .panel-body{max-height:calc(84vh - 46px) !important;min-height:calc(84vh - 46px)}#howToPlayPanel.panel-maximized .panel-line{font-size:8px}#howToPlayPanel.panel-maximized .panel-head{font-size:9px}
#aboutPanel.panel-maximized{left:6vw;top:8vh;width:88vw;height:84vh;max-height:84vh}#aboutPanel.panel-maximized .player-about-body{max-height:calc(84vh - 80px)}.player-page-footer{margin-top:4px;padding-bottom:8px}.player-page-footer-site,.player-page-footer-copy,.player-page-footer-actions .about-license,.player-page-footer-actions .about-link-button{font-size:7px}.player-page-footer-actions .about-license,.player-page-footer-actions .about-link-button{min-width:68px;padding:5px 7px}}
.zoom-row .zoom-btn{
  flex: 1 1 0;
  width: 100%;
}


/* Electron desktop shell */
html{
  scrollbar-width:thin;
  scrollbar-color:#7d7254 #0c0d0c;
}
::-webkit-scrollbar{
  width:12px;
  height:12px;
}
::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(9,11,10,.96),rgba(4,5,4,.96));
  border:1px solid rgba(146,122,76,.14);
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(116,105,78,.96),rgba(82,73,53,.96));
  border:2px solid rgba(10,11,10,.96);
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(184,165,114,.16) inset;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(138,124,91,.98),rgba(96,86,62,.98));
}
::-webkit-scrollbar-corner{
  background:rgba(7,8,7,.98);
}
.desktop-titlebar{
  position:fixed;
  inset:0 0 auto 0;
  height:38px;
  display:none;
  align-items:center;
  justify-content:space-between;
  padding-left:12px;
  background:linear-gradient(180deg,rgba(13,18,16,.98),rgba(7,9,8,.98));
  border-bottom:1px solid rgba(146,122,76,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 18px rgba(0,0,0,.24);
  z-index:3000;
  -webkit-app-region:drag;
  user-select:none;
}
.desktop-titlebar::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 50%,rgba(0,0,0,.18) 100%);
}
.desktop-titlebar-label{
  position:relative;
  z-index:1;
  color:#d4c89a;
  font-size:8px;
  letter-spacing:.16em;
  text-shadow:0 1px 0 rgba(0,0,0,.78);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:12px;
}
.desktop-window-controls{
  position:relative;
  z-index:1;
  display:flex;
  align-items:stretch;
  height:100%;
  -webkit-app-region:no-drag;
}
.desktop-window-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:#a9a28d;
  width:46px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 15px/1 Arial,sans-serif;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.desktop-window-btn:hover{
  background:rgba(255,255,255,.06);
  color:#e2d6b0;
}
.desktop-window-btn:active{
  background:rgba(255,255,255,.10);
}
.desktop-window-btn.desktop-window-close:hover{
  background:rgba(118,39,31,.92);
  color:#fff3ed;
}
body.desktop-has-titlebar{
  padding-top:56px !important;
}
body.desktop-has-titlebar .desktop-titlebar{
  display:flex;
}
body.desktop-is-fullscreen .desktop-titlebar{
  display:none !important;
}
body.desktop-has-titlebar.desktop-is-fullscreen{
  padding-top:0 !important;
}


.player-stage .zoom-strip{
  min-width:var(--player-stage-width,420px);
}
.player-page-footer-inner{
  min-width:var(--player-stage-width,420px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Integrated mobile browser controls and Game Boy style menu
   - Desktop remains unchanged.
   - Mobile browser mode is enabled by the script in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */
.menu-toggle-btn,
.side-menu-overlay {
  display: none !important;
}

/* Mobile browser layout: hide desktop side panels and center the game stage. */
html.mobile-browser .player-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  grid-template-columns: none;
}
html.mobile-browser .player-menu {
  display: none !important;
}
html.mobile-browser .player-stage {
  grid-column: auto;
  width: 100%;
  max-width: var(--player-stage-width, 420px);
  margin-inline: auto;
}
html.mobile-browser .screen-wrap-holder,
html.mobile-browser .player-stage .zoom-strip,
html.mobile-browser .menu-toggle-btn {
  align-self: center;
  margin-inline: auto;
}

/* Mobile menu toggle button */
html.mobile-browser .menu-toggle-btn {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: min(100%, var(--player-stage-width, 420px));
  padding: 11px 14px;
  border: 1px solid rgba(146,122,76,.48);
  border-radius: 2px;
  background: linear-gradient(180deg,rgba(22,20,14,.98),rgba(10,9,6,.98));
  color: #d4c89a;
  font: 700 9px/1 'Press Start 2P', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.85);
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(10,9,7,.96) inset,
    0 0 0 2px rgba(8,7,5,.96),
    0 4px 14px rgba(0,0,0,.42),
    0 0 18px rgba(240,176,32,.04);
  transition: background .14s, color .14s, box-shadow .14s, border-color .14s;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
html.mobile-browser .menu-toggle-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
}
html.mobile-browser .menu-toggle-btn:hover {
  border-color: rgba(240,176,32,.55);
  color: #f0b020;
  background: linear-gradient(180deg,rgba(34,30,18,.98),rgba(16,14,8,.98));
  box-shadow:
    0 0 0 1px rgba(10,9,7,.96) inset,
    0 0 0 2px rgba(8,7,5,.96),
    0 4px 18px rgba(0,0,0,.52),
    0 0 22px rgba(240,176,32,.10);
}
html.mobile-browser .menu-toggle-btn:active { transform: translateY(1px); }
html.mobile-browser .menu-toggle-btn.active {
  border-color: rgba(240,176,32,.60);
  color: #f0b020;
  background: linear-gradient(180deg,rgba(40,35,18,.98),rgba(20,17,8,.98));
  box-shadow:
    0 0 0 1px rgba(14,12,7,.96) inset,
    0 0 0 2px rgba(8,7,5,.96),
    0 0 28px rgba(240,176,32,.14);
}
html.mobile-browser .menu-toggle-icon {
  font-size: 11px;
  line-height: 1;
  opacity: .85;
}
html.mobile-browser .menu-toggle-btn.active .menu-toggle-icon {
  transform: rotate(90deg);
  display: inline-block;
  transition: transform .18s ease;
}

/* Mobile side-menu overlay */
html.mobile-browser .side-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.72);
  box-sizing: border-box;
}
html.mobile-browser .side-menu-overlay.hidden {
  display: none !important;
}
html.mobile-browser .side-menu-inner {
  position: relative;
  width: min(80vw, 860px);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,rgba(15,16,16,.99),rgba(7,8,8,.99));
  border: 1px solid rgba(146,122,76,.46);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(36,38,37,.96) inset,
    0 0 0 2px rgba(10,11,11,.98),
    0 22px 60px rgba(0,0,0,.72),
    0 0 40px rgba(0,0,0,.52);
  overflow: hidden;
}
html.mobile-browser .side-menu-inner::before {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(166,151,117,.10);
  z-index: 0;
}
html.mobile-browser .side-menu-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  appearance: none;
  border: none;
  background: none;
  color: #8f876f;
  font: 700 16px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: .65;
  padding: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .12s, color .12s;
}
html.mobile-browser .side-menu-close:hover { opacity: 1; color: #f0b020; }
html.mobile-browser .player-tab-bar {
  display: flex;
  width: 100%;
  background: linear-gradient(180deg,rgba(10,11,10,.98),rgba(5,6,5,.98));
  border-bottom: 1px solid rgba(146,122,76,.30);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
html.mobile-browser .player-tab-btn {
  flex: 1;
  appearance: none;
  border: none;
  border-right: 1px solid rgba(146,122,76,.22);
  background: transparent;
  color: #8f876f;
  font: 700 8px/1 'Press Start 2P', monospace;
  letter-spacing: .14em;
  padding: 12px 4px 11px;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,.82);
  transition: background .12s, color .12s;
  position: relative;
}
html.mobile-browser .player-tab-btn:last-child { border-right: none; }
html.mobile-browser .player-tab-btn:hover {
  background: rgba(255,255,255,.03);
  color: #d2c6a1;
}
html.mobile-browser .player-tab-btn.active {
  color: #f0b020;
  background: linear-gradient(180deg,rgba(40,35,18,.96),rgba(22,18,9,.96));
}
html.mobile-browser .player-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(240,176,32,.60);
  box-shadow: 0 0 8px rgba(240,176,32,.35);
}
html.mobile-browser .side-menu-pane { display: none; flex: 1; min-height: 0; overflow: hidden; }
html.mobile-browser .side-menu-pane.active { display: flex; flex-direction: column; }
html.mobile-browser .side-menu-pane-inner {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(146,122,76,.56) rgba(8,9,8,.74);
}
html.mobile-browser .side-menu-pane-inner::-webkit-scrollbar { width: 8px; }
html.mobile-browser .side-menu-pane-inner::-webkit-scrollbar-track { background: rgba(8,9,8,.74); }
html.mobile-browser .side-menu-pane-inner::-webkit-scrollbar-thumb {
  background: rgba(146,122,76,.56);
  border-radius: 8px;
}
html.mobile-browser .side-menu-pane .panel-group { display: flex; flex-direction: column; gap: 6px; }
html.mobile-browser .side-menu-pane .panel-head  { font-size: 9px; letter-spacing: 1.3px; color: #9fb7c7; text-shadow: 1px 1px 0 #070b06; }
html.mobile-browser .side-menu-pane .panel-line  { font-size: 8px; line-height: 1.65; color: #e8e4d8; }
html.mobile-browser .side-menu-pane .panel-line strong { color: #f0e8c0; }
html.mobile-browser .side-menu-pane .panel-line.note   { color: #c1cfda; }
html.mobile-browser .side-menu-pane .panel-line.heart strong { color: #ff9977; }
html.mobile-browser .side-menu-pane .panel-line.sword strong { color: #e6d7ab; }
html.mobile-browser .side-menu-pane .panel-line.shield strong { color: #88c8ff; }
html.mobile-browser .side-menu-pane .panel-line.speed strong  { color: #f0b020; }
html.mobile-browser .side-menu-pane .panel-line.step strong   { color: #c4b2d6; }
html.mobile-browser .side-menu-pane .panel-head.hd-yellow { color: #f0b020; }
html.mobile-browser .side-menu-pane .panel-head.hd-warm   { color: #d4c89a; }
html.mobile-browser .side-menu-pane .panel-head.hd-blue   { color: #8ec3d8; }
html.mobile-browser .side-menu-pane .panel-rule {
  height: 1px;
  background: rgba(146,122,76,.22);
  margin: 4px 0;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  html.mobile-browser .side-menu-pane-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
    align-content: start;
  }
  html.mobile-browser .side-menu-pane-inner .panel-rule { grid-column: 1 / -1; }
  html.mobile-browser .side-menu-pane-inner > .panel-group:first-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  html.mobile-browser .side-menu-inner { max-height: calc(100vh - 32px); }
  html.mobile-browser .side-menu-pane .panel-head { font-size: 8px; }
  html.mobile-browser .side-menu-pane .panel-line { font-size: 7px; }
  html.mobile-browser .player-tab-btn { font-size: 7px; padding: 10px 4px 9px; }
  html.mobile-browser .side-menu-pane-inner { padding: 14px 14px 16px; }
}
body.menu-open { overflow: hidden; }

/* Hard desktop guard: never show mobile menu/overlay on desktop browser mode. */
html.desktop-browser .menu-toggle-btn,
html.desktop-browser .side-menu-overlay {
  display: none !important;
}

/* Spacing / collapsed-panel alignment refinements. */
.player-stage .zoom-strip{
  margin-top:2px;
}
.player-menu .player-card.collapsed,
.player-menu #howToPlayPanel.collapsed{
  min-height:calc(38px * var(--menu-zoom,1));
  height:calc(38px * var(--menu-zoom,1));
  padding:0 calc(12px * var(--menu-zoom,1));
  display:flex;
  align-items:center;
  justify-content:center;
}
#aboutPanel.collapsed .player-card-title,
#howToPlayPanel.collapsed summary{
  min-height:0;
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 calc(52px * var(--menu-zoom,1));
  font-size:calc(9px * var(--menu-zoom,1));
  line-height:1;
  box-sizing:border-box;
}
.player-menu .player-card.collapsed .panel-minimize,
.player-menu .player-card.collapsed .panel-dismiss,
.player-menu #howToPlayPanel.collapsed .panel-minimize,
.player-menu #howToPlayPanel.collapsed .panel-dismiss{
  top:50%;
  transform:translateY(-50%);
}

/* ── Collapsed side-panel title alignment fix ─────────────────────────────
   Normalizes CONTROLS and HOW TO PLAY collapsed headers so both titles share
   the same vertical center line and the right-side buttons do not push text
   downward or onto a second visual row. */
.player-menu .player-card.collapsed,
.player-menu #howToPlayPanel.collapsed{
  position:relative;
  min-height:calc(40px * var(--menu-zoom,1));
  height:calc(40px * var(--menu-zoom,1));
  padding:0;
  display:block;
  overflow:hidden;
}

#aboutPanel.collapsed .player-card-title,
#howToPlayPanel.collapsed summary{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 calc(58px * var(--menu-zoom,1)) 0 calc(14px * var(--menu-zoom,1)) !important;
  box-sizing:border-box;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1 !important;
  text-align:center;
  transform:none !important;
}

#howToPlayPanel.collapsed summary{
  font-size:calc(8px * var(--menu-zoom,1));
  letter-spacing:.14em;
}

#aboutPanel.collapsed .player-card-title{
  font-size:calc(9px * var(--menu-zoom,1));
  letter-spacing:.16em;
}

#howToPlayPanel.collapsed summary::-webkit-details-marker{display:none;}
#howToPlayPanel.collapsed summary::marker{content:"";}

.player-menu .player-card.collapsed .player-panel-tools,
.player-menu #howToPlayPanel.collapsed .player-panel-tools{
  display:none !important;
}

.player-menu .player-card.collapsed .panel-minimize,
.player-menu .player-card.collapsed .panel-dismiss,
.player-menu #howToPlayPanel.collapsed .panel-minimize,
.player-menu #howToPlayPanel.collapsed .panel-dismiss{
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:3;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE GAME BOY / GBA-STYLE TOUCH CONTROLS
   Uses html.mobile-browser from index.html so desktop/touchscreen PCs stay desktop.
   ═══════════════════════════════════════════════════════════════════════════ */
.gamepad-shell{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0;width:100%;position:relative}.gp-half{display:none;flex-direction:column;align-items:center;justify-content:space-between;flex-shrink:0;position:relative}.gp-screen-slot{flex-shrink:0;display:flex;align-items:center;justify-content:center}.gp-portrait-bar,.menu-toggle-btn-landscape{display:none}html.desktop-browser .gp-half,html.desktop-browser .gp-portrait-bar,html.desktop-browser .menu-toggle-btn-landscape{display:none!important}
html.mobile-browser #touchPauseBtn,html.mobile-browser #touchInteractBtn,html.mobile-browser #touchDodgeBtn{display:none!important}html.mobile-browser .player-stage{gap:0;padding-top:0}html.mobile-browser .player-stage>.zoom-strip{display:none!important}
@media (orientation:landscape){html.mobile-browser body{padding-top:0;padding-bottom:0}html.mobile-browser .player-shell{max-width:none;width:100%}html.mobile-browser .player-stage{width:100%;max-width:none;margin-inline:auto}html.mobile-browser .gamepad-shell{flex-wrap:nowrap;flex-direction:row;align-items:stretch;min-height:0;height:auto;gap:0}html.mobile-browser .gp-half{display:flex;width:clamp(96px,18vw,140px);padding:10px 6px 14px;background:linear-gradient(180deg,rgba(11,14,12,.97) 0%,rgba(7,9,7,.98) 50%,rgba(9,12,10,.97) 100%);border:1px solid rgba(146,122,76,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 28px rgba(0,0,0,.55);position:relative}html.mobile-browser .gp-left{border-right:none;border-radius:0 0 0 22px}html.mobile-browser .gp-right{border-left:none;border-radius:0 0 22px 0}html.mobile-browser .gp-half::after{content:'';position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:32px;height:12px;background-image:radial-gradient(circle,rgba(146,122,76,.25) 1.5px,transparent 1.5px);background-size:8px 6px;border-radius:4px;opacity:.7}html.mobile-browser .gp-half::before{content:'';position:absolute;top:0;left:4px;right:4px;height:3px;background:linear-gradient(90deg,transparent 0%,rgba(146,122,76,.30) 30%,rgba(146,122,76,.30) 70%,transparent 100%);border-radius:0 0 2px 2px;pointer-events:none}html.mobile-browser .gp-screen-slot{flex:1 1 auto;align-self:flex-start;align-items:flex-start}html.mobile-browser .gp-dpad-wrap,html.mobile-browser .gp-action-wrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center}html.mobile-browser .gp-sys-row{flex-shrink:0;display:flex;gap:6px;justify-content:center;margin-bottom:6px}html.mobile-browser .player-stage>.menu-toggle-btn{display:none!important}html.mobile-browser .screen-wrap{margin-bottom:0}html.mobile-browser .menu-toggle-btn-landscape{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;appearance:none;border:1px solid rgba(146,122,76,.44);border-radius:4px;background:linear-gradient(180deg,rgba(22,20,14,.98),rgba(10,9,6,.98));color:#d4c89a;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 1px rgba(10,9,7,.96) inset,0 2px 8px rgba(0,0,0,.45);transition:background .14s,color .14s,border-color .14s;position:relative;align-self:flex-start;margin-bottom:4px}html.mobile-browser .menu-toggle-btn-landscape .menu-toggle-icon{font-size:13px;line-height:1;opacity:.85}html.mobile-browser .menu-toggle-btn-landscape.active{border-color:rgba(240,176,32,.65);color:#f0b020;background:linear-gradient(180deg,rgba(40,35,18,.98),rgba(20,17,8,.98));box-shadow:0 0 0 1px rgba(14,12,7,.96) inset,0 0 12px rgba(240,176,32,.18)}html.mobile-browser .menu-toggle-btn-landscape.active .menu-toggle-icon{transform:rotate(90deg);display:inline-block;transition:transform .18s ease}}
@media (orientation:portrait){html.mobile-browser .gp-half{display:none!important}html.mobile-browser .gamepad-shell{flex-direction:column;align-items:center}html.mobile-browser .gp-screen-slot{width:100%;margin-top:18vh}html.mobile-browser .menu-toggle-btn{width:min(62%,calc(var(--player-stage-width,420px)*.62));max-width:296px;margin-top:16px;padding:10px 14px;gap:7px;justify-content:center}html.mobile-browser .gp-portrait-bar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:130px;background:linear-gradient(160deg,rgba(16,19,17,.99) 0%,rgba(10,13,11,.99) 40%,rgba(8,10,9,.99) 100%);border-top:2px solid rgba(146,122,76,.38);border-left:1px solid rgba(146,122,76,.20);border-right:1px solid rgba(146,122,76,.20);border-bottom:none;border-radius:0 0 38px 38px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 40px rgba(0,0,0,.40),0 6px 28px rgba(0,0,0,.55);padding:14px 8px 28px;position:relative;overflow:hidden}html.mobile-browser .gp-portrait-bar::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,176,32,.22) 30%,rgba(240,176,32,.22) 70%,transparent);pointer-events:none}html.mobile-browser .gp-portrait-bar::after{content:'';position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:48px;height:10px;background-image:radial-gradient(circle,rgba(146,122,76,.28) 1.5px,transparent 1.5px);background-size:8px 5px;opacity:.75}html.mobile-browser .gpb-zone{display:flex;flex-direction:column;align-items:center;justify-content:center}html.mobile-browser .gpb-zone-left{flex:0 0 auto;padding-left:10px;filter:drop-shadow(2px 0 4px rgba(0,0,0,.4))}html.mobile-browser .gpb-zone-center{flex:1 1 auto;gap:10px;justify-content:center;align-items:center}html.mobile-browser .gpb-zone-right{flex:0 0 auto;padding-right:10px;filter:drop-shadow(-2px 0 4px rgba(0,0,0,.4))}html.mobile-browser .gpb-zone-left .gp-dpad{--dpd-sz:46px}html.mobile-browser .gpb-pause,html.mobile-browser .gpb-interact{min-width:54px;padding:6px 10px}html.mobile-browser .gpb-diamond{position:relative;width:106px;height:106px}html.mobile-browser .gpb-b{position:absolute;bottom:0;left:0;width:57px!important;height:57px!important}html.mobile-browser .gpb-a{position:absolute;top:0;right:0;width:57px!important;height:57px!important}html.mobile-browser .gpb-a .gpa-letter,html.mobile-browser .gpb-b .gpa-letter{font-size:13px!important}}
.gp-dpad{display:grid;grid-template-columns:repeat(3,var(--dpd-sz,42px));grid-template-rows:repeat(3,var(--dpd-sz,42px));position:relative;touch-action:none;user-select:none;-webkit-user-select:none}.gp-dpad::before{content:'';position:absolute;inset:0;background:rgba(14,18,14,.92);clip-path:polygon(33.3% 0%,66.6% 0%,66.6% 33.3%,100% 33.3%,100% 66.6%,66.6% 66.6%,66.6% 100%,33.3% 100%,33.3% 66.6%,0% 66.6%,0% 33.3%,33.3% 33.3%);border-radius:3px;box-shadow:0 0 0 1px rgba(146,122,76,.28),inset 0 2px 4px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none;z-index:0}.gpd-corner{display:block}.gpd-btn{position:relative;z-index:1;appearance:none;border:none;background:transparent;color:rgba(240,176,32,.75);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:color .08s}.gpd-center{position:relative;z-index:1;background:rgba(18,22,18,.6);border-radius:50%;width:14px;height:14px;margin:auto;box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(146,122,76,.18)}.gpd-btn.gp-pressed{color:#f0b020}.gpd-btn.gp-pressed::after{content:'';position:absolute;inset:4px;background:rgba(240,176,32,.12);border-radius:3px;box-shadow:0 0 8px rgba(240,176,32,.25)}.gpd-up{padding-bottom:4px}.gpd-down{padding-top:4px}.gpd-left{padding-right:4px}.gpd-right{padding-left:4px}@media (orientation:landscape){html.mobile-browser .gp-dpad{--dpd-sz:40px}}@media (orientation:portrait){html.mobile-browser .gp-dpad{--dpd-sz:44px}}
.gp-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.gpa-btn{position:relative;appearance:none;border:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;transition:filter .08s,transform .06s;box-shadow:0 3px 0 rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);flex-shrink:0}.gpa-a{width:54px;height:54px;background:radial-gradient(circle at 38% 32%,#f7d060 0%,#f0b020 46%,#c98e10 100%);border:2px solid rgba(200,140,10,.7);box-shadow:0 3px 0 rgba(100,60,0,.7),0 5px 14px rgba(240,176,32,.22),inset 0 1px 0 rgba(255,240,180,.35)}.gpa-a .gpa-letter{color:rgba(60,35,0,.85);font:700 13px/1 'Press Start 2P',monospace;text-shadow:0 1px 0 rgba(255,220,120,.4)}.gpa-a .gpa-label{color:rgba(60,35,0,.65);font:700 5px/1 'Press Start 2P',monospace;letter-spacing:.08em}.gpa-b{width:46px;height:46px;background:radial-gradient(circle at 38% 32%,#aad8f8 0%,#6baed4 46%,#4a86aa 100%);border:2px solid rgba(60,120,180,.65);box-shadow:0 3px 0 rgba(20,60,100,.7),0 5px 12px rgba(100,180,255,.15),inset 0 1px 0 rgba(200,235,255,.28)}.gpa-b .gpa-letter{color:rgba(0,30,60,.80);font:700 11px/1 'Press Start 2P',monospace;text-shadow:0 1px 0 rgba(180,220,255,.3)}.gpa-b .gpa-label{color:rgba(0,30,60,.60);font:700 5px/1 'Press Start 2P',monospace;letter-spacing:.06em}.gpa-btn.gp-pressed{transform:translateY(2px);filter:brightness(1.15);box-shadow:0 1px 0 rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}@media (orientation:landscape){html.mobile-browser .gp-actions.gp-actions-diamond{position:relative;width:100px;height:100px;flex-direction:unset;align-items:unset;gap:0}html.mobile-browser .gpa-diamond-top{position:absolute;top:0;right:0}html.mobile-browser .gpa-diamond-bot{position:absolute;bottom:0;left:0}html.mobile-browser .gp-actions-diamond .gpa-a,html.mobile-browser .gp-actions-diamond .gpa-b{width:53px;height:53px}html.mobile-browser .gp-actions-diamond .gpa-a .gpa-letter,html.mobile-browser .gp-actions-diamond .gpa-b .gpa-letter{font-size:12px}}
.gp-sys-btn{appearance:none;border:1px solid rgba(146,122,76,.32);border-radius:20px;background:linear-gradient(180deg,rgba(26,28,24,.96),rgba(14,16,13,.96));color:#a09880;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 10px;min-width:48px;box-shadow:0 2px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);transition:background .1s,color .1s,transform .06s}.gps-icon{font-size:9px;line-height:1;color:#c8b888;letter-spacing:.05em}.gps-label{font:700 5px/1 'Press Start 2P',monospace;letter-spacing:.1em;color:#8a8070;text-transform:uppercase}.gp-sys-btn.gp-pressed{transform:translateY(1px);background:linear-gradient(180deg,rgba(36,34,24,.96),rgba(22,20,14,.96));color:#f0b020;box-shadow:0 1px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04)}.gp-sys-btn.gp-pressed .gps-icon{color:#f0b020}.gp-sys-btn.gp-pressed .gps-label{color:#c09820}.gp-sys-e{border-color:rgba(100,160,220,.28)}.gp-sys-e .gps-icon{color:#88c8ff}

/* ── Mobile landscape menu button fix + footer copyright cleanup ───────────
   Keeps the mobile menu button visible in landscape by making it independent
   from the left controller panel height/layout. */
.player-page-footer-copy{display:none!important}
.player-page-footer-site{display:inline-flex;align-items:center;justify-content:center;gap:.55em;white-space:nowrap}
.footer-copy-symbol{display:inline-block;color:rgba(188,196,204,.66);font-size:.95em;line-height:1;letter-spacing:0}
@media (orientation:landscape){
  html.mobile-browser .menu-toggle-btn-landscape{
    display:flex!important;
    position:fixed!important;
    top:max(8px,env(safe-area-inset-top))!important;
    left:max(8px,env(safe-area-inset-left))!important;
    z-index:90!important;
    margin:0!important;
    align-self:auto!important;
  }
  html.mobile-browser .side-menu-overlay{z-index:89}
  html.mobile-browser .gp-left{padding-top:52px}
}


/* ── Desktop side-menu title selector fix ────────────────────────────────
   CONTROLS and HOW TO PLAY now have separate title selectors. This prevents
   HOW TO PLAY from inheriting oversized/low summary spacing from the shared
   .player-menu .info-panel summary rule. */
html.desktop-browser .player-menu #aboutPanel:not(.collapsed):not(.panel-maximized) > .player-card-title.controls-title,
html.desktop-browser .player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:calc(18px * var(--menu-zoom,1))!important;
  height:calc(18px * var(--menu-zoom,1))!important;
  box-sizing:border-box!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  margin:0 0 calc(6px * var(--menu-zoom,1)) 0!important;
}

html.desktop-browser .player-menu #aboutPanel:not(.collapsed):not(.panel-maximized) > .player-card-title.controls-title{
  font-size:calc(9px * var(--menu-zoom,1))!important;
  letter-spacing:.16em!important;
  padding:0 calc(48px * var(--menu-zoom,1)) 0 calc(8px * var(--menu-zoom,1))!important;
  transform:none!important;
}

html.desktop-browser .player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary{
  font-size:calc(8px * var(--menu-zoom,1))!important;
  letter-spacing:.14em!important;
  padding:0 calc(52px * var(--menu-zoom,1)) 0 calc(8px * var(--menu-zoom,1))!important;
  transform:none!important;
}

html.desktop-browser .player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary .howto-title{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  white-space:nowrap!important;
  transform:translateY(-1px);
}

html.desktop-browser .player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary::-webkit-details-marker{display:none!important;}
html.desktop-browser .player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary::marker{content:""!important;}

/* Keep collapsed HOW TO PLAY using the same dedicated title span. */
html.desktop-browser .player-menu #howToPlayPanel.collapsed > summary.howto-summary .howto-title{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  white-space:nowrap!important;
  transform:translateY(-1px);
}

/* ── HOW TO PLAY / GUIDE desktop title alignment fix ─────────────────────
   Root cause: #howToPlayPanel is a <details class="player-card">, so its
   <summary> was receiving the card's top padding PLUS the shared summary
   padding. That made the right menu title sit lower than the CONTROLS title.
   This rule removes the extra summary padding and aligns it to the same title
   row as the left-side CONTROLS panel. */
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary,
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary:first-child{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:calc(13px * var(--menu-zoom,1))!important;
  min-height:calc(13px * var(--menu-zoom,1))!important;
  margin:0 0 calc(7px * var(--menu-zoom,1)) 0!important;
  padding:0 calc(56px * var(--menu-zoom,1)) 0 calc(8px * var(--menu-zoom,1))!important;
  font-size:calc(8px * var(--menu-zoom,1))!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}

.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary .howto-title,
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary:first-child > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  white-space:nowrap!important;
}

.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary::-webkit-details-marker,
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary:first-child::-webkit-details-marker{
  display:none!important;
}
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary.howto-summary::marker,
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > summary:first-child::marker{
  content:""!important;
}

/* Keep the right-side menu control icons locked to the same visual row. */
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > .player-panel-tools,
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > .panel-minimize,
.player-menu #howToPlayPanel:not(.collapsed):not(.panel-maximized) > .panel-dismiss{
  top:calc(10px * var(--menu-zoom,1))!important;
}

/* ── Mobile Safari safe-area + portrait positioning fix ───────────────────
   viewport-fit=cover in index.html lets the page paint into the iPhone
   landscape safe areas. These rules make that area use the BoneCrawler
   background instead of Safari's default white, and remove the large portrait
   top offset that was pushing the game too low. */
html.mobile-browser{
  width:100%;
  min-width:100%;
  min-height:100%;
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% 18%,rgba(56,86,132,.20) 0%,rgba(56,86,132,0) 30%),
    radial-gradient(circle at 50% 105%,rgba(52,63,84,.22) 0%,rgba(52,63,84,0) 36%),
    linear-gradient(180deg,#0c1220 0%,#0a1020 22%,#080908 68%,#070605 100%);
  background-color:#07090d;
}
html.mobile-browser body{
  width:100%;
  min-width:100%;
  max-width:100%;
  margin:0!important;
  overflow-x:hidden!important;
  background-color:#07090d;
}

@media (orientation:landscape){
  html.mobile-browser,
  html.mobile-browser body{
    width:100vw;
    min-width:100vw;
    max-width:100vw;
    min-height:100dvh;
    padding:0!important;
  }
  html.mobile-browser .player-shell,
  html.mobile-browser .player-stage,
  html.mobile-browser .gamepad-shell{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  html.mobile-browser .gamepad-shell{
    min-height:100dvh;
    background:
      linear-gradient(90deg,rgba(0,0,0,.70),rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,rgba(0,0,0,.70)),
      linear-gradient(180deg,#07090d 0%,#050605 100%);
  }
}

@media (orientation:portrait){
  html.mobile-browser body{
    padding-left:0!important;
    padding-right:0!important;
    padding-top:0!important;
  }
  html.mobile-browser .player-shell,
  html.mobile-browser .player-stage,
  html.mobile-browser .gamepad-shell{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  html.mobile-browser .gp-screen-slot{
    /* Keep the portrait game window high in the viewport. */
    margin-top:0!important;
  }
}


/* ── Collapsed HOW TO PLAY title center fix ──────────────────────────────
   The expanded title override above must not apply to the collapsed card.
   Keep the minimized right-panel title centered between the card edges while
   leaving room for the right-side + / x buttons. */
.player-menu #howToPlayPanel.collapsed > summary.howto-summary,
.player-menu #howToPlayPanel.collapsed > summary:first-child{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0 calc(58px * var(--menu-zoom,1)) 0 calc(18px * var(--menu-zoom,1))!important;
  box-sizing:border-box!important;
  font-size:calc(8px * var(--menu-zoom,1))!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  transform:none!important;
}

.player-menu #howToPlayPanel.collapsed > summary.howto-summary .howto-title,
.player-menu #howToPlayPanel.collapsed > summary:first-child > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(0)!important;
  white-space:nowrap!important;
}

.player-menu #howToPlayPanel.collapsed > .player-panel-tools,
.player-menu #howToPlayPanel.collapsed > .panel-minimize,
.player-menu #howToPlayPanel.collapsed > .panel-dismiss{
  top:50%!important;
  transform:translateY(-50%)!important;
}

/* ── Mobile landscape controller unification fix ──────────────────────────
   The landscape controller body should read as one continuous shell, not as
   two separate side templates split around the game window. These overrides
   move the shell treatment to .gamepad-shell and make the left/right control
   holders transparent. */
@media (orientation:landscape){
  html.mobile-browser .gamepad-shell{
    display:grid!important;
    grid-template-columns:minmax(108px,18vw) auto minmax(108px,18vw)!important;
    align-items:stretch!important;
    justify-content:center!important;
    column-gap:0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 18% 50%,rgba(31,46,33,.55) 0%,rgba(31,46,33,.18) 30%,rgba(31,46,33,0) 56%),
      radial-gradient(circle at 82% 50%,rgba(31,46,33,.55) 0%,rgba(31,46,33,.18) 30%,rgba(31,46,33,0) 56%),
      linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(5,8,7,.98) 15%,rgba(7,9,7,.99) 50%,rgba(5,8,7,.98) 85%,rgba(0,0,0,.72) 100%)!important;
    box-shadow:
      inset 0 0 0 1px rgba(146,122,76,.18),
      inset 0 0 46px rgba(0,0,0,.72)!important;
  }

  html.mobile-browser .gp-left,
  html.mobile-browser .gp-right{
    width:auto!important;
    min-width:0!important;
    min-height:100dvh!important;
    height:100dvh!important;
    padding:52px 8px 14px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  html.mobile-browser .gp-left::before,
  html.mobile-browser .gp-left::after,
  html.mobile-browser .gp-right::before,
  html.mobile-browser .gp-right::after{
    display:none!important;
  }

  html.mobile-browser .gp-screen-slot{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:calc(100vw - 216px)!important;
    align-self:center!important;
    justify-self:center!important;
    align-items:center!important;
  }

  html.mobile-browser .gp-dpad-wrap,
  html.mobile-browser .gp-action-wrap{
    min-height:0!important;
  }

  html.mobile-browser .screen-wrap-holder{
    width:auto!important;
    max-width:100%!important;
  }
}


/* ── Mobile landscape D-pad size/position adjustment ─────────────────────
   Enlarges only the landscape on-screen D-pad by roughly 15% and nudges it
   farther left inside the unified controller shell. Portrait is unchanged. */
@media (orientation:landscape){
  html.mobile-browser .gp-left .gp-dpad{
    --dpd-sz:46px!important;
    transform:translateX(-10px);
  }
  html.mobile-browser .gp-left .gp-dpad-wrap{
    justify-content:flex-start!important;
    padding-left:0!important;
  }
}

/* ── Mobile landscape A/B button size/position adjustment ──────────────────
   Matches the previous D-pad landscape tuning: enlarges the right-side A/B
   button cluster by roughly 15% and nudges it farther right. Portrait is
   unchanged. */
@media (orientation:landscape){
  html.mobile-browser .gp-right .gp-actions.gp-actions-diamond{
    width:115px!important;
    height:115px!important;
    transform:translateX(10px);
  }
  html.mobile-browser .gp-right .gp-actions-diamond .gpa-a,
  html.mobile-browser .gp-right .gp-actions-diamond .gpa-b{
    width:61px!important;
    height:61px!important;
  }
  html.mobile-browser .gp-right .gp-actions-diamond .gpa-a .gpa-letter,
  html.mobile-browser .gp-right .gp-actions-diamond .gpa-b .gpa-letter{
    font-size:13px!important;
  }
  html.mobile-browser .gp-right .gp-action-wrap{
    justify-content:flex-end!important;
    padding-right:0!important;
  }
}