html.gb { --gb-fg:#F2ECE0;--gb-tint:rgba(242,236,224,.05);--gb-tint2:rgba(242,236,224,.10);--gb-edge:rgba(242,236,224,.35);--gb-edge2:rgba(242,236,224,.6);--gb-halo:0 0 6px rgba(5,6,12,.85) }
html.gb .gb-on-dark { --gb-fg:#F2ECE0;--gb-tint:rgba(242,236,224,.05);--gb-tint2:rgba(242,236,224,.10);--gb-edge:rgba(242,236,224,.35);--gb-edge2:rgba(242,236,224,.6);--gb-halo:0 0 6px rgba(5,6,12,.85) }
html.gb .gb-on-light { --gb-fg:#15161C;--gb-tint:rgba(255,255,255,.10);--gb-tint2:rgba(255,255,255,.15);--gb-edge:rgba(21,22,28,.35);--gb-edge2:rgba(21,22,28,.6);--gb-halo:0 0 6px rgba(255,255,255,.9) }
html.gb .gb-on-mid { --gb-fg:#15161C;--gb-tint:rgba(255,255,255,.10);--gb-tint2:rgba(255,255,255,.15);--gb-edge:rgba(21,22,28,.35);--gb-edge2:rgba(21,22,28,.6);--gb-halo:0 0 6px rgba(255,255,255,.9);--gb-fg:#000 }
/* === Glass buttons (3 Nov 2026, the owner): clear centre, translucent iridescent rim. === */
@property --iri { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:where(html.gb) :where(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)) { position: relative; }
html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)) {
  isolation: isolate;
  background: var(--gb-tint) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--gb-fg) !important; -webkit-text-fill-color: var(--gb-fg) !important;
  border: 1.5px solid var(--gb-edge) !important;
  text-shadow: var(--gb-halo);
  box-shadow: inset 0 0 14px rgba(143,216,255,.10), 0 0 18px rgba(201,182,255,.14) !important;
  transition: box-shadow .25s, background-color .25s, border-color .25s;
}
html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)) :is(svg, svg *) { color: var(--gb-fg); }
html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div))::before {
  content: "" !important; position: absolute !important; inset: -1.5px !important; border-radius: inherit; padding: 3px; pointer-events: none; z-index: -1;
  display: block !important; width: auto !important; height: auto !important; transform: none !important;
  background: conic-gradient(from var(--iri), #8fd8ff, #c9b6ff, #ffb6e1, #ffe9a8, #a8ffd8, #8fd8ff) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .75; animation: gb-iri 6s linear infinite !important;
}
html.gb :is(input[type=submit], input[type=button]) { border-image: conic-gradient(from var(--iri), #8fd8ff, #c9b6ff, #ffb6e1, #ffe9a8, #a8ffd8, #8fd8ff) 1 !important; animation: gb-iri 6s linear infinite; }
html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)):hover { background-color: var(--gb-tint2) !important; border-color: var(--gb-edge2) !important; box-shadow: inset 0 0 18px rgba(201,182,255,.18), 0 0 26px rgba(143,216,255,.28) !important; }
html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)):hover::before { opacity: 1; }
html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)):focus-visible { outline: 2px solid var(--gb-fg) !important; outline-offset: 4px; }
html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)):disabled { opacity: .45; cursor: not-allowed; }
html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)):disabled::before { animation: none !important; filter: grayscale(1); }
@keyframes gb-iri { to { --iri: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  html.gb :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div))::before, html.gb :is(input[type=submit], input[type=button]) { animation: none !important; }
  html.gb :is(button, input[type=submit], input[type=button], a[role=button], .btn, .button, [class*="btn"], [class*="-cta"]), html.gb :is(button, input[type=submit], input[type=button], a[role=button], .btn, .button, [class*="btn"], [class*="-cta"])::before { transition: none !important; }
}
/* no-overlap: let button rows wrap instead of stacking */
html.gb :has(> :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div)) + :is(button:not([data-glass-skip]), input[type=submit], input[type=button], a[role=button], .btn, .button, a.btn, a.button, [class*="btn"]:not(svg *):not(:has(a, button, input)):not(body):not(html), [class*="-cta"]:not(:has(a, button, input)):not(section):not(div))) { flex-wrap: wrap; gap: max(.5rem, 0px); }
/* === end glass buttons === */
/* === Sandbox Live frosted glass (draft 4 Nov 2026): the single shared button style for PayPay World Sandbox Live. Use class="pw-glass". === */
html.gb .pw-glass, .pw-glass { --gb-fg:#F2ECE0; color:var(--gb-fg); background:rgba(21,22,28,.55); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(242,236,224,.35); border-radius:12px; padding:.5em 1em; font:inherit; font-weight:600; text-shadow:0 0 6px rgba(5,6,12,.85), 0 1px 1px rgba(5,6,12,.9); cursor:pointer; transition:background .15s ease, border-color .15s ease; }
/* inner tint .55 dark + halo keeps #F2ECE0 text above 4.5:1 (WCAG AA) over light or busy backgrounds */
html.gb .pw-glass:hover, .pw-glass:hover { background:rgba(21,22,28,.68); border-color:rgba(242,236,224,.6); }
html.gb .pw-glass:focus-visible, .pw-glass:focus-visible { outline:3px solid #FFD166; outline-offset:3px; }
html.gb .pw-glass:disabled, .pw-glass:disabled, .pw-glass[aria-disabled=true] { cursor:not-allowed; opacity:1; color:#C9C3B8; background:rgba(21,22,28,.75); border-style:dashed; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.gb .pw-glass, .pw-glass { background:#1B1D26; } }
@media (prefers-reduced-motion: reduce) { html.gb .pw-glass, .pw-glass { transition:none; } }
/* === Section colour edges (draft 4 Nov 2026, palette confirmed). Colour goes ACROSS sibling sections, not down:
   root stack red; sibling sections by position 1 red, 2 orange, 3 yellow, 4 green, 5 blue, 6 purple, 7+ white; drilling down inherits the section colour.
   Driven by data-section-colour (1..7); depth is data-depth and is shown only by the "Step X of Y" label. Change colours only in this block. === */
:root { --pw-sec-1:#FF4D4D; --pw-sec-2:#FF9F1C; --pw-sec-3:#FFE14D; --pw-sec-4:#3DDC84; --pw-sec-5:#4DA3FF; --pw-sec-6:#B57BFF; --pw-sec-7:#FFFFFF; }
/* edge 2px + dark outer ring so yellow/white stay distinct against the frosted fill (rgba(21,22,28,.55)) */
.pw-glass[data-section-colour] { border-width:2px; border-style:solid; box-shadow:0 0 0 1px rgba(5,6,12,.9); }
.pw-glass[data-section-colour="1"] { border-color:var(--pw-sec-1); } .pw-glass[data-section-colour="2"] { border-color:var(--pw-sec-2); }
.pw-glass[data-section-colour="3"] { border-color:var(--pw-sec-3); } .pw-glass[data-section-colour="4"] { border-color:var(--pw-sec-4); }
.pw-glass[data-section-colour="5"] { border-color:var(--pw-sec-5); } .pw-glass[data-section-colour="6"] { border-color:var(--pw-sec-6); }
.pw-glass[data-section-colour="7"] { border-color:var(--pw-sec-7); }
.pw-step { font-size:.85em; font-weight:600; margin-right:.5em; }
/* === Sandbox Live layout rule (draft 4 Nov 2026): buttons never overlap. Every button group stacks downward from the top-left,
   in a flex column that wraps into a further column when height runs out. Gap at least 8px, tap target at least 44px. === */
.pw-glass { min-height:44px; min-width:44px; box-sizing:border-box; margin:0; }
html.gb main.play .pw-btns, html.gb main.play :is(p, div, li, summary, form, section, article, td):has(> .pw-glass) {
  display:flex; flex-direction:column; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; align-content:flex-start; gap:8px; }
/* === Stack navigation (draft): current stack slides off left, next slides in; Back reverses. Reduced motion: quick fade. === */
.pw-stacks { position:relative; overflow:hidden; }
.pw-stack { display:flex; flex-direction:column; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:8px; }
.pw-stack[hidden] { display:none; }
.pw-stack.pw-in-right { animation:pw-in-right .25s ease both; } .pw-stack.pw-in-left { animation:pw-in-left .25s ease both; }
@keyframes pw-in-right { from { transform:translateX(100%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes pw-in-left { from { transform:translateX(-100%); opacity:0; } to { transform:none; opacity:1; } }
.pw-stack.pw-fade { animation:pw-fade .12s linear both; } @keyframes pw-fade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .pw-stack.pw-in-right, .pw-stack.pw-in-left { animation:pw-fade .12s linear both; } }
/* === Pale red border glow on non-button elements of the main screen (4 Nov 2026). Buttons keep their section-colour edge. === */
:root { --pw-glow-red: rgba(255,120,120,.55); }
html.gb main > *:not(button):not(.pw-glass), html.gb header > *:not(button):not(.pw-glass):not(nav), html.gb .pw-test, html.gb .pw-notice { box-shadow:0 0 6px 1px var(--pw-glow-red); border-radius:8px; }