/* Guardianes del Tiempo y la Ciencia · UI 2.5D ligera y accesible */
.gtc-body {
  --gtc-ink: #18263a;
  --gtc-ink-soft: #344963;
  --gtc-paper: #f8f8ec;
  --gtc-panel: #fffef6;
  --gtc-line: #b4c8c8;
  --gtc-teal: #075d66;
  --gtc-teal-bright: #087f7a;
  --gtc-sky: #d6f5f2;
  --gtc-gold: #f3c64f;
  --gtc-coral: #c74c32;
  --gtc-lilac: #57418b;
  --gtc-leaf: #286546;
  --gtc-focus: #143f9d;
  margin: 0;
  min-height: 100vh;
  color: var(--gtc-ink);
  background:
    radial-gradient(ellipse at 10% 0%, #e7fff1 0, transparent 34rem),
    radial-gradient(ellipse at 100% 15%, #fff2c7 0, transparent 30rem),
    linear-gradient(160deg, #d7f3ec 0%, #f5f3de 48%, #e2effb 100%);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.gtc-body *,
.gtc-body *::before,
.gtc-body *::after { box-sizing: border-box; }

.gtc-body button,
.gtc-body select,
.gtc-body input { font: inherit; }

.gtc-body button,
.gtc-body a,
.gtc-body select,
.gtc-body input,
.gtc-body [tabindex]:not([tabindex="-1"]) { touch-action: manipulation; }

.gtc-body :focus-visible {
  outline: 4px solid var(--gtc-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

.gtc-shell { width: min(1240px, 100%); margin-inline: auto; padding: 14px clamp(12px, 3vw, 30px) 40px; }
.gtc-app { width: min(1240px, 100%); min-height: 100vh; margin-inline: auto; padding: 14px clamp(12px, 3vw, 30px) 42px; }
.gtc-body [hidden] { display: none !important; }
.gtc-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; margin-bottom: 16px; }
.gtc-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--gtc-teal); font-weight: 950; letter-spacing: .04em; }
.gtc-brand-mark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 2px solid #fff; border-radius: 16px; background: linear-gradient(145deg, #f4d778, #f2a759); box-shadow: 0 4px 0 #b96e41; font-size: 25px; }
.gtc-brand-icon { display: grid; width: 48px; height: 48px; flex: none; place-items: center; border: 2px solid #fff; border-radius: 16px; background: linear-gradient(145deg, #f4d778, #f2a759); box-shadow: 0 4px 0 #b96e41; font-size: 27px; }
.gtc-brand-name { display: grid; line-height: 1.1; }
.gtc-brand-name small { color: var(--gtc-ink-soft); font-size: .68rem; letter-spacing: .12em; }
.gtc-header-tools,
.gtc-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.gtc-body h1,.gtc-body h2,.gtc-body h3,.gtc-body p { margin-top: 0; }
.gtc-body .gtc-brand h1 { margin: 0; color: #173b48; font-size: clamp(1.05rem, 2.3vw, 1.55rem); line-height: 1.08; letter-spacing: -.02em; }
.gtc-tool-button,.gtc-primary,.gtc-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 9px 13px; border: 2px solid #315b69; border-radius: 15px; background: #fffef5; color: #183745; box-shadow: 0 4px 0 #9db9b7; text-align: center; font-weight: 900; cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.gtc-tool-button:hover,.gtc-primary:hover,.gtc-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #9db9b7; }
.gtc-tool-button[aria-pressed="true"] { border-color: #075d66; background: #def6ea; }
.gtc-primary { border-color: #084c55; background: linear-gradient(#1c9b88, #08716e); color: #fff; box-shadow: 0 5px 0 #075357; }
.gtc-secondary { border-color: #6e8391; background: #f4f8f5; color: #263d4b; }
.gtc-switch,.gtc-range-label,.gtc-select-label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #294650; font-size: .85rem; font-weight: 850; }
.gtc-switch input { width: 22px; height: 22px; accent-color: var(--gtc-teal-bright); }
.gtc-range-label input { width: 90px; accent-color: var(--gtc-teal-bright); }
.gtc-select-label select { min-height: 44px; max-width: 110px; padding: 6px 8px; border: 2px solid #67858b; border-radius: 11px; background: #fffef4; color: #203c48; }

.gtc-card,
.gtc-panel { border: 2px solid #fff; border-radius: 24px; background: var(--gtc-panel); box-shadow: 0 7px 0 #7eacaa66, 0 18px 42px #2b5c5820; }
.gtc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); align-items: center; gap: 22px; overflow: hidden; padding: clamp(20px, 4vw, 38px); border: 2px solid #fff; border-radius: 30px; background: linear-gradient(120deg, #fffdf1 0 55%, #d9f2e3 100%); box-shadow: 0 8px 0 #78aaa366, 0 20px 42px #245d4920; }
.gtc-hero::before { position: absolute; inset: auto -45px -72px auto; width: 230px; height: 230px; border: 26px solid #f1c85b55; border-radius: 50%; content: ""; }
.gtc-hero-copy { position: relative; z-index: 1; }
.gtc-eyebrow { margin: 0 0 7px; color: var(--gtc-leaf); font-size: .78rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.gtc-title { margin: 0; color: #173b48; font-size: clamp(2rem, 5vw, 3.7rem); font-weight: 1000; letter-spacing: -.045em; line-height: .98; }
.gtc-title span { display: block; color: var(--gtc-coral); }
.gtc-lead { max-width: 55ch; margin: 14px 0 0; color: #334b5d; font-size: clamp(1rem, 2vw, 1.22rem); font-weight: 650; }
.gtc-hero-art { position: relative; z-index: 1; display: grid; min-height: 190px; place-items: center; }
.gtc-hero-art svg,
.gtc-hero-art img { display: block; width: min(100%, 400px); height: auto; }
.gtc-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 18px; }
.gtc-luma-card { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; width: min(100%, 270px); min-height: 185px; place-content: center; margin-inline: auto; border: 3px solid #fff; border-radius: 28px; background: radial-gradient(circle at 50% 35%, #fff9ce, #d8f1e1 67%, #b6ded4); box-shadow: 0 8px 0 #89b8a866; color: #21554e; font-size: 1.12rem; }
.gtc-luma-card::before { position: absolute; inset: 17px; border: 2px dashed #fff; border-radius: 21px; content: ""; }
.gtc-luma-card > * { position: relative; }
.gtc-luma-card > span:last-child { color: #355b60; font-size: .86rem; font-weight: 750; }
.gtc-luma { display: grid; width: 68px; height: 68px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fffce2, #ffd34d 53%, #f39b3d); box-shadow: 0 0 26px #ffd34d99, 0 5px 0 #bd8443; color: #fff9c8; font-size: 45px; animation: gtc-luma-glow 2.5s ease-in-out infinite alternate; }
.gtc-luma-card strong { font-size: 1.15rem; }

.gtc-main { display: grid; gap: 20px; margin-top: 24px; }
.gtc-heading-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.gtc-heading-row h2,
.gtc-heading-row h3 { margin: 0; color: #1c4147; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.1; }
.gtc-home { display: grid; gap: 23px; }
.gtc-avatar-section,.gtc-worlds-section { display: grid; gap: 14px; padding: clamp(14px, 2.5vw, 22px); border: 2px solid #fff; border-radius: 23px; background: #fffff0eF; box-shadow: 0 6px 0 #84aaa366; }
.gtc-avatar-section { grid-template-columns: minmax(150px,.65fr) minmax(0,1.35fr); align-items: center; }
.gtc-avatar-section h3,.gtc-section-heading h3 { margin: 0; color: #1c4147; font-size: clamp(1.2rem, 2.8vw, 1.6rem); }
.gtc-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.gtc-progress-summary { margin: 0; padding: 9px 12px; border: 2px solid #b8d9c4; border-radius: 14px; background: #e6f7df; color: #234f38; font-weight: 900; }
.gtc-privacy { margin: 0; color: #38545d; text-align: center; font-size: .85rem; font-weight: 700; }
.gtc-support { margin: 5px 0 0; color: #445b68; font-size: .94rem; }

.gtc-world-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.gtc-world-map > button,.gtc-world-map > article { position: relative; min-width: 0; }
.guardian-world-button { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 112px; padding: 14px; border: 2px solid #fff; border-radius: 20px; background: linear-gradient(145deg,#fffef5,#e1f4e7); color: #203b45; box-shadow: 0 5px 0 #83aaa666,0 12px 24px #183e3b12; text-align: left; cursor: pointer; transition: transform 150ms ease,box-shadow 150ms ease; }
.guardian-world-button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 0 #83aaa666,0 16px 26px #183e3b19; }
.guardian-world-button:disabled { filter: saturate(.6); background: #e7ebe3; color: #45565a; cursor: not-allowed; }
.guardian-world-button > span:nth-child(2) { display: grid; gap: 4px; }
.guardian-world-button b { font-size: 1rem; line-height: 1.12; }
.guardian-world-button small { color: #3e5960; font-size: .78rem; font-weight: 750; }
.guardian-world-symbol { display: grid; width: 54px; height: 54px; place-items: center; border: 2px solid #fff; border-radius: 18px; background: linear-gradient(145deg,#f8dfa1,#d8f2dc); box-shadow: 0 4px 0 #8eac95; font-size: 31px; }
.gtc-world-card { position: relative; display: grid; align-content: start; gap: 9px; min-height: 178px; overflow: hidden; padding: 16px; border: 2px solid #fff; border-radius: 20px; background: linear-gradient(150deg, #fffef6, #e9f8eb); box-shadow: 0 5px 0 #83aaa666, 0 12px 24px #183e3b12; }
.gtc-world-card::after { position: absolute; right: -14px; bottom: -32px; width: 94px; height: 94px; border: 12px solid #f4cb5b33; border-radius: 50%; content: ""; }
.gtc-world-card[data-world="1"] { --gtc-world-color: #537847; }
.gtc-world-card[data-world="2"] { --gtc-world-color: #635193; }
.gtc-world-card[data-world="3"] { --gtc-world-color: #167e8b; }
.gtc-world-card[data-world="4"] { --gtc-world-color: #a4523c; }
.gtc-world-card.is-current { border-color: var(--gtc-world-color, var(--gtc-gold)); box-shadow: 0 0 0 3px var(--gtc-world-color, var(--gtc-gold)), 0 6px 0 #83aaa666; }
.gtc-world-card.is-locked { filter: saturate(.6); background: #e5e9e1; }
.gtc-world-card.is-locked::before { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 14px; background: #f1f5edc9; color: var(--gtc-ink); content: "🔒 Primero termina el mundo anterior"; text-align: center; font-weight: 900; }
.gtc-world-icon { display: grid; width: 54px; height: 54px; place-items: center; border: 2px solid #fff; border-radius: 19px; background: color-mix(in srgb, var(--gtc-world-color, #3b7c6a) 18%, white); box-shadow: 0 3px 0 color-mix(in srgb, var(--gtc-world-color, #3b7c6a) 35%, white); font-size: 31px; }
.gtc-world-period { color: var(--gtc-world-color, var(--gtc-teal)); font-size: .7rem; font-weight: 950; letter-spacing: .1em; }
.gtc-world-title { margin: 0; color: #203b45; font-size: 1.05rem; line-height: 1.13; }
.gtc-world-progress { display: flex; align-items: center; gap: 6px; color: #394f58; font-size: .8rem; font-weight: 750; }
.gtc-world-progress-mark { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #e4f3d9; color: #275938; }

.gtc-game-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); align-items: start; gap: 18px; }
.gtc-game-screen { display: grid; gap: 15px; }
.gtc-game-topline { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
.gtc-game-topline h2 { margin: 0; color: #183f4a; font-size: clamp(1.25rem,3vw,1.8rem); }
.gtc-game-topline .gtc-eyebrow { margin-bottom: 3px; }
.gtc-mission-progress { padding: 9px 12px; border: 2px solid #fff; border-radius: 999px; background: #142c38; color: #fff; text-align: center; font-size: .82rem; font-weight: 900; }
.gtc-scene-column { min-width: 0; }
.gtc-scene-frame { position: relative; overflow: hidden; border: 3px solid #fff; border-radius: 26px; background: #b5e0d3; box-shadow: 0 7px 0 #67959588, 0 20px 45px #184d4930; }
.gtc-stage { position: relative; overflow: hidden; border: 3px solid #fff; border-radius: 26px; background: #b5e0d3; box-shadow: 0 7px 0 #67959588, 0 20px 45px #184d4930; }
#guardian-canvas { display: block; width: 100%; height: auto; min-height: 240px; aspect-ratio: 16 / 9; background: linear-gradient(#a6e1e7, #e3e8bc 65%, #7eb879); touch-action: none; }
.gtc-scene-caption { position: absolute; inset: auto 12px 12px; max-width: min(92%, 620px); margin-inline: auto; padding: 8px 12px; border: 1px solid #fff; border-radius: 12px; background: #142c38eF; color: #fff; text-align: center; font-size: .87rem; font-weight: 850; text-shadow: 0 1px 2px #142c38; }
.gtc-movement-controls { display: grid; grid-template-columns: repeat(5, minmax(48px, 1fr)); gap: 8px; max-width: 420px; margin: 12px auto 0; }
.gtc-move-button { min-height: 58px; border: 2px solid #315b69; border-radius: 17px; background: #fffef4; color: #183745; box-shadow: 0 4px 0 #9db9b7; font-size: 1.35rem; font-weight: 1000; cursor: pointer; touch-action: none; user-select: none; }
.gtc-move-button:active,.gtc-move-button[data-active="true"] { transform: translateY(2px); background: #dcf8ef; box-shadow: 0 2px 0 #6faaa0; }
.gtc-control-hint { margin: 8px 0 0; color: #435a63; text-align: center; font-size: .82rem; font-weight: 700; }
.gtc-stage-hud { position: absolute; inset: 12px 12px auto; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 8px; pointer-events: none; }
.gtc-stage-hud > * { pointer-events: auto; }
.gtc-hud-chip { display: inline-flex; align-items: center; gap: 7px; max-width: min(100%, 340px); padding: 8px 12px; border: 2px solid #fff; border-radius: 999px; background: #142c38eF; color: #fff; font-size: .82rem; font-weight: 900; box-shadow: 0 3px 0 #142c3855; }
.gtc-stage-help { position: absolute; inset: auto 12px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #fff; text-shadow: 0 2px 4px #142c38; pointer-events: none; }
.gtc-stage-help span { padding: 5px 9px; border: 1px solid #fff9; border-radius: 10px; background: #142c38bb; font-size: .78rem; font-weight: 800; }
.gtc-side-panel { display: grid; gap: 12px; }
.gtc-mission-panel { display: grid; gap: 11px; padding: clamp(14px, 2.2vw, 20px); border: 2px solid #fff; border-radius: 24px; background: var(--gtc-panel); box-shadow: 0 7px 0 #7eacaa66, 0 18px 42px #2b5c5820; }
.gtc-luma-speech { display: grid; grid-template-columns: 42px minmax(0,1fr) 44px; align-items: center; gap: 9px; padding: 10px; border: 2px solid #c2dfd2; border-radius: 17px; background: linear-gradient(120deg, #f0fff3, #fff9df); }
.gtc-luma-speech > div > p:last-child { margin: 0; color: #294750; font-weight: 800; }
.gtc-luma-small { display: grid; width: 40px; height: 40px; place-items: center; border: 2px solid #fff; border-radius: 14px; background: #ffdb72; box-shadow: 0 3px 0 #c28e51; color: #fff9c8; font-size: 27px; }
.gtc-luma-speech button { min-width: 44px; min-height: 44px; border: 2px solid #315b69; border-radius: 13px; background: #fffef4; cursor: pointer; }
.gtc-mission-kind { width: fit-content; margin: 0; padding: 4px 8px; border-radius: 999px; background: #e6f2d5; color: #325c3d; font-size: .69rem; font-weight: 950; letter-spacing: .08em; }
.gtc-mission-panel h3 { margin: 0; color: #21444c; font-size: 1.23rem; line-height: 1.15; }
.gtc-mission-options > button { width: 100%; }
.gtc-mission-options .guardian-prediction { display: grid; gap: 9px; }
.gtc-mission-feedback { padding: 12px 14px; border: 2px solid #4f8d66; border-radius: 16px; background: #edf9df; color: #183e2e; font-weight: 800; }
.gtc-mission-feedback[data-state="retry"] { border-color: #86612b; background: #fff3ca; color: #503918; }
.gtc-mission-feedback[data-state="success"] { border-color: #286546; background: #dcf4df; color: #1c4a32; }
.gtc-mission-feedback[data-state="hint"] { border-color: #3c7194; background: #e2f3fc; color: #153b56; }
.gtc-continue-wrap { display: flex; justify-content: flex-end; }
.gtc-science-indicators { display: flex; flex-wrap: wrap; gap: 6px; }
.gtc-science-indicators > * { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #9ab7ab; border-radius: 999px; background: #f1f8ea; color: #31553f; font-size: .72rem; font-weight: 850; }
.gtc-captions { margin: 10px 0 0; padding: 8px 10px; border: 2px solid #fff; border-radius: 12px; background: #142c38; color: #fff; text-align: center; font-weight: 850; }
.gtc-captions[hidden] { display: none; }
.gtc-panel { padding: clamp(14px, 2.2vw, 20px); }
.gtc-panel h2,
.gtc-panel h3 { margin: 0 0 8px; color: #21444c; font-size: 1.16rem; line-height: 1.15; }
.gtc-panel p { margin: 0; color: #344e5a; }
.gtc-mission-story { font-size: 1rem; font-weight: 700; }
.gtc-mission-prompt { margin-top: 11px !important; color: #24484a !important; font-size: 1.05rem; font-weight: 950; }
.gtc-mission-options { display: grid; gap: 10px; margin-top: 12px; }
.gtc-option,
.gtc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 48px; min-height: 50px; padding: 11px 15px; border: 2px solid #36636a; border-radius: 16px; background: #fffef5; color: #183745; box-shadow: 0 4px 0 #9db9b7; text-align: center; font-weight: 900; cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.gtc-option { justify-content: flex-start; text-align: left; }
.gtc-option-icon { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 13px; background: #e5f3d9; font-size: 23px; }
.gtc-option:hover,
.gtc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #9db9b7; }
.gtc-option:active,
.gtc-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #9db9b7; }
.gtc-option[aria-pressed="true"],
.gtc-option.is-selected { border-color: #075d66; background: #dff6ee; box-shadow: 0 4px 0 #64a9a0; }
.gtc-btn--primary { border-color: #084c55; background: linear-gradient(#1c9b88, #08716e); color: #fff; box-shadow: 0 5px 0 #075357; }
.gtc-btn--primary:hover { box-shadow: 0 7px 0 #075357; }
.gtc-btn--warm { border-color: #984526; background: linear-gradient(#ffd26a, #f6a34f); color: #3b2b1e; box-shadow: 0 5px 0 #ac673e; }
.gtc-btn--quiet { border-color: #6e8391; background: #f4f8f5; color: #263d4b; }
.gtc-btn:disabled,
.gtc-option:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.gtc-dialogue { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 11px; padding: 13px; border: 2px solid #c2dfd2; border-radius: 20px; background: linear-gradient(120deg, #f0fff3, #fff9df); }
.gtc-mascot { display: grid; width: 50px; height: 50px; place-items: center; border: 2px solid #fff; border-radius: 18px; background: #ffdb72; box-shadow: 0 4px 0 #c28e51; font-size: 29px; }
.gtc-dialogue p { margin: 0; color: #294750; font-size: .97rem; font-weight: 800; }
.gtc-dialogue .gtc-dialogue-label { display: block; margin-bottom: 4px; color: #176c60; font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; }
.gtc-feedback { margin-top: 12px; padding: 12px 14px; border: 2px solid #4f8d66; border-radius: 16px; background: #edf9df; color: #183e2e; font-weight: 800; }
.gtc-feedback[data-state="retry"] { border-color: #86612b; background: #fff3ca; color: #503918; }
.gtc-feedback[data-state="success"] { border-color: #286546; background: #dcf4df; color: #1c4a32; }
.gtc-feedback[data-state="hint"] { border-color: #3c7194; background: #e2f3fc; color: #153b56; }
.gtc-feedback-title { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-weight: 950; }
.gtc-caption { padding: 8px 10px; border-radius: 10px; background: #142c38; color: #fff; text-align: center; font-size: .9rem; font-weight: 800; }
.gtc-caption[hidden] { display: none; }
.gtc-progress-track { height: 14px; overflow: hidden; border: 2px solid #fff; border-radius: 999px; background: #d9e6df; box-shadow: inset 0 1px 2px #29454a33; }
.gtc-progress-fill { height: 100%; width: var(--gtc-progress, 0%); border-radius: inherit; background: repeating-linear-gradient(135deg, #0d786e 0 10px, #27a58d 10px 20px); transition: width 300ms ease-out; }

.gtc-controls { display: grid; grid-template-columns: repeat(3, minmax(56px, 1fr)); gap: 9px; max-width: 320px; margin: 12px auto 0; }
.gtc-control { min-height: 58px; border: 2px solid #315b69; border-radius: 18px; background: #fffef4; color: #183745; box-shadow: 0 4px 0 #9db9b7; font-size: 1.4rem; font-weight: 1000; cursor: pointer; touch-action: none; user-select: none; }
.gtc-control[data-active="true"] { background: #dcf8ef; transform: translateY(2px); box-shadow: 0 2px 0 #6faaa0; }
.gtc-a11y-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.gtc-a11y-tools label { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #294650; font-size: .9rem; font-weight: 800; }
.gtc-a11y-tools select { min-height: 46px; max-width: 100%; padding: 8px 10px; border: 2px solid #67858b; border-radius: 12px; background: #fffef4; color: #203c48; }
.gtc-avatar-picker { display: flex; flex-wrap: wrap; gap: 9px; }
.gtc-avatar-choice { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid #81999a; border-radius: 17px; background: #fffef5; font-size: 30px; cursor: pointer; }
.gtc-avatar-choice[aria-pressed="true"] { border-color: #074e73; background: #d9f4ff; box-shadow: 0 0 0 3px #7dc8e8; }
.guardian-avatar { display: grid; min-width: 78px; min-height: 78px; place-items: center; gap: 2px; padding: 7px; border: 2px solid #81999a; border-radius: 18px; background: #fffef5; color: #203b45; font-size: 27px; cursor: pointer; }
.guardian-avatar b { font-size: .78rem; }
.guardian-avatar[aria-pressed="true"] { border-color: #074e73; background: #d9f4ff; box-shadow: 0 0 0 3px #7dc8e8; }
.guardian-prediction { display: grid; gap: 8px; }
.guardian-prediction h3 { margin: 0; color: #21444c; font-size: 1rem; }
.guardian-action-row { display: grid; gap: 8px; }
.guardian-action-button { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 50px; padding: 9px 12px; border: 2px solid #36636a; border-radius: 15px; background: #fffef5; color: #183745; box-shadow: 0 4px 0 #9db9b7; text-align: left; font-weight: 900; cursor: pointer; transition: transform 150ms ease,box-shadow 150ms ease,background-color 150ms ease; }
.guardian-action-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #9db9b7; }
.guardian-action-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #9db9b7; }
.guardian-action-button[aria-pressed="true"] { border-color: #075d66; background: #dff6ee; box-shadow: 0 4px 0 #64a9a0; }
.guardian-action-icon { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 13px; background: #e5f3d9; font-size: 23px; }
.guardian-complete-note,.guardian-transfer { padding: 10px 12px; border: 2px solid #4f8d66; border-radius: 14px; background: #edf9df; color: #183e2e; font-weight: 800; }
.gtc-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gtc-final-screen { padding: clamp(22px, 5vw, 48px); border: 3px solid #fff; border-radius: 28px; background: linear-gradient(135deg, #fffbe4, #d6f4e7); text-align: center; box-shadow: 0 8px 0 #78aaa366; }
.gtc-ending-screen { padding: clamp(22px, 5vw, 48px); border: 3px solid #fff; border-radius: 28px; background: linear-gradient(135deg, #fffbe4, #d6f4e7); text-align: center; box-shadow: 0 8px 0 #78aaa366; }
.gtc-ending-screen h2 { color: #17454d; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.gtc-ending-art { margin: 10px 0; font-size: clamp(42px, 9vw, 92px); }
.gtc-ending-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 18px 0; }
.gtc-ending-summary > * { padding: 10px 13px; border: 2px solid #bdd7c5; border-radius: 14px; background: #fffef4; color: #28494d; font-weight: 850; }
.gtc-final-screen h2 { color: #17454d; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.gtc-final-icon { font-size: clamp(54px, 10vw, 100px); filter: drop-shadow(0 7px 0 #d2a64d); }
.gtc-hidden { display: none !important; }
.gtc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 880px) {
  .gtc-world-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gtc-game-layout { grid-template-columns: minmax(0, 1fr); }
  .gtc-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gtc-side-panel > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .gtc-shell,.gtc-app { padding: 8px 10px 28px; }
  .gtc-header { align-items: flex-start; min-height: 56px; margin-bottom: 9px; }
  .gtc-brand-mark { width: 40px; height: 40px; }
  .gtc-brand-name small { font-size: .58rem; }
  .gtc-header-tools { gap: 5px; }
  .gtc-hero { grid-template-columns: 1fr; gap: 6px; padding: 22px 18px; border-radius: 22px; }
  .gtc-hero-art { min-height: 126px; }
  .gtc-hero-art svg,
  .gtc-hero-art img { width: min(100%, 290px); max-height: 150px; }
  .gtc-main { gap: 15px; margin-top: 17px; }
  .gtc-world-map { gap: 9px; }
  .gtc-world-card { min-height: 148px; padding: 12px; border-radius: 17px; }
  .gtc-world-icon { width: 46px; height: 46px; font-size: 26px; }
  .gtc-world-title { font-size: .95rem; }
  .gtc-world-progress { font-size: .72rem; }
  .gtc-side-panel { grid-template-columns: 1fr; }
  .gtc-side-panel > :first-child { grid-column: auto; }
  .gtc-stage,.gtc-scene-frame { border-radius: 18px; }
  #guardian-canvas { min-height: 210px; aspect-ratio: 4 / 3; }
  .gtc-stage-hud { inset: 7px 7px auto; }
  .gtc-stage-help { inset: auto 7px 7px; }
  .gtc-stage-help span { font-size: .68rem; }
  .gtc-controls { gap: 7px; max-width: 270px; }
  .gtc-control,.gtc-move-button { min-height: 62px; }
  .gtc-movement-controls { gap: 6px; }
  .gtc-tools { max-width: 56%; }
  .gtc-tool-button { min-height: 44px; padding: 7px 9px; font-size: .77rem; }
  .gtc-range-label input { width: 67px; }
  .gtc-avatar-section { grid-template-columns: 1fr; }
  .gtc-game-topline { grid-template-columns: auto minmax(0,1fr); }
  .gtc-mission-progress { grid-column: 1 / -1; justify-self: end; }
  .guardian-world-button { grid-template-columns: 48px minmax(0,1fr) auto; min-height: 100px; padding: 10px; border-radius: 16px; }
  .guardian-world-symbol { width: 46px; height: 46px; font-size: 26px; }
  .gtc-heading-row { align-items: start; }
  .gtc-card,
  .gtc-panel { border-radius: 18px; }
}

@media (max-width: 360px) {
  .gtc-world-map { grid-template-columns: 1fr; }
  .gtc-world-card { min-height: 126px; grid-template-columns: 46px 1fr; align-items: center; column-gap: 10px; }
  .gtc-world-card > :not(.gtc-world-icon) { grid-column: 2; }
  .gtc-world-icon { grid-row: 1 / span 3; }
  .gtc-brand-name { max-width: 130px; }
  .gtc-option { padding: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .gtc-body *,
  .gtc-body *::before,
  .gtc-body *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .gtc-progress-fill { transition: none; }
}

@media (forced-colors: active) {
.gtc-body .gtc-card,
  .gtc-panel,
  .gtc-world-card,
  .gtc-option,
  .gtc-btn,
  .gtc-control,
  .gtc-dialogue,
  .gtc-feedback { border: 2px solid CanvasText; }
  .gtc-option[aria-pressed="true"],
  .gtc-world-card.is-current { outline: 3px solid Highlight; }
  .gtc-world-card.is-locked::before { background: Canvas; color: CanvasText; }
}

@keyframes gtc-luma-glow { from { transform: translateY(0) scale(.98); filter: brightness(1); } to { transform: translateY(-4px) scale(1.03); filter: brightness(1.12); } }