/* QPlay buttons: glossy pills with a hard light/dark split, a thin dark rim and
   white lettering with a crisp navy outline (references 21~25). Blue is the
   default, orange marks the main action, red leaves, white is secondary, sky
   marks a selection. Round chrome buttons carry the toolbar icons. Loaded last. */
html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button, .qp-demo-toolbar button),
html body :is(.sr-tools button, .sr-controls button, .wm-open, .wm-current, .wm-close) {
  --qb-a: #9ddcff; --qb-b: #52b4f7; --qb-c: #2a83de; --qb-d: #1c66c8; --qb-rim: #0c3784; --qb-ink-o: #0b2f74; --qb-text: #fff;
  border: 1px solid var(--qb-rim) !important;
  border-radius: 9px !important;
  background: linear-gradient(var(--qb-a) 0%, var(--qb-b) 46%, var(--qb-c) 52%, var(--qb-d) 100%) !important;
  box-shadow: inset 0 1px 0 #ffffffd0, inset 0 -1px 0 #00000026, 0 2px 0 #0b1f5a, 0 3px 5px #0b144044 !important;
  color: var(--qb-text) !important;
  font-family: "QuizDisplay", "NanumSquareRound", "Malgun Gothic", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 1px 0 var(--qb-ink-o), -1px 0 var(--qb-ink-o), 0 1px var(--qb-ink-o), 0 -1px var(--qb-ink-o),
    1px 1px var(--qb-ink-o), -1px -1px var(--qb-ink-o), 1px -1px var(--qb-ink-o), -1px 1px var(--qb-ink-o) !important;
}
html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button, .qp-demo-toolbar button, .icb)::before,
html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button, .qp-demo-toolbar button, .icb)::after {
  content: none !important;
  display: none !important;
}
html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button, .qp-demo-toolbar button) :is(span, b, small, .candy-label) {
  color: inherit !important; -webkit-text-stroke: 0 !important; text-shadow: inherit !important;
}
/* Orange: the main thing to do on a screen. */
html body :is(.btn.y, .lgGoBtn) {
  --qb-a: #ffd99a; --qb-b: #ffaa4a; --qb-c: #f37c16; --qb-d: #d95c08; --qb-rim: #8a3204; --qb-ink-o: #7a2a03;
}
/* Sky: a chosen tab or option. */
html body :is(.btn.p, .tab.on, .qp-demo-toolbar button.on) {
  --qb-a: #e2f7ff; --qb-b: #9fe0ff; --qb-c: #4fbdf6; --qb-d: #2a9de8; --qb-rim: #0c4a94; --qb-ink-o: #0b3a7a;
}
/* White: secondary actions and unselected tabs, navy lettering without outline. */
html body :is(.btn.gray, .lgWide.ex, .tab:not(.on)) {
  --qb-a: #ffffff; --qb-b: #f0f8ff; --qb-c: #d8ecfb; --qb-d: #c2def6; --qb-rim: #5a86c4; --qb-text: #1b2f68;
  text-shadow: none !important;
}
/* Red: leave or remove. 퀴즈 모드의 나가기·끝내기는 .btn.r(2026-10-22, 그동안 파랑으로 보였음). */
html body :is(.btn.red, .btn.r, .btn.danger, .qp-demo-toolbar [data-exit], #tbOut) {
  --qb-a: #ffb3a4; --qb-b: #fb6a55; --qb-c: #e43c27; --qb-d: #c52714; --qb-rim: #7a1408; --qb-ink-o: #6e1206;
}
/* Number keys on the login pad stay white like QPlay's soft keys. */

/* Round chrome buttons for the toolbar icons. */
html body .icb {
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 28%, var(--bu-rim) 0%, #5ab9f6 42%, #2c84df 62%, #1c5fc4 100%) !important;
  box-shadow: 0 0 0 1px #0c3784, inset 0 -3px 4px #0c378466, 0 3px 0 #0b1f5a, 0 4px 6px #0b144055 !important;
  -webkit-text-stroke: 0 !important;
}
html body .icb :is(.rich-icon, .candy-icon) { filter: drop-shadow(0 1px 0 var(--bu-ink2)); }
html body .top .icb .qp-tool-label { color: #e8f4ff !important; text-shadow: 0 1px 0 var(--bu-ink2) !important; }

/* Press: one pixel down, gloss dims. */
html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button, .qp-demo-toolbar button, .sr-tools button, .sr-controls button, .wm-open, .wm-current, .wm-close):not(:disabled):is(:active, .qp-pressed) {
  box-shadow: inset 0 2px 3px #0b1f5a66, inset 0 -1px 0 #ffffff40 !important;
  translate: 0 2px !important;
  scale: .97 !important;
}
html body .icb:not(:disabled):is(:active, .qp-pressed) { box-shadow: 0 0 0 1px #0c3784, inset 0 2px 4px #0b1f5a88 !important; translate: 0 2px !important; scale: .96 !important; }
/* 마우스를 올리면 밝아지고 1px 떠오르며(button-feedback.css) 단차·그늘이 한 칸 깊어진다 — 눌리면 다시 납작해진다 */
@media (hover: hover) and (pointer: fine) {
  html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button, .icb, .sr-tools button, .wm-open):not(:disabled):hover { filter: brightness(1.08) saturate(1.05); }
  html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button):not(:disabled):hover:not(:active, .qp-pressed) {
    box-shadow: inset 0 1px 0 #ffffffd0, inset 0 -1px 0 #00000026, 0 3px 0 #0b1f5a, 0 6px 9px #0b144055 !important; }
  html body .icb:not(:disabled):hover:not(:active, .qp-pressed) { box-shadow: 0 0 0 1px #0c3784, inset 0 -3px 4px #0c378466, 0 4px 0 #0b1f5a, 0 6px 9px #0b144066 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button, .qp-demo-toolbar button, .sr-tools button, .sr-controls button, .wm-open, .wm-current, .wm-close, .icb):not(:disabled):is(:active, .qp-pressed) { translate: none !important; scale: none !important; }
}
html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button):disabled {
  --qb-a: #e4eaf2; --qb-b: #ccd6e3; --qb-c: #b4c1d2; --qb-d: #a2b0c3; --qb-rim: #6c7c94; --qb-ink-o: #5d6a80;
  filter: none; opacity: .9; cursor: default;
}
html body :is(.btn, .tab, .lgGoBtn, .lgWide, .lgPad button, .icb):focus-visible { outline: 3px solid var(--bu-focus) !important; outline-offset: 2px !important; }

/* Map tools and the map atlas share the material; the atlas toggle is sky. */
html body .wm-open { --qb-a: #e2f7ff; --qb-b: #9fe0ff; --qb-c: #4fbdf6; --qb-d: #2a9de8; --qb-rim: #0c4a94; --qb-ink-o: #0b3a7a; }
html body .sr-controls .sr-interact:not(:disabled) { --qb-a: #ffd99a; --qb-b: #ffaa4a; --qb-c: #f37c16; --qb-d: #d95c08; --qb-rim: #8a3204; --qb-ink-o: #7a2a03; }
html body .wm-close { --qb-a: #ffb3a4; --qb-b: #fb6a55; --qb-c: #e43c27; --qb-d: #c52714; --qb-rim: #7a1408; --qb-ink-o: #6e1206; }
html body :is(.sr-tools button, .wm-open, .wm-current, .wm-close) kbd { color: #1b2a5c; text-shadow: none; background: #fff; border: 1px solid #5a86c4; border-radius: 3px; }
html body .sr-controls button:disabled { opacity: .7; filter: saturate(.4); }

/* Map screens: the map art stays; only the UI on top turns QPlay blue (after world-explorer.css). */
html body .sr-help { color: #1b2a5c; background: #eef8fff5; border: 2px solid #13307a; box-shadow: inset 0 0 0 2px #fff, 0 4px 0 #0f2460; }
html body .wm-mini { background: linear-gradient(#eef8ff, #d4eafb); border: 2px solid #13307a; border-image: none; padding: 8px; box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #0f2460; color: #1b2a5c; }
html body .school-room-host .wm-mini-head button { color: #1b2a5c; }
html body .school-room-host .wm-dialog { border: 3px solid #13307a; border-radius: 14px; background: #eef8ff; color: #1b2a5c; box-shadow: inset 0 0 0 2px #fff, 0 6px 0 #0f2460, 0 20px 60px #0b1440aa; }
html body .wm-dialog::backdrop { background: #0b1640b0; }
html body .wm-header { background: linear-gradient(#86d6ff, #45b0f2 50%, #2a8ce0 52%, #2378d0); border-bottom: 2px solid #1b5fb4; }
html body .wm-header small { color: #e8f4ff; }
html body .wm-header h2 { color: #fff; text-shadow: var(--qb-outline); }
html body .wm-places { background: #dcecfb; border-right-color: #9fcaf0; }
html body .wm-place b, .wm-detail-head h3 { color: #1b2a5c; } html body .wm-place small, .wm-detail-head p { color: #4a6290; }
html body .school-room-host .wm-place[aria-pressed="true"] { background: #fff; border-color: #2f80dd; }
html body .wm-map-area { background: #dcecfb; border-color: #9fcaf0; }
html body .wm-route { background: #e3f1fd; } html body .wm-route b { color: #1f4fb0; }
html body .wm-footer { color: #4a6290; border-top-color: #9fcaf0; }
html body .wm-self { background: #ff8a1c; } html body .wm-friend { background: #2f80dd; }

/* Top bar: icon-only round chrome buttons (labels stay for screen readers). */
html body .top .icb .qp-tool-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); inset: 0 auto auto 0 !important; translate: none !important; margin: 0; }
html body .top .icb{ width: 44px !important; height: 44px !important; padding: 0 !important; display: grid !important; place-items: center; }
html body .top .icb :is(.rich-icon, .candy-icon, .ui-icon), .candy-icon, .ui-icon) { width: 26px !important; height: 26px !important; }
html body .top .icb.qq-entry .qp-candy { font-size: 24px; }