/* The old DOM nodes are private compatibility hooks, never a visible trial UI. */
[data-product=trial] .game-hud, [data-product=trial] .toolbar, [data-product=trial] .masthead, [data-product=trial] .spec-card, [data-product=trial] .hint { display: none !important; }
[data-product=trial] .shot-panel { display: contents !important; }
[data-product=trial] #power-track, [data-product=trial] #tip-pad { position: fixed; z-index: 5; pointer-events: auto; }
#trial-hud { position: fixed; inset: 0; width:100%; height:100%; pointer-events:none; z-index:6; }
#trial-match-info, #trial-modal-buttons button { position:fixed; z-index:7; background:transparent; border:0; color:transparent; cursor:pointer; }
#trial-match-info:focus-visible, #trial-modal-buttons button:focus-visible { outline:2px solid #e6c478; outline-offset:2px; }
#trial-modal-buttons button {z-index:10;}
#trial-actions {position:fixed;z-index:8;display:flex;gap:10px;flex-wrap:wrap;}
#trial-actions button {font:inherit;color:#f3ead6;border:1px solid #d39a4c;border-radius:6px;background:#071524;padding:8px 14px;cursor:pointer;}
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }

#trial-actions #decision-actions {position:fixed;display:flex;align-items:stretch;gap:8px;}
#trial-actions #decision-actions button {flex:1;min-width:0;height:100%;padding:0 4px;font-size:inherit;}
#trial-actions #decision-actions:empty {pointer-events:none;}

#trial-practice-controls button {position:fixed;z-index:7;background:transparent;color:transparent;border:0;cursor:pointer;}
#trial-practice-controls button:focus-visible {outline:2px solid #e6c478;}
#trial-practice-controls button[hidden] {display:none;}
#trial-practice-controls button[data-popup="true"] {z-index:10;}
html[data-product="trial"], html[data-product="trial"] *, html[data-product="trial"] *::before, html[data-product="trial"] *::after {
  touch-action: none;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none;
}

[data-product="trial"] #loading.loading {
  gap: 36px;
  padding: 24px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 42%, #183c31 0%, #0b211b 38%, #050d0b 80%);
}
[data-product="trial"] #loading h1 {
  text-align: center;
  color: #eee5cd;
  font: 600 clamp(18px, 4vw, 56px)/1.35 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: .12em;
  text-shadow: 0 2px 18px #0003;
}
[data-product="trial"] #loading h1 span {
  display: block;
  margin-top: 14px;
  color: #a7bcb0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 400;
  letter-spacing: .18em;
}
[data-product="trial"] .loading__progress { width: min(360px, calc(100vw - 64px)); text-align: center; }
[data-product="trial"] #loading .loading__track {
  position: relative;
  width: 100%;
  height: 24px;
  background: #071a13;
  border: 1px solid #426552;
  border-radius: 7px;
  box-shadow: inset 0 1px 4px #0005;
}
[data-product="trial"] #loading-bar {
  background: #168443;
  box-shadow: none;
}
[data-product="trial"] #loading-percent {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 600 14px/1 system-ui, sans-serif;
  color: #fff; text-shadow: 0 1px 2px #0009;
  font-variant-numeric: tabular-nums;
}
@media (max-height: 450px) {
  [data-product="trial"] #loading.loading { gap: 24px; }
  [data-product="trial"] #loading h1 { font-size: clamp(18px, 4vw, 36px); }
  [data-product="trial"] #loading h1 span { margin-top: 10px; }
}
[data-product="trial"] #loading-error {max-width: min(560px, 85vw);margin:0;color:#e9b4a5;font:14px/1.6 system-ui,sans-serif;text-align:center;overflow-wrap:anywhere;}

#trial-fullscreen {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 9;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #f7f1df;
  background: rgba(3, 11, 23, var(--fullscreen-background-alpha, .42));
  border: 1.5px solid rgba(255, 255, 255, .20);
  border-radius: 12px;
  cursor: pointer;
}
#viewer.is-loading #trial-fullscreen { display: none; }
#trial-fullscreen:hover, #trial-fullscreen:focus-visible { border-color: rgba(241, 210, 132, .62); }
#trial-fullscreen:active { border-color: #e6c478; }
#trial-fullscreen:disabled { opacity: .45; cursor: default; }
#trial-fullscreen img, #trial-fullscreen svg { width: 58%; height: 58%; pointer-events: none; }
#trial-fullscreen svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#trial-fullscreen .fullscreen-exit, #trial-fullscreen[aria-pressed="true"] .fullscreen-expand { display: none; }
#trial-fullscreen[aria-pressed="true"] .fullscreen-exit { display: block; }

[data-product="trial"] #loading h1 .loading__orientation {
  margin-top: 18px;
  font-size: clamp(15px, 1.8vw, 20px);
  letter-spacing: .08em;
  color: #a7bcb0;
}

[data-product="trial"] #loading #loading-start {
  width: 100%; height: 56px; padding: 0;
  border: 1px solid #bd9c58; border-radius: 8px;
  overflow: hidden; color: #fff2d2;
  cursor: pointer; touch-action: manipulation;
}
[data-product="trial"] #loading #loading-start:disabled { cursor: default; opacity: 1; }
[data-product="trial"] #loading #loading-start #loading-bar { height: 100%; border-radius: 0; }
[data-product="trial"] #loading #loading-start #loading-percent {
  font: 600 24px/1.3 "PingFang SC", system-ui, sans-serif;
}
[data-product="trial"] #loading #loading-start:not(:disabled):active { filter: brightness(1.15); }
[data-product="trial"] #loading #loading-start:focus-visible { outline: 2px solid #ecd799; outline-offset: 4px; }

#trial-fps {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: calc(max(12px, env(safe-area-inset-right)) + var(--trial-fullscreen-size, 48px) + 12px);
  height: var(--trial-fullscreen-size, 48px);
  display: flex; align-items: center;
  z-index: 9; pointer-events: none;
  color: #f7f1df; font: 500 16px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 1px 3px #0009;
}
#viewer.is-loading #trial-fps { display: none; }

/* Keep frequently painted HUD surfaces separate from the live WebGL scene,
   including Safari's windowed compositor path. No geometry or DPR change. */
[data-product="trial"] #trial-hud,
[data-product="trial"] #tip-pad,
[data-product="trial"] #power-track {
  transform: translateZ(0);
  will-change: transform;
}

/* Do not chain game drags into viewport rubber-banding. */
html[data-product="trial"], html[data-product="trial"] body { overscroll-behavior: none; }

.practice-replay-dialog { width:min(560px,calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))); max-width:none; box-sizing:border-box; padding:clamp(16px,3vmin,36px); border:1px solid #b98d50; border-radius:clamp(12px,2vmin,20px); background:linear-gradient(150deg,#163c2e,#071913); color:#f3ead6; box-shadow:0 24px 100px #0009; text-align:center; font:clamp(16px,1.3vw,22px)/1.6 system-ui,sans-serif; overflow-wrap:anywhere; }
.practice-replay-dialog::backdrop { background:#020b075c; }
body:has(#viewer.is-loading) > :not(#viewer).practice-replay-dialog[open] { visibility:visible !important; }
.practice-replay-dialog h2 { margin:0 0 10px; font-size:clamp(22px,2vw,32px); line-height:1.35; }
.practice-replay-dialog p { margin:10px 0; }
.replay-summary { color:#d4c7aa; }
.replay-feedback { color:#efd296; min-height:26px; }
.replay-dialog-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(12px,2vmin,22px); }
.replay-dialog-actions button { flex:1 1 110px; min-width:0; min-height:44px; padding:12px 8px; border:1px solid #b48f50; border-radius:10px; color:#f3ead6; background:#224b38; font:600 clamp(16px,1.3vw,22px) system-ui; cursor:pointer; }
.replay-dialog-actions button:last-child { background:#e2bf78; color:#13241a; }
.replay-dialog-actions button:disabled { opacity:.55; cursor:wait; }
[data-practice-replay="true"] #power-track,[data-practice-replay="true"] #tip-pad { visibility:hidden !important; pointer-events:none !important; }
[data-practice-replay="true"] .effective-power { display:none !important; }
#trial-practice-controls .replay-label {position:fixed;color:transparent;pointer-events:none;}
#trial-practice-controls .replay-label[hidden] {display:none;}
.practice-replay-dialog { position:fixed; inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); margin:auto; height:fit-content; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overflow:auto; z-index:30; }
@media (max-height:480px) {
 .practice-replay-dialog { padding:14px 20px; font-size:16px; }
 .practice-replay-dialog h2 { font-size:22px; }
 .practice-replay-dialog p { margin:6px 0; }
 .replay-dialog-actions { margin-top:12px; }
 .replay-dialog-actions button { padding:10px 8px; font-size:16px; }
}

.replay-feedback:empty { display:none; }