/* Diddy Kong Online. One N64 pixel = --u CSS px (320 px wide original).
   All lettering is the cartridge's own fonts, drawn as pixel canvases. */
:root {
  /* The play frame: the whole screen on phones, a centred 9:16 column when the
     screen is wider (desktop, tablets); margins show a world backdrop. */
  --fw: 100vw;
  --u: calc(var(--fw) / 320);
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --aperture: calc(var(--fw) * 0.75);          /* the original 4:3 view at the top */
  --panel: linear-gradient(180deg, rgba(40, 84, 214, .86), rgba(14, 30, 118, .88));
  --panel-edge: #a9ccff;
  --gold: #ffd83a;
  --shadow: 0 calc(var(--u) * 2) 0 rgba(0, 0, 20, .55);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff;
  font: 700 16px/1.2 "Trebuchet MS", system-ui, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus { outline: none; }
button:focus-visible { outline: calc(var(--u) * 2) solid var(--gold); outline-offset: 2px; }
body.pad-nav button:focus { outline: calc(var(--u) * 2) solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

/* The game fills the whole screen; menus float over the live world. */
#stage { position: fixed; inset: 0; background: #000; }
#canvas { display: block; width: 100%; height: 100%; image-rendering: auto; outline: none; }
#shade {
  position: fixed; inset: 0; pointer-events: none; transition: opacity .35s;
  background: radial-gradient(120% 80% at 50% 35%, rgba(0, 10, 40, .15), rgba(0, 5, 25, .72));
}
body[data-screen="lobby"] #shade, body[data-screen="race"] #shade { opacity: 0; }

/* ROM text */
.gt { display: inline-flex; line-height: 0; }
.gt canvas {
  height: calc(var(--h) * var(--u) * var(--s, 1)); width: auto;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 calc(var(--u) * 1) 0 rgba(0, 0, 20, .7));
}
.gt.fallback { line-height: 1; font-size: calc(var(--u) * 12 * var(--s, 1)); letter-spacing: .02em; text-transform: uppercase; }
img.tex { image-rendering: pixelated; display: block; }

/* Screens */
.screen {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
  padding: calc(var(--top) + var(--u) * 10) calc(var(--u) * 10) calc(var(--bottom) + var(--u) * 10);
  animation: in .25s ease-out;
}
@keyframes in { from { opacity: 0; transform: scale(.97); } }
.panel {
  background: var(--panel); border: calc(var(--u) * 1.5) solid var(--panel-edge);
  border-radius: calc(var(--u) * 7); box-shadow: var(--shadow), inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .18);
  padding: calc(var(--u) * 6) calc(var(--u) * 10);
}
.heading { display: flex; justify-content: center; }
.row { display: flex; gap: calc(var(--u) * 8); justify-content: center; flex-wrap: wrap; }

.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5);
  min-height: 48px; min-width: calc(var(--u) * 84);
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  background: var(--panel); border: calc(var(--u) * 1.5) solid var(--panel-edge);
  border-radius: calc(var(--u) * 8); box-shadow: var(--shadow), inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .2);
  transition: transform .08s, filter .08s;
}
.gbtn:active, .gbtn.pressed { transform: translateY(calc(var(--u) * 2)) scale(.97); box-shadow: none; }
.gbtn.go { background: linear-gradient(180deg, #ff9d2e, #d24a0e); border-color: #ffe2a0; }
.gbtn.quiet { background: rgba(0, 10, 50, .55); border-color: rgba(169, 204, 255, .5); }
.gbtn[disabled] { filter: grayscale(.9) brightness(.6); pointer-events: none; }
.gbtn.big { min-height: 64px; min-width: calc(var(--u) * 180); }
.selected-bounce { animation: bounce .6s ease-in-out infinite alternate; }
@keyframes bounce { to { transform: translateY(calc(var(--u) * -3)); } }

/* Boot (plain: fonts are not available until the ROM is read) */
.boot-card { text-align: center; display: grid; gap: 14px; max-width: 320px; }
.boot-title { margin: 0; font-size: 26px; letter-spacing: .08em; color: var(--gold); text-shadow: 0 3px 0 #7a2c00; }
#boot-status { margin: 0; font-size: 17px; }
.boot-small { margin: 0; font-size: 12px; opacity: .7; font-weight: 500; }
.boot-button { display: inline-block; padding: 14px 22px; border-radius: 12px; background: var(--panel); border: 2px solid var(--panel-edge); cursor: pointer; }
.boot-button input { display: none; }

/* Title */
.logo { width: calc(var(--u) * 151 * 1.8); image-rendering: pixelated; filter: drop-shadow(0 calc(var(--u) * 3) 0 rgba(0, 0, 30, .6)); }
.blink { margin-top: calc(var(--u) * 40); --s: 1.6; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* In the lower half, below the original 4:3 view and in thumb reach. */
#screen-title { cursor: pointer; justify-content: flex-end; padding-bottom: calc(var(--bottom) + var(--u) * 50); }

/* Racer select */
.racer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 5); width: min(100%, calc(var(--u) * 290)); }
.racer {
  aspect-ratio: 1; border-radius: calc(var(--u) * 4); position: relative; overflow: hidden;
  border: calc(var(--u) * 1.5) solid rgba(255, 255, 255, .5); background: #04106b; box-shadow: var(--shadow);
  transition: transform .12s;
}
.racer img { width: 100%; height: 100%; }
.racer[aria-selected="true"] { border-color: var(--gold); transform: scale(1.08); z-index: 1; box-shadow: 0 0 0 calc(var(--u) * 2) #ff7b1a, var(--shadow); }
.racer.taken img { filter: grayscale(1) brightness(.45); }
.racer-name { min-height: calc(var(--u) * 34); display: flex; align-items: center; }

/* Keypad (name + room code) */
.entry { min-width: calc(var(--u) * 180); min-height: calc(var(--u) * 34); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); }
.entry .cursor { display: block; width: calc(var(--u) * 7); height: calc(var(--u) * 2.5); margin-top: calc(var(--u) * 14); background: var(--gold); animation: blink .8s steps(2) infinite; }
.code-slots { display: flex; gap: calc(var(--u) * 6); }
.code-slot { width: calc(var(--u) * 26); height: calc(var(--u) * 30); display: grid; place-items: center; border-bottom: calc(var(--u) * 2) solid var(--panel-edge); }
.code-slot.current { border-color: var(--gold); }
.keypad { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--u) * 3.5); width: min(100%, calc(var(--u) * 296)); }
.keypad.code { grid-template-columns: repeat(8, 1fr); }
.key {
  aspect-ratio: 1; min-height: 40px; display: grid; place-items: center;
  background: rgba(6, 18, 90, .78); border: calc(var(--u) * 1) solid rgba(169, 204, 255, .65); border-radius: calc(var(--u) * 5);
  box-shadow: 0 calc(var(--u) * 1.5) 0 rgba(0, 0, 20, .6);
}
.key:active { background: #ff8a1e; transform: translateY(calc(var(--u) * 1.5)); box-shadow: none; }
.key.wide { grid-column: span 2; aspect-ratio: auto; }

/* Host / Join */
.me { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.me img { width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: calc(var(--u) * 3); }
.menu-list { display: grid; gap: calc(var(--u) * 9); }
.wait { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }

/* Menus dock at the bottom, where thumbs are; the live game shows above. */
.screen.dock { justify-content: flex-end; gap: 10px; padding: calc(var(--top) + 12px) 12px calc(var(--bottom) + 14px); }
.dock > * { width: 100%; max-width: 480px; }
.dock .heading { width: auto; }
.dock .gbtn { min-height: 56px; }
.dock .row .gbtn { flex: 1; }
.racer-grid { width: 100%; max-width: 480px; gap: 6px; }
.racer-name { justify-content: center; min-height: 44px; }
.keypad, .keypad.code { width: 100%; max-width: 480px; gap: 6px; }
.key { min-height: 46px; width: 100%; min-width: 0; border-radius: 8px; }
.entry { width: 100%; min-height: 56px; }
.me { justify-content: center; min-height: 64px; cursor: pointer; }
.me img { width: 44px; height: 44px; border-radius: 6px; }
.menu-list { gap: 10px; }
.menu-list .gbtn { width: 100%; min-height: 72px; }
.tools { display: flex; gap: 6px; justify-content: center; }
.tools .gbtn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 4px; border-radius: 10px; }

/* Lobby: a slim strip on top, one dock under the original 4:3 view, the rest is driving. */
#screen-lobby, #screen-race { justify-content: flex-start; padding: 0; pointer-events: none; animation: none; }
#screen-lobby > * { pointer-events: auto; }
.lobby-bar {
  position: absolute; left: 6px; right: 6px; top: calc(var(--top) + 6px);
  display: flex; gap: 5px; align-items: stretch; pointer-events: none;
}
.lobby-bar > * { pointer-events: auto; }
.room-code { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 9px; border-radius: 10px; }
.roster { display: flex; gap: 4px; flex: 1; min-width: 0; justify-content: flex-end; }
.chip-player {
  position: relative; display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 3px; border-radius: 8px; background: rgba(4, 14, 70, .72); border: 1px solid rgba(169, 204, 255, .6); min-width: 44px;
}
.chip-player img { width: 30px; height: 30px; border-radius: 4px; }
.chip-player .gt { max-width: 100%; overflow: hidden; }
.chip-player.me { border-color: var(--gold); }
.chip-player.offline img { filter: grayscale(1) brightness(.5); }
.chip-player .crown { position: absolute; top: -7px; right: -4px; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 0 #000); }
.lobby-dock { position: absolute; left: 8px; right: 8px; top: calc(var(--aperture) + 6px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.lobby-row { display: flex; gap: 6px; }
.lobby-next { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 4px 10px; min-height: 52px; border-radius: 12px; text-align: left; overflow: hidden; }
.lobby-next .what { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; min-width: 0; }
/* Lettering in the lobby bar and dock shrinks to fit rather than pushing buttons off screen. */
.lobby-dock .gt, .lobby-bar .gt { min-width: 0; max-width: 100%; }
.lobby-dock .gt canvas, .lobby-bar .gt canvas { width: calc(var(--w) * var(--u) * var(--s, 1)); max-width: 100%; height: auto; }
.lobby-next .kart { flex: none; margin-left: auto; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: #bfefff; display: flex; flex-direction: column; }
.lobby-next .kart img { width: 100%; height: 50%; object-fit: cover; }
.lobby-wait { display: flex; justify-content: center; padding: 8px 10px; border-radius: 12px; animation: pulse 1.4s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .55; } }
#lobby-go .gbtn { height: 100%; min-width: 0; padding: 0 16px; }
#lobby-go:empty { display: none; }

/* Host race setup sheet */
.sheet { justify-content: flex-end; gap: calc(var(--u) * 6); background: rgba(0, 4, 30, .55); padding-top: calc(var(--top) + var(--u) * 12); }
.tabs { display: flex; gap: calc(var(--u) * 5); }
.tabs .gbtn { min-width: calc(var(--u) * 90); }
.tabs .gbtn[aria-selected="false"] { filter: brightness(.55); }
.track-list {
  width: min(100%, calc(var(--u) * 300)); flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y;
  display: flex; flex-direction: column; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 7); background: rgba(3, 10, 60, .78); border: calc(var(--u) * 1.5) solid var(--panel-edge);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.world { padding: calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 1); }
.track { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: calc(var(--u) * 5); background: rgba(40, 84, 214, .35); }
.track[aria-selected="true"] { background: linear-gradient(90deg, #ff9d2e, #d24a0e); box-shadow: inset 0 0 0 calc(var(--u) * 1.2) #ffe2a0; }
.track .icons { display: flex; gap: calc(var(--u) * 2); }
.track .icons img { height: calc(var(--u) * 14); opacity: .85; }
.vehicles { display: flex; gap: calc(var(--u) * 8); }
.vehicle { width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: calc(var(--u) * 8); overflow: hidden; border: calc(var(--u) * 1.5) solid rgba(255, 255, 255, .5); background: #bfefff; display: flex; flex-direction: column; }
.vehicle img { width: 100%; height: 50%; object-fit: cover; }
.vehicle[aria-selected="true"] { border-color: var(--gold); box-shadow: 0 0 0 calc(var(--u) * 2) #ff7b1a; transform: scale(1.06); }
.vehicle[disabled] { opacity: .25; }

/* Results */
.results { display: grid; gap: calc(var(--u) * 5); width: min(100%, calc(var(--u) * 260)); }
.result { display: grid; grid-template-columns: calc(var(--u) * 30) calc(var(--u) * 34) 1fr; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 4) calc(var(--u) * 8); }
.result img.place { height: calc(var(--u) * 26); width: auto; justify-self: center; }
.result img.portrait { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: calc(var(--u) * 3); }
.result.me { border-color: var(--gold); }
.result.first { animation: bounce .5s ease-in-out infinite alternate; }

/* Touch controls: over the extra world below the original view. Sized in
   viewport units so they grow with the phone. body.lefty mirrors them. */
.controls {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
  top: calc(var(--aperture) + 6px);
  --btn: clamp(80px, calc(var(--fw) * .25), 124px); --btn2: clamp(58px, calc(var(--fw) * .18), 90px); --btn3: clamp(42px, calc(var(--fw) * .12), 60px);
  --edge: max(14px, calc(var(--fw) * .04));
  --lift: calc(var(--bottom) + max(24px, calc(var(--fw) * .07))); /* clear of the bottom edge */
}
body[data-screen="lobby"] .controls { top: calc(var(--aperture) + 120px); }
.disc-zone { position: absolute; left: 0; bottom: 0; width: 55%; height: 100%; pointer-events: auto; touch-action: none; }
.disc {
  /* A fixed N64-style stick: octagonal gate in the game's menu-panel blue,
     rim lit green on the gas and red when braking. */
  --r: clamp(66px, calc(var(--fw) * .22), 116px); --gate: var(--panel-edge);
  --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  left: calc(var(--r) + var(--edge)); top: calc(100% - var(--r) - var(--edge) - var(--lift)); transform: translate(-50%, -50%);
  filter: drop-shadow(0 calc(var(--u) * 2) 0 rgba(0, 0, 20, .55));
}
.disc::before { content: ''; position: absolute; inset: 0; clip-path: var(--oct); background: #0b1030; }
.disc-rim { position: absolute; inset: calc(var(--u) * 1.5); clip-path: var(--oct); background: var(--gate); z-index: 1; transition: background .1s; }
.disc-face {
  position: absolute; inset: calc(var(--u) * 3.5); clip-path: var(--oct); z-index: 1;
  background: radial-gradient(circle, rgba(0, 0, 30, .55) 0 20%, rgba(0, 0, 30, 0) 60%), var(--panel);
}
.disc-knob {
  /* The N64 stick cap: ridged grey, dark outline, sitting proud of the gate. */
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; border-radius: 50%;
  border: calc(var(--u) * 1.5) solid #0b1030;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%),
    repeating-radial-gradient(circle, #b9c0cb 0 5%, #939bab 5% 10%);
  box-shadow: 0 calc(var(--u) * 2.5) 0 rgba(0, 0, 20, .55), inset 0 calc(var(--u) * -2) 0 rgba(0, 0, 30, .3);
}
.disc.active .disc-knob { box-shadow: 0 calc(var(--u) * 1) 0 rgba(0, 0, 20, .55), inset 0 calc(var(--u) * -2) 0 rgba(0, 0, 30, .3); }
/* Not .gas/.brake: .brake is the BRAKE button's class and would resize the stick. */
.disc.on-gas { --gate: #7cff6b; }
.disc.on-brake { --gate: #ff5a4a; }
.disc:not(.active) { opacity: .85; }
.buttons { position: absolute; right: 0; bottom: 0; width: 45%; height: 100%; pointer-events: none; }
.pad-btn {
  /* N64 button colours, drawn like the game's own HUD art: dark outline,
     a bright rim, a glossy top and a solid drop. */
  position: absolute; pointer-events: auto; border-radius: 50%; display: grid; place-items: center; touch-action: none;
  border: calc(var(--u) * 1.5) solid #0b1030; transition: transform .05s;
  box-shadow: 0 calc(var(--u) * 2.5) 0 rgba(0, 0, 20, .55),
    inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .55),
    inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .28),
    inset 0 calc(var(--u) * -3) 0 rgba(0, 0, 30, .3);
}
.pad-btn::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; } /* forgiving hit area */
.pad-btn.pressed { transform: translateY(calc(var(--u) * 2)) scale(.96); filter: brightness(1.2); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .55), inset 0 calc(var(--u) * 3) 0 rgba(0, 0, 30, .25); }
/* Labels say what the button does; long words shrink to fit the circle. */
.pad-btn { container-type: inline-size; }
.pad-btn .gt canvas { --s: 1.3; height: auto; width: min(calc(var(--w) * var(--u) * var(--s)), 80cqi); }
.hop { width: var(--btn); height: var(--btn); right: var(--edge); bottom: calc(var(--edge) + var(--lift)); background: radial-gradient(circle at 35% 30%, #aab0bc, #4d5566); }
.hop .gt canvas { --s: 1.6; }
.brake { width: var(--btn2); height: var(--btn2); right: calc(var(--edge) + var(--btn) + 8px); bottom: calc(var(--edge) * .6 + var(--lift)); background: radial-gradient(circle at 35% 30%, #4fd06a, #147a2c); }
.item { width: var(--btn2); height: var(--btn2); right: calc(var(--edge) + var(--btn) * .62); bottom: calc(var(--edge) + var(--btn) + 10px + var(--lift)); background: radial-gradient(circle at 35% 30%, #8a8f99, #3b414d); }
.cam { width: var(--btn3); height: var(--btn3); right: calc(var(--edge) * .7); bottom: calc(var(--edge) + var(--btn) + var(--btn2) * .55 + var(--lift)); background: radial-gradient(circle at 35% 30%, #ffe45c, #b98a00); }
.cam .gt canvas { --s: 1.2; }
body.lefty .disc-zone { left: auto; right: 0; }
body.lefty .disc { left: calc(100% - var(--r) - var(--edge)); }
body.lefty .buttons { right: auto; left: 0; transform: scaleX(-1); }
body.lefty .pad-btn .gt { transform: scaleX(-1); }

/* Host-only race control, just under the original 4:3 view. */
.race-host { position: fixed; z-index: 22; left: 50%; transform: translateX(-50%); top: calc(var(--aperture) + 8px); }
body:not([data-screen="race"]) .race-host { display: none; }
.race-host .gbtn { min-height: 36px; min-width: 0; padding: 4px calc(var(--u) * 8); }

/* Overlays */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0, 0, 20, .55); animation: in .2s; }
.overlay .panel { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 12) calc(var(--u) * 20); }
.count .gt canvas { --s: 3; }
.chip {
  position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); top: calc(var(--aperture) + var(--u) * 2);
  padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: 99px; background: rgba(4, 14, 70, .85); border: 1px solid var(--panel-edge);
}
.chip.warn { background: rgba(140, 30, 10, .9); }
#toast { top: auto; bottom: calc(var(--bottom) + 30%); }
.corner { position: fixed; z-index: 22; right: calc(var(--u) * 4); bottom: calc(var(--bottom) + var(--u) * 4); display: flex; gap: 6px; }
body:not([data-screen="title"]):not([data-screen="boot"]) .corner { display: none; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 8, 40, .55); border: 1px solid rgba(169, 204, 255, .5); font-size: 17px; line-height: 1; }
.icon-btn[aria-pressed="true"] { opacity: .45; }

@media (min-aspect-ratio: 9/16) { :root { --fw: calc(100dvh * 9 / 16); } }
/* A transform makes #frame the containing block for every fixed layer inside. */
#frame { position: fixed; top: 0; bottom: 0; left: 50%; width: var(--fw); transform: translateX(-50%); overflow: hidden; background: #000; }
body {
  background-color: #06103a; background-image: var(--backdrop, none); background-size: 128px auto;
  image-rendering: pixelated; transition: background-image .4s;
}
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 30, .15), rgba(0, 0, 30, .6)); pointer-events: none; }
@media (min-aspect-ratio: 9/16) { #frame { box-shadow: 0 0 0 3px rgba(169, 204, 255, .7), 0 0 40px 10px rgba(0, 0, 20, .7); } }
#results-footer { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); }
#overlay-stop { z-index: 23; }