.prix-restart,.prix-pause{position:absolute;z-index:10;display:grid;place-items:center;margin:0;padding:0;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(16,25,26,.72);color:#fff;backdrop-filter:blur(8px);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.prix-restart{top:22px;right:22px;width:48px;height:48px}
.prix-restart svg,.prix-pause svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.prix-restart:focus-visible,.prix-pause:focus-visible{outline:3px solid #ffcf35;outline-offset:3px}
.prix-pause{display:none}
.prix-overlay:not([hidden])~.prix-restart{visibility:hidden}

.prix-character-portrait{overflow:hidden}
.prix-character-portrait.has-extra{background:#f7efe4 url("assets/experiments/panama-prix-character-sheet-extra.png?v=20260904b") no-repeat;background-size:300% auto;background-position-y:45%!important}

@media (min-width:801px) and (pointer:fine){
  .prix-character-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}
  .prix-character{padding-inline:4px;font-size:10px}
}

@media (pointer:coarse),(max-width:800px){
  .prix-touch{inset:0;display:block;pointer-events:none}
  .prix-touch .prix-joystick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));display:grid;place-items:center;width:144px;height:144px;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(16,25,26,.38);backdrop-filter:blur(8px);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
  .prix-joystick-ring{width:94px;height:94px;border:1px solid rgba(255,255,255,.25);border-radius:50%;pointer-events:none}
  .prix-joystick-thumb{position:absolute;left:calc(50% - 28px);top:calc(50% - 28px);width:56px;height:56px;border:2px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 3px 12px #0003;transform:translate(var(--stick-x,0px),var(--stick-y,0px));transition:transform .16s ease,background-color .16s ease;pointer-events:none}
  .prix-joystick.is-active .prix-joystick-thumb{background:#ffcf35;border-color:#fff1bd;transition:none}
  .prix-touch button,.prix-pause{display:grid;place-items:center;margin:0;padding:0;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(16,25,26,.7);color:#fff;box-shadow:none;backdrop-filter:blur(8px);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
  .prix-touch button{width:52px;height:52px}
  .prix-touch button svg,.prix-pause svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .prix-touch .prix-boost{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:104px;height:104px;border-width:2px;background:rgba(255,71,111,.82);font:800 11px/1 Inter,sans-serif;letter-spacing:.08em;pointer-events:auto}
  .prix-boost span{margin-top:3px;pointer-events:none}
  .prix-boost svg{width:28px!important;height:28px!important;fill:currentColor!important;stroke:none!important}
  .prix-touch button.is-pressed,.prix-touch button:active{background:rgba(255,207,53,.92);color:#151515;transform:scale(.94)}
  .prix-pause{position:absolute;z-index:10;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:44px;height:44px;pointer-events:auto}
  .prix-restart{top:max(14px,env(safe-area-inset-top));right:max(68px,calc(env(safe-area-inset-right) + 68px));width:44px;height:44px}
  .prix-overlay:not([hidden])~.prix-touch,.prix-overlay:not([hidden])~.prix-pause,.prix-overlay:not([hidden])~.prix-restart{visibility:hidden}
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .panama-prix{height:calc(100svh - 108px);min-height:260px}
}

/* Fit the complete mobile game, including navigation, into the live viewport. */
.prix-character,.prix-dialog>button{color:#111;-webkit-text-fill-color:currentColor;appearance:none;-webkit-appearance:none}
.prix-character-grid[hidden]{display:none}
@media (pointer:coarse),(max-width:800px){
  body.panama-prix-page{height:100svh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .panama-prix-page .site-header,.panama-prix-page .site-header.is-compact{position:relative!important;inset:auto!important;flex:0 0 60px;height:60px;min-height:0;border-radius:0;transition:none}
  .panama-prix-page .page-back-bar{flex:0 0 36px;min-height:36px;margin-top:0;padding-block:0}
  .panama-prix-page .case-back-link{min-height:32px;color:#111;align-items:center}
  .panama-prix-main{flex:1;min-height:0;width:100%;padding:0}
  .panama-prix{height:100%;min-height:0;max-height:100%}
  .prix-overlay{min-height:0;padding:12px}
  .prix-dialog{display:flex;flex-direction:column;width:100%;min-height:0;max-height:100%;padding:14px 12px;box-sizing:border-box;border-radius:20px;box-shadow:5px 5px 0 #10191a;color:#111}
  .prix-dialog>small,.prix-dialog>h1,.prix-dialog>p,.prix-dialog>button{flex-shrink:0}
  .prix-dialog h1{font-size:clamp(30px,8vw,44px)}
  .prix-character-grid{flex:0 0 auto;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0;padding:6px 5px}
  .prix-character{min-height:0;gap:3px;padding:5px;font-size:11px}
  .prix-character-portrait{width:min(100%,44px);flex-shrink:0;border-radius:9px}
  .prix-dialog>button{width:100%;min-width:0;min-height:46px;padding:11px;font-size:16px}
}
@media (max-height:500px) and (pointer:coarse){
  .panama-prix-page .site-header,.panama-prix-page .site-header.is-compact{height:44px;flex-basis:44px}
  .prix-overlay{padding:6px 12px}
  .prix-dialog{padding:8px 12px}
  .prix-dialog h1{font-size:28px;margin:4px 0}
  .prix-character-grid{margin:6px 0}
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .prix-character-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;padding-inline:0}
  .prix-character{padding:4px 2px;font-size:9px;border-radius:10px}
  .prix-character-portrait{width:min(100%,36px)}
}