/* ================= global ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { font-family: Arial, sans-serif; background: #111; }
.hidden { display: none !important; }
.mode { position: fixed; inset: 0; }
canvas { display: block; }

.gearbtn {
  position: absolute; right: 14px; top: 12px; z-index: 20;
  background: none; border: none; color: rgba(255,255,255,.35);
  font-size: 18px; cursor: pointer; padding: 4px 6px;
  pointer-events: auto; /* parents may be pointer-events: none overlays */
}
.gearbtn:hover { color: rgba(255,255,255,.8); }

/* ================= realistic ================= */
#mode-realistic { background: #1a1c1e; cursor: crosshair; }
#rl-hud { position: absolute; inset: 0; pointer-events: none;
  font-family: "Arial Narrow", Arial, sans-serif; color: #cfd4dc; }
#rl-hud .gearbtn, #rl-hud .rl-modeswitch button, #rl-hud #rl-weapons .wpn { pointer-events: auto; }
#rl-topleft { position: absolute; left: 16px; top: 12px; }
.rl-modeswitch button {
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14);
  color: #9aa3ad; font: bold 11px/1 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .12em; padding: 6px 10px; cursor: pointer;
}
.rl-modeswitch button.on { color: #e6c34a; border-color: rgba(230,195,74,.5); }
#rl-drills { margin-top: 6px; }
#rl-drills button.on { color: #7fd0ff; border-color: rgba(127,208,255,.5); }
#rl-weapons { margin-top: 10px; }
#rl-weapons .wpn {
  display: block; width: 128px; margin-bottom: 2px; padding: 4px 8px;
  background: rgba(0,0,0,.45); border-left: 2px solid transparent;
  color: #8b939d; font: 12px/1.35 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .06em; cursor: pointer; user-select: none;
}
#rl-weapons .wpn small { float: right; opacity: .6; }
#rl-weapons .wpn.on { color: #f0f2f4; border-left-color: #e6c34a; background: rgba(0,0,0,.65); }
#rl-sensline {
  margin-top: 8px; padding: 4px 8px; width: 128px;
  background: rgba(0,0,0,.45);
  font: 11px/1.5 "Arial Narrow", Arial, sans-serif; letter-spacing: .05em; color: #8b939d;
}
#rl-sensline b { color: #e6c34a; }
#rl-stats {
  position: absolute; right: 18px; top: 52px; width: 190px; text-align: right;
  font: 13px/1.5 "Arial Narrow", Arial, sans-serif; color: #b9c1cb;
  text-shadow: 0 1px 2px #000;
}
#rl-stats .grade { font-size: 44px; font-weight: bold; line-height: 1; }
#rl-help {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font: 11px/1 Arial, sans-serif; letter-spacing: .08em; color: rgba(255,255,255,.30);
  white-space: nowrap;
}
#rl-ammo {
  position: absolute; right: 26px; bottom: 22px;
  text-shadow: 0 1px 3px #000;
}
#rl-ammo-cur { font: bold 46px/1 "Arial Narrow", Arial, sans-serif; color: #f0f2f4; }
#rl-ammo-max { font: bold 20px/1 "Arial Narrow", Arial, sans-serif; color: #8b939d; margin-left: 6px; }
#rl-health {
  position: absolute; left: 26px; bottom: 22px;
  font: bold 34px/1 "Arial Narrow", Arial, sans-serif; color: #f0f2f4; text-shadow: 0 1px 3px #000;
}
#rl-health .rl-plus { color: #8b939d; font-size: 24px; margin-right: 4px; }
#rl-money {
  position: absolute; left: 26px; bottom: 70px;
  font: bold 20px/1 "Arial Narrow", Arial, sans-serif; color: #9fdc7f; text-shadow: 0 1px 3px #000;
}

/* ================= stealth ================= */
#mode-stealth { background: #f1f3f4; cursor: text;
  font-family: Arial, sans-serif; display: flex; flex-direction: column; }
#st-chrome { background: #fff; flex: none; user-select: none; }
#st-titlebar { display: flex; align-items: flex-start; padding: 8px 16px 0; }
#st-docicon {
  width: 26px; height: 34px; margin: 2px 12px 0 0; border-radius: 3px;
  background: #4285f4;
  background-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  background-size: 14px 2px, 14px 2px, 9px 2px;
  background-position: 6px 12px, 6px 17px, 6px 22px;
  background-repeat: no-repeat;
}
#st-docname { font-size: 17px; color: #202124; padding: 2px 4px; }
#st-menus { display: flex; gap: 2px; margin-top: 2px; position: relative; }
#st-menus > span { font-size: 13px; color: #202124; padding: 3px 7px; border-radius: 4px; cursor: default; }
#st-menus > span:hover { background: #f1f3f4; }
#st-share {
  margin-left: auto; background: #c2e7ff; color: #001d35; font-size: 13px;
  padding: 8px 16px; border-radius: 18px; cursor: default;
}
#st-avatar {
  width: 30px; height: 30px; margin: 3px 0 0 14px; border-radius: 50%;
  background: #7b1fa2; color: #fff; font-size: 14px; line-height: 30px; text-align: center;
}
.st-menu { position: relative; }
.st-dropdown {
  display: none; position: absolute; top: 24px; left: 0; z-index: 50; min-width: 210px;
  background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.25);
  padding: 6px 0; font-size: 13.5px; color: #202124;
}
.st-menu:hover .st-dropdown { display: block; }
.st-dropdown div { padding: 6px 22px; cursor: default; }
.st-dropdown div:hover { background: #f1f3f4; }
.st-dropdown .st-sep { border-top: 1px solid #e0e0e0; margin: 5px 0; padding: 0; }
#st-toolbar {
  display: flex; align-items: center; gap: 3px;
  background: #edf2fa; border-radius: 22px; margin: 8px 16px; padding: 5px 12px;
}
.st-tool { font-size: 14px; color: #444746; padding: 4px 8px; border-radius: 4px; cursor: default; }
.st-tool:hover { background: #dde3ea; }
.st-b { font-weight: bold; } .st-i { font-style: italic; } .st-u { text-decoration: underline; }
.st-tbsep { width: 1px; height: 20px; background: #c7c7c7; margin: 0 6px; }
#st-toolbar select {
  border: none; background: transparent; font-size: 13px; color: #444746;
  padding: 4px 2px; border-radius: 4px; outline: none; cursor: pointer; max-width: 150px;
}
#st-toolbar select:hover { background: #dde3ea; }
#st-ruler {
  height: 18px; margin: 0 0 2px; background: #fff;
  background-image: repeating-linear-gradient(90deg, #c7c7c7 0 1px, transparent 1px 50px);
  background-position: calc(50% - 325px) bottom; background-size: 100% 5px; background-repeat: no-repeat;
  border-bottom: 1px solid #e0e0e0;
}
#st-scroller { flex: 1; overflow-y: auto; overflow-x: hidden; }
#st-page {
  position: relative; width: 850px; min-height: 1100px; margin: 14px auto 40px;
  background: #fff; border: 1px solid #dadce0; border-radius: 2px;
  padding: 90px 95px; cursor: text;
}
#st-text { color: #202124; font-size: 14.7px; line-height: 1.62; user-select: none; }
#st-text h1 { font-size: 25px; font-weight: 400; margin-bottom: 18px; }
#st-text h2 { font-size: 18px; font-weight: 500; margin: 20px 0 10px; }
#st-text p { margin-bottom: 12px; }
#st-text ul { margin: 0 0 12px 26px; }
#st-ghostpath { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#st-caret { position: absolute; width: 2px; height: 19px; background: #e8710a; z-index: 5; pointer-events: none; }
#st-caret-flag {
  position: absolute; top: -15px; left: -2px; background: #e8710a; color: #fff;
  font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 2px 2px 2px 0; white-space: nowrap;
}
#st-cursor-hint { position: absolute; z-index: 4; pointer-events: none; }
#st-caret2 { position: absolute; width: 2px; height: 19px; background: #1a73e8; z-index: 5; pointer-events: none; display: none; }
#st-caret2-flag {
  position: absolute; top: -15px; left: -2px; background: #1a73e8; color: #fff;
  font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 2px 2px 2px 0; white-space: nowrap;
}
.st-miss { text-decoration: underline wavy #d93025 1.5px; text-underline-offset: 3px; }
.st-fixed { background: #d2e3fc; border-radius: 2px; transition: background .5s; }
.st-wrong { background: #fce8e6; border-radius: 2px; }
.st-stale { background: #e8eaed; border-radius: 2px; }
#st-statusbar {
  flex: none; display: flex; gap: 26px; align-items: center;
  background: #fff; border-top: 1px solid #e0e0e0;
  font-size: 12.5px; color: #444746; padding: 5px 20px; user-select: none;
}
#st-sync { margin-left: auto; color: #5f6368; }

/* ================= comet ================= */
#mode-comet { background: #04060e; cursor: none; }
#cm-ui { position: absolute; inset: 0; pointer-events: none; }
#cm-orbits { position: absolute; left: 18px; top: 16px; display: flex; flex-direction: column; gap: 4px; }
#cm-orbits .orb {
  pointer-events: auto; cursor: pointer; user-select: none;
  font: 11.5px/1 "Avenir Next", Avenir, Arial, sans-serif; letter-spacing: .22em;
  color: rgba(160,190,255,.38); padding: 5px 10px; border-left: 1px solid transparent;
  transition: color .25s;
}
#cm-orbits .orb.on { color: rgba(190,225,255,.95); border-left-color: rgba(120,200,255,.7);
  text-shadow: 0 0 12px rgba(120,200,255,.8); }
#cm-orbits .orb:hover { color: rgba(190,225,255,.8); }
#cm-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font: 12px/1 "Avenir Next", Avenir, Arial, sans-serif; letter-spacing: .35em;
  color: rgba(160,190,255,.30); text-transform: uppercase; white-space: nowrap;
  transition: opacity .5s;
}
.cm-nav { position: absolute; right: 20px; bottom: 22px; display: flex; gap: 10px; }
.cm-dot {
  pointer-events: auto; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(160,190,255,.25); cursor: pointer;
}
.cm-dot.on, .cm-dot:hover { background: rgba(190,225,255,.85); box-shadow: 0 0 8px rgba(120,200,255,.9); }

/* ================= touch notice ================= */
#touchnote {
  position: fixed; inset: 0; z-index: 200; background: #f1f3f4;
  display: flex; align-items: center; justify-content: center;
}
#touchnote-card {
  max-width: 320px; margin: 20px; background: #fff; border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18); padding: 28px 30px; text-align: center;
  font: 14.5px/1.6 Arial, sans-serif; color: #202124;
}
#touchnote-card p { margin-bottom: 6px; }
#touchnote-icon {
  width: 34px; height: 44px; margin: 0 auto 16px; border-radius: 4px; background: #4285f4;
  background-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  background-size: 18px 2.5px, 18px 2.5px, 11px 2.5px;
  background-position: 8px 15px, 8px 22px, 8px 29px;
  background-repeat: no-repeat;
}
#touchnote-dismiss {
  display: inline-block; margin-top: 12px; color: #0b57d0; font-size: 13px; cursor: pointer;
}

/* ================= settings ================= */
#settings {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
#settings-card {
  width: 400px; max-width: 92vw; background: #fff; border-radius: 10px;
  padding: 22px 26px; font: 13.5px/1.5 Arial, sans-serif; color: #202124;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
#settings-card h3 { font-weight: 500; font-size: 17px; margin-bottom: 14px; }
#settings-card label { display: block; margin-bottom: 12px; color: #444746; }
#settings-card label.chk { display: flex; gap: 8px; align-items: center; }
#settings-card select, #settings-card input[type=number] {
  display: block; width: 100%; margin-top: 4px; padding: 6px 8px;
  border: 1px solid #dadce0; border-radius: 5px; font-size: 13.5px; color: #202124; background: #fff;
}
#settings-card input[type=range] { display: block; width: 100%; margin-top: 6px; }
.set-note { font-size: 11.5px; color: #80868b; margin: 10px 0 14px; }
.set-note code { background: #f1f3f4; padding: 1px 4px; border-radius: 3px; }
#settings-close {
  background: #0b57d0; color: #fff; border: none; border-radius: 18px;
  font-size: 13.5px; padding: 8px 22px; cursor: pointer; float: right;
}