/* OldGames Cable Club skin. Scoped to body.cc so the stock GBmulator files can
   keep their runtime wiring while this page owns the layout. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --nx-void:#06060c;
  --nx-deep:#0a0a14;
  --nx-glass:rgba(16,17,30,.78);
  --nx-glass2:rgba(22,24,42,.62);
  --nx-stroke:rgba(120,140,220,.22);
  --nx-stroke2:rgba(120,140,220,.38);
  --nx-cyan:#00e5ff;
  --nx-violet:#8b5cf6;
  --nx-magenta:#ff2db8;
  --nx-lime:#a3ff3c;
  --nx-amber:#ffb01f;
  --nx-txt:#eef0ff;
  --nx-txt2:#a7adc9;
  --nx-txt3:#677092;
  --nx-disp:'Orbitron',sans-serif;
  --nx-ui:'Rajdhani',sans-serif;
}

html,
body.cc {
  width:100%;
  height:100%;
  overflow:hidden;
}

body.cc {
  margin:0;
  background:var(--nx-void) !important;
  color:var(--nx-txt);
  font-family:var(--nx-ui);
  --cc-pad-opacity:.92;
  --cc-top-safe:92px;
  --cc-bottom-safe:172px;
}

body.cc::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(48vw 42vw at 12% -12%, rgba(27,59,209,.25), transparent 62%),
    radial-gradient(42vw 40vw at 90% 4%, rgba(122,31,217,.22), transparent 64%),
    radial-gradient(46vw 40vw at 76% 108%, rgba(255,45,184,.16), transparent 64%);
}

body.cc::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.45;
  background-image:
    linear-gradient(rgba(120,140,220,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,220,.055) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

body.cc #emscripten-status {
  z-index:5;
  color:var(--nx-txt2);
  font:700 14px var(--nx-ui);
  letter-spacing:.4px;
}

/* Hide GBmulator's old overlay menu; the Cable Club HUD owns these controls. */
body.cc #menu,
body.cc #open-menu,
body.cc #open-rom,
body.cc #reset-rom,
body.cc #go-fullscreen {
  display:none !important;
}

/* Emulator stage */
body.cc #gb {
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  user-select:none;
}

body.cc.cc-controls-hidden #gb {
  --cc-bottom-safe:28px;
}

body.cc #gb-screen-border {
  position:fixed !important;
  left:50%;
  top:calc(var(--cc-top-safe) + ((100vh - var(--cc-top-safe) - var(--cc-bottom-safe)) / 2));
  z-index:10;
  transform:translate(-50%, -50%);
  padding:clamp(10px, 1.5vw, 22px) !important;
  border-radius:18px !important;
  background:linear-gradient(145deg, rgba(20,24,38,.96), rgba(7,9,18,.96)) !important;
  border:1px solid rgba(120,140,220,.24);
  box-shadow:0 18px 50px rgba(0,0,0,.48), 0 0 0 1px rgba(0,229,255,.08);
}

/* Soft colored glow behind the bezel so the space around the screen reads as
   part of the design instead of a flat black gap. */
body.cc #gb-screen-border::before {
  content:"";
  position:absolute;
  inset:-15%;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(60% 60% at 50% 45%, rgba(0,229,255,.20), rgba(139,92,246,.12) 55%, transparent 75%);
  filter:blur(18px);
  pointer-events:none;
}

/* GB/GBC native resolution is 160x144 (10:9). Size the canvas to FILL the
   available space at that ratio instead of a fixed pixel scale — a small
   fixed-scale canvas centered in a much bigger box is what read as big black
   bars/frames on the sides. image-rendering:pixelated keeps the upscale crisp. */
body.cc canvas.emscripten {
  display:block;
  background:#0b0e10;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-radius:8px;
  width:min(calc(100vw - 56px), calc((100vh - var(--cc-top-safe) - var(--cc-bottom-safe) - 48px) * 10 / 9));
  height:min(calc(100vh - var(--cc-top-safe) - var(--cc-bottom-safe) - 48px), calc((100vw - 56px) * 9 / 10));
}

body.cc.cc-controls-hidden canvas.emscripten {
  width:min(calc(100vw - 56px), calc((100vh - 140px) * 10 / 9));
  height:min(calc(100vh - 140px), calc((100vw - 56px) * 9 / 10));
}

/* Top HUD */
#cc-hud {
  position:fixed;
  top:10px;
  left:10px;
  right:10px;
  z-index:10000;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(154px, 1fr) minmax(150px, 210px) minmax(68px, 86px) minmax(104px, 132px) minmax(84px, 108px) minmax(68px, 88px) minmax(240px, 1.25fr) minmax(150px, .9fr);
  gap:8px;
  align-items:end;
  padding:11px 12px;
  color:var(--nx-txt);
  background:linear-gradient(180deg, rgba(15,17,32,.92), rgba(13,15,28,.74));
  border:1px solid var(--nx-stroke);
  border-radius:14px;
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 34px rgba(0,229,255,.07), inset 0 1px 0 rgba(255,255,255,.06);
  animation:cc-in .3s cubic-bezier(.2,.8,.2,1) both;
}

/* glowing link-cable accent line along the top edge of the bar */
#cc-hud::before {
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:2px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, transparent, var(--nx-cyan), var(--nx-violet) 50%, var(--nx-magenta), transparent);
  box-shadow:0 0 12px rgba(0,229,255,.45);
  opacity:.9;
  pointer-events:none;
}

@keyframes cc-in {
  from { opacity:0; transform:translateY(-8px); }
  to { opacity:1; transform:none; }
}

/* Embedded inside the lobby (pokemon-lobby.html): the lobby chrome already shows the brand,
   the room code and a Leave button, so the panel drops those duplicates and uses a leaner
   flex layout (the rigid 8-col grid left gaps once items were hidden). */
body.cc-embed #cc-hud {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:8px 10px;
  grid-template-columns:none;
}
body.cc-embed #cc-hud .cc-brand,
body.cc-embed #cc-hud .cc-room-field { display:none !important; }
body.cc-embed #cc-hud .cc-gamefield { flex:1 1 220px; min-width:170px; }
body.cc-embed #cc-hud > #cc-load,
body.cc-embed #cc-hud > #cc-connect,
body.cc-embed #cc-hud > #cc-dc { flex:0 0 auto; }
body.cc-embed #cc-hud .cc-savebar {
  flex:1 1 100%;
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:6px;
}
body.cc-embed #cc-hud .cc-savebar button { height:32px; padding:0 8px; font-size:11px; min-width:0; opacity:.92; }
body.cc-embed #cc-hud .cc-status { flex:1 1 100%; }

#cc-hud .cc-brand {
  align-self:center;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

/* link-cable emblem badge */
#cc-hud .cc-emblem {
  flex:none;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:radial-gradient(120% 120% at 30% 18%, rgba(0,229,255,.20), rgba(139,92,246,.13) 55%, rgba(255,45,184,.13));
  border:1px solid rgba(120,140,220,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 4px 14px rgba(0,229,255,.18);
}
#cc-hud .cc-emblem svg {
  display:block;
  filter:drop-shadow(0 0 5px rgba(0,229,255,.45));
  animation:cc-emblem-bob 3.2s ease-in-out infinite;
}
@keyframes cc-emblem-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1.6px); } }

#cc-hud .cc-brand-txt { min-width:0; line-height:1.05; }

/* two-line logo lockup: "Pokémon" kicker over a big gradient "CABLE LINK" */
#cc-hud .cc-kicker {
  display:block;
  font:700 9px var(--nx-disp);
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--nx-cyan);
  opacity:.78;
  margin-bottom:2px;
  white-space:nowrap;
}

#cc-hud .cc-brand strong {
  display:block;
  font:900 15px var(--nx-disp);
  letter-spacing:.6px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:linear-gradient(100deg, var(--nx-cyan), #b388ff 34%, var(--nx-magenta) 66%, var(--nx-cyan));
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:cc-sheen 7s linear infinite;
}
@keyframes cc-sheen { to { background-position:220% 0; } }

#cc-hud .cc-field {
  min-width:0;
  margin:0;
  color:var(--nx-txt3);
  font:700 10px var(--nx-ui);
  letter-spacing:1px;
  text-transform:uppercase;
}

#cc-hud .cc-field span {
  display:block;
  margin:0 0 3px;
}

#cc-hud select,
#cc-hud input,
#cc-settings select,
#cc-settings input {
  width:100%;
  box-sizing:border-box;
  min-width:0;
  color:var(--nx-txt);
  background:rgba(5,7,16,.88);
  border:1px solid var(--nx-stroke2);
  border-radius:8px;
  outline:none;
  font:700 14px var(--nx-ui);
}

#cc-hud select,
#cc-hud input {
  height:38px;
  padding:8px 10px;
}

#cc-hud input {
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-family:var(--nx-disp);
}

#cc-hud select:focus,
#cc-hud input:focus,
#cc-settings select:focus,
#cc-settings input:focus {
  border-color:var(--nx-cyan);
  box-shadow:0 0 0 3px rgba(0,229,255,.14);
}

/* ── Visual game picker (cover thumbnails) ── */
#cc-hud .cc-gamefield { min-width:0; margin:0; color:var(--nx-txt3); font:700 10px var(--nx-ui); letter-spacing:1px; text-transform:uppercase; }
#cc-hud .cc-gamefield > span { display:block; margin:0 0 3px; }
#cc-hud .cc-gamepick { position:relative; }
#cc-hud .cc-gamepick #cc-game { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#cc-hud .cc-gamepick-btn {
  width:100%; height:38px; box-sizing:border-box; display:flex; align-items:center; gap:8px; padding:0 8px;
  color:var(--nx-txt); background:rgba(5,7,16,.88); border:1px solid var(--nx-stroke2); border-radius:8px; cursor:pointer;
  font:700 13px var(--nx-ui); text-transform:none; letter-spacing:.2px; transition:border-color .15s, box-shadow .15s;
}
#cc-hud .cc-gamepick.open .cc-gamepick-btn, #cc-hud .cc-gamepick-btn:hover { border-color:var(--nx-cyan); box-shadow:0 0 0 3px rgba(0,229,255,.12); }
#cc-hud .cc-gp-cover { width:26px; height:24px; flex:none; border-radius:5px; background:#15151f center/cover no-repeat; box-shadow:0 2px 6px rgba(0,0,0,.5); }
#cc-hud .cc-gp-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
#cc-hud .cc-gp-cv { flex:none; color:var(--nx-txt3); font-size:11px; transition:transform .15s; }
#cc-hud .cc-gamepick.open .cc-gp-cv { transform:rotate(180deg); }
#cc-hud .cc-gamemenu {
  position:absolute; left:0; top:calc(100% + 6px); z-index:10001; min-width:236px; max-width:300px; max-height:340px; overflow-y:auto;
  padding:6px; border-radius:13px; background:linear-gradient(180deg, rgba(16,18,34,.98), rgba(10,11,22,.98));
  border:1px solid var(--nx-stroke2); box-shadow:0 18px 44px rgba(0,0,0,.6), 0 0 22px rgba(0,229,255,.08);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); animation:cc-in .16s ease;
}
#cc-hud .cc-gamemenu[hidden] { display:none; }
#cc-hud .cc-gamemenu::-webkit-scrollbar { width:7px; }
#cc-hud .cc-gamemenu::-webkit-scrollbar-thumb { background:rgba(120,140,220,.4); border-radius:8px; }
#cc-hud .cc-gm-item {
  width:100%; display:flex; align-items:center; gap:10px; padding:7px 8px; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--nx-txt); font:700 13px var(--nx-ui); text-align:left; transition:background .12s;
}
#cc-hud .cc-gm-item + .cc-gm-item { margin-top:2px; }
#cc-hud .cc-gm-item:hover { background:rgba(0,229,255,.1); }
#cc-hud .cc-gm-item.on { background:rgba(124,77,255,.18); }
#cc-hud .cc-gm-cover { width:42px; height:38px; flex:none; border-radius:6px; background:#15151f center/cover no-repeat; box-shadow:0 3px 9px rgba(0,0,0,.5); }
#cc-hud .cc-gm-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cc-hud .cc-gm-sys { flex:none; font:800 9px var(--nx-disp); letter-spacing:.6px; color:#06121a; background:var(--nx-cyan); border-radius:4px; padding:2px 6px; }

#cc-hud button,
#cc-settings button {
  min-width:0;
  margin:0;
  cursor:pointer;
  border:0;
  border-radius:8px;
  font:800 11px var(--nx-disp);
  letter-spacing:.8px;
  text-transform:uppercase;
  transition:transform .08s, filter .15s, opacity .15s, border-color .15s;
}

#cc-hud button {
  height:38px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
  white-space:nowrap;
  line-height:1;
  color:#051018;
  background:linear-gradient(135deg, var(--nx-cyan), #37c7ff);
  box-shadow:0 6px 18px rgba(0,229,255,.22);
}

#cc-hud button > span {
  display:block;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#cc-hud button.cc-ghost,
#cc-settings button.cc-secondary,
#cc-settings .cc-icon-btn {
  color:var(--nx-txt2);
  background:rgba(120,140,220,.09);
  border:1px solid var(--nx-stroke2);
  box-shadow:none;
}

#cc-hud button:hover,
#cc-settings button:hover {
  filter:brightness(1.08);
}

#cc-hud button:active,
#cc-settings button:active {
  transform:translateY(1px);
}

#cc-hud button:disabled {
  opacity:.42;
  cursor:not-allowed;
  filter:grayscale(.45);
}

#cc-hud button.has-save {
  color:var(--nx-lime);
  border-color:rgba(163,255,60,.48);
  background:rgba(163,255,60,.1);
}

/* One-click sound toggle — lives next to Save/Load in the HUD so audio is
   reachable without opening Settings. */
#cc-hud #cc-sound {
  font-size:16px;
}
#cc-hud #cc-sound.cc-sound-on {
  color:var(--nx-lime);
  border-color:rgba(163,255,60,.48);
  background:rgba(163,255,60,.1);
}

/* Connect = the hero call-to-action: richer gradient + a soft pulse while it's ready */
#cc-hud #cc-connect {
  color:#0a0613;
  letter-spacing:1px;
  background:linear-gradient(135deg, var(--nx-cyan), var(--nx-violet) 68%, var(--nx-magenta));
  box-shadow:0 8px 22px rgba(139,92,246,.34), inset 0 1px 0 rgba(255,255,255,.14);
}
#cc-hud #cc-connect:not(:disabled) {
  animation:cc-connect-glow 2.4s ease-in-out infinite;
}
@keyframes cc-connect-glow {
  0%, 100% { box-shadow:0 8px 22px rgba(139,92,246,.32), inset 0 1px 0 rgba(255,255,255,.14); }
  50% { box-shadow:0 8px 28px rgba(0,229,255,.5), inset 0 1px 0 rgba(255,255,255,.14); }
}
#cc-hud #cc-connect:not(:disabled):hover { filter:brightness(1.1); transform:translateY(-1px); }

#cc-hud .cc-savebar {
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
  align-items:end;
}

#cc-hud .cc-savebar button {
  width:100%;
  min-width:0;
  padding:0 6px;
  font-size:clamp(8.5px, .64vw, 10px);
  letter-spacing:.2px;
}

#cc-hud .cc-status {
  min-width:0;
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border-radius:8px;
  color:var(--nx-txt2);
  background:rgba(5,7,16,.66);
  border:1px solid var(--nx-stroke);
  font:700 12px var(--nx-ui);
  overflow:hidden;
}

#cc-status-text {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#cc-hud .cc-dot {
  width:9px;
  height:9px;
  flex:none;
  border-radius:50%;
  background:var(--nx-txt3);
}

#cc-hud.is-idle .cc-dot { background:var(--nx-lime); box-shadow:0 0 10px rgba(163,255,60,.72); }
#cc-hud.is-waiting .cc-dot { background:var(--nx-amber); animation:cc-pulse 1s infinite; }
#cc-hud.is-busy .cc-dot { background:var(--nx-cyan); animation:cc-pulse .8s infinite; }
#cc-hud.is-linked .cc-dot { background:var(--nx-lime); box-shadow:0 0 12px rgba(163,255,60,.82); }
#cc-hud.is-error .cc-dot { background:var(--nx-magenta); box-shadow:0 0 10px rgba(255,45,184,.72); }

@keyframes cc-pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:.35; transform:scale(.65); }
}

/* Settings modal */
#cc-settings[hidden] {
  display:none !important;
}

#cc-settings {
  position:fixed;
  inset:0;
  z-index:10020;
  font-family:var(--nx-ui);
}

#cc-settings .cc-settings-backdrop {
  position:absolute;
  inset:0;
  background:rgba(2,3,9,.62);
  backdrop-filter:blur(5px);
}

#cc-settings .cc-settings-dialog {
  position:absolute;
  top:12px;
  right:12px;
  bottom:12px;
  width:min(520px, calc(100vw - 24px));
  overflow:auto;
  padding:16px;
  color:var(--nx-txt);
  background:linear-gradient(180deg, rgba(15,17,31,.96), rgba(9,10,20,.96));
  border:1px solid var(--nx-stroke2);
  border-radius:14px;
  box-shadow:0 22px 70px rgba(0,0,0,.56);
}

#cc-settings .cc-settings-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

#cc-settings h2,
#cc-settings h3,
#cc-settings p {
  margin:0;
}

#cc-settings h2 {
  font:800 18px var(--nx-disp);
  letter-spacing:1px;
}

#cc-settings p {
  margin-top:4px;
  color:var(--nx-txt3);
  font:700 13px var(--nx-ui);
}

#cc-settings h3 {
  margin:12px 0 10px;
  color:var(--nx-cyan);
  font:800 12px var(--nx-disp);
  letter-spacing:1px;
  text-transform:uppercase;
}

#cc-settings .cc-icon-btn {
  width:32px;
  height:32px;
  flex:none;
}

#cc-settings .cc-settings-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

#cc-settings section {
  min-width:0;
}

#cc-settings .cc-setting-field {
  display:block;
  margin:0 0 10px;
  color:var(--nx-txt3);
  font:800 10px var(--nx-ui);
  letter-spacing:1px;
  text-transform:uppercase;
}

#cc-settings .cc-setting-field > span {
  display:block;
  margin:0 0 4px;
}

#cc-settings select,
#cc-settings input {
  height:36px;
  padding:7px 9px;
}

#cc-settings input[type="range"] {
  padding:0;
  accent-color:var(--nx-cyan);
}

#cc-settings output {
  display:block;
  margin-top:3px;
  color:var(--nx-txt2);
  font:800 12px var(--nx-ui);
  text-align:right;
}

#cc-settings .cc-keymap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:12px;
}

#cc-settings .cc-keymap span {
  min-width:0;
  padding:7px 8px;
  border-radius:7px;
  color:var(--nx-txt2);
  background:rgba(5,7,16,.62);
  border:1px solid var(--nx-stroke);
  font:800 12px var(--nx-ui);
}

#cc-settings .cc-action-row {
  display:flex;
  gap:8px;
  margin-top:12px;
}

#cc-settings .cc-action-row button {
  flex:1;
  height:36px;
}

/* Touch controls dock */
body.cc #gb-controls {
  position:fixed !important;
  left:50%;
  bottom:12px;
  z-index:20;
  box-sizing:border-box;
  width:min(520px, calc(100vw - 24px));
  height:132px !important;
  margin:0 !important;
  padding:12px 16px 16px !important;
  display:flex !important;
  flex-direction:column !important;
  color:var(--nx-txt2);
  background:linear-gradient(180deg, rgba(12,14,26,.78), rgba(8,10,20,.62));
  border:1px solid rgba(120,140,220,.22);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.34);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  opacity:var(--cc-pad-opacity);
  transform:translateX(-50%);
}

body.cc.cc-controls-hidden #gb-controls {
  display:none !important;
}

body.cc #gb-main-buttons {
  height:88px !important;
}

body.cc #gb-start-select-buttons {
  height:28px;
}

body.cc #gb-direction-buttons,
body.cc #gb-round-buttons,
body.cc #gb-start-button-container,
body.cc #gb-select-button-container {
  position:relative;
}

body.cc .gb-direction-button,
body.cc #gb-center,
body.cc .gb-round-button,
body.cc .gb-rectangle-button {
  background:#111522 !important;
  border:1px solid rgba(120,140,220,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.26);
  filter:none !important;
}

body.cc .gb-direction-button,
body.cc #gb-center {
  background:#0e1320 !important;
}

body.cc .gb-direction-button-circle {
  background:rgba(0,229,255,.16) !important;
}

body.cc .gb-round-button {
  color:rgba(238,240,255,.86) !important;
  background:linear-gradient(145deg, #20263a, #101522) !important;
}

body.cc .gb-button:hover {
  filter:brightness(1.15) !important;
}

body.cc .gb-button:active {
  transform:translateY(1px);
  filter:brightness(.78) !important;
}

body.cc .gb-button-label {
  color:rgba(167,173,201,.72) !important;
  font:800 12px var(--nx-ui);
  letter-spacing:.4px;
}

body.cc.cc-pad-compact #gb-controls {
  width:min(390px, calc(100vw - 24px));
  height:112px !important;
  padding:8px 14px 12px !important;
  font-size:12px;
}

body.cc.cc-pad-compact #gb-main-buttons {
  height:74px !important;
}

body.cc.cc-pad-left #gb-controls {
  left:12px;
  transform:none;
}

body.cc.cc-pad-right #gb-controls {
  right:12px;
  left:auto;
  transform:none;
}

@media (max-width:1080px) {
  body.cc {
    --cc-top-safe:132px;
    --cc-bottom-safe:172px;
  }
  #cc-hud {
    grid-template-columns:minmax(132px, 1fr) minmax(150px, 1fr) 74px minmax(100px, .8fr) 92px 72px;
  }
  #cc-hud .cc-savebar,
  #cc-hud .cc-status {
    grid-column:1 / -1;
  }
  #cc-hud .cc-savebar {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:760px) {
  body.cc {
    --cc-top-safe:196px;
    --cc-bottom-safe:136px;
  }
  #cc-hud {
    top:8px;
    left:8px;
    right:8px;
    grid-template-columns:1fr 1fr 78px 82px;
    gap:7px;
    padding:8px;
  }
  #cc-hud .cc-brand,
  #cc-hud .cc-status {
    grid-column:1 / -1;
  }
  #cc-hud .cc-room-field {
    grid-column:1 / span 2;
  }
  #cc-hud .cc-savebar {
    grid-column:1 / -1;
  }
  #cc-hud button {
    padding:0 7px;
    font-size:9px;
    letter-spacing:.2px;
  }
  #cc-hud .cc-savebar button {
    padding:0 6px;
    font-size:9px;
    letter-spacing:.2px;
  }
  body.cc #gb-screen-border {
    padding:9px !important;
    border-radius:14px !important;
  }
  body.cc canvas.emscripten {
    width:min(calc(100vw - 36px), calc((100vh - var(--cc-top-safe) - var(--cc-bottom-safe) - 48px) * 10 / 9));
    height:min(calc(100vh - var(--cc-top-safe) - var(--cc-bottom-safe) - 48px), calc((100vw - 36px) * 9 / 10));
  }
  body.cc #gb-controls {
    width:calc(100vw - 18px);
    bottom:8px;
    height:118px !important;
    padding:9px 12px 13px !important;
  }
  body.cc.cc-pad-left #gb-controls,
  body.cc.cc-pad-right #gb-controls {
    left:9px;
    right:9px;
    transform:none;
  }
  #cc-settings .cc-settings-dialog {
    top:auto;
    right:8px;
    left:8px;
    bottom:8px;
    width:auto;
    max-height:82vh;
    padding:14px;
  }
  #cc-settings .cc-settings-grid {
    grid-template-columns:1fr;
  }
}

/* ======================================================================
   Mappable gamepad (cable-club-gamepad.js)
   - .cc-pressed press animation (on-screen tap OR mapped keyboard key)
   - remap panel injected into the Settings modal's .cc-keymap slot
   ====================================================================== */

/* Press animation: mirror :active (transform + dim) and add an accent glow.
   The transition makes keyboard presses animate the same as taps. */
body.cc .gb-button {
  transition:transform .05s ease, filter .05s ease, box-shadow .08s ease;
}
body.cc .gb-button.cc-pressed {
  transform:translateY(1px);
  filter:brightness(1.35) !important;
}
body.cc .gb-round-button.cc-pressed,
body.cc .gb-rectangle-button.cc-pressed {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 14px rgba(0,229,255,.55),
    0 0 0 1px rgba(0,229,255,.5) !important;
}
body.cc .gb-direction-button.cc-pressed {
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.5),
    0 0 14px rgba(0,229,255,.5) !important;
}
body.cc .gb-direction-button.cc-pressed .gb-direction-button-circle {
  background:rgba(0,229,255,.55) !important;
}

/* Remap panel — replaces the static .cc-keymap text inside #cc-settings. */
#cc-settings .cc-keymap.ccpad-mounted {
  display:block;
  grid-template-columns:none;
}
#cc-settings .ccpad-panel-head {
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:8px;
}
#cc-settings .ccpad-panel-title {
  font:800 11px var(--nx-ui);
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--nx-txt2);
}
#cc-settings .ccpad-panel-tip {
  font:600 11px var(--nx-ui);
  color:var(--nx-txt3);
}
#cc-settings .ccpad-panel-tip b { color:var(--nx-cyan); }

#cc-settings .ccpad-rows {
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
#cc-settings .ccpad-row {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:6px 8px;
  border-radius:8px;
  background:rgba(5,7,16,.62);
  border:1px solid var(--nx-stroke);
  color:var(--nx-txt2);
  font:800 12px var(--nx-ui);
  cursor:pointer;
  text-align:left;
  transition:border-color .12s, background .12s, box-shadow .12s;
}
#cc-settings .ccpad-row:hover {
  border-color:var(--nx-stroke2);
  background:rgba(10,14,28,.72);
}
#cc-settings .ccpad-glyph {
  flex:0 0 auto;
  min-width:18px;
  text-align:center;
  color:var(--nx-cyan);
  font:900 12px var(--nx-ui);
}
#cc-settings .ccpad-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cc-settings .ccpad-key {
  flex:0 0 auto;
  min-width:34px;
  padding:2px 7px;
  text-align:center;
  border-radius:5px;
  background:rgba(0,0,0,.45);
  border:1px solid var(--nx-stroke);
  color:#ffd86b;
  font:700 11px 'JetBrains Mono', 'SF Mono', monospace;
}
#cc-settings .ccpad-key.is-default {
  color:var(--nx-txt3);
  font-weight:600;
}
#cc-settings .ccpad-gp {
  flex:0 0 auto;
  padding:2px 6px;
  border-radius:5px;
  background:rgba(0,229,255,.10);
  border:1px solid var(--nx-stroke);
  color:var(--nx-cyan);
  font:700 10px var(--nx-ui);
  letter-spacing:.3px;
}
#cc-settings .ccpad-clear {
  flex:0 0 auto;
  width:16px; height:16px;
  line-height:14px;
  text-align:center;
  border-radius:50%;
  color:var(--nx-txt3);
  border:1px solid var(--nx-stroke);
}
#cc-settings .ccpad-clear:hover { color:var(--nx-magenta); border-color:var(--nx-magenta); }

/* Listening (amber pulse) — reuses the emulator's remap-listen look. */
#cc-settings .ccpad-row.is-listening {
  border-color:#fbbf24;
  background:linear-gradient(135deg, rgba(251,191,36,.22), rgba(245,158,11,.12));
  animation:ccpadListenPulse 1.1s ease-in-out infinite;
}
#cc-settings .ccpad-row.is-listening .ccpad-key {
  background:#fbbf24;
  color:#1a0e02;
  border-color:#fff;
}
@keyframes ccpadListenPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(251,191,36,.55); }
  50%      { box-shadow:0 0 0 7px rgba(251,191,36,0); }
}