:root {
    --gg-teal: #0f7f70;
    --gg-teal-dark: #075148;
    --gg-forest: #081f1c;
    --gg-forest-soft: #12342d;
    --gg-cream: #fff7df;
    --gg-parchment: #f3e2b8;
    --gg-wood: #6b3f20;
    --gg-wood-dark: #3a2113;
    --gg-leaf: #54bf62;
    --gg-water: #35bdf3;
    --gg-sun: #ffd45b;
    --gg-danger: #ff7a43;
    --gg-danger-deep: #c83d2d;
    --gg-shadow: 0 12px 32px rgb(4 27 22 / 34%);
}

* {
    box-sizing: border-box;
}

.minigame-page {
    background: #eaf1eb;
    color: #17231f;
    overscroll-behavior: none;
}

.minigame-shell {
    width: min(100%, 1180px);
}

.gg-app {
    position: relative;
    width: min(100%, 430px);
    min-height: 844px;
    margin: 20px auto 48px;
    overflow: hidden;
    border: 1px solid rgb(15 127 112 / 20%);
    border-radius: 30px;
    background: var(--gg-forest);
    box-shadow: 0 26px 70px rgb(17 54 44 / 24%);
    isolation: isolate;
    touch-action: manipulation;
}

.gg-app button,
.gg-app input {
    font: inherit;
}

.gg-app button {
    -webkit-tap-highlight-color: transparent;
}

.gg-app button:focus-visible,
.gg-app input:focus-visible {
    outline: 3px solid #ffdf77;
    outline-offset: 3px;
}

.gg-loading,
.gg-screen {
    position: absolute;
    inset: 0;
    min-height: 844px;
}

.gg-loading {
    z-index: 50;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 32px;
    color: var(--gg-cream);
    text-align: center;
    background: radial-gradient(circle at 50% 38%, #1c5748 0, #0c2d27 46%, #061915 100%);
}

.gg-loading[hidden],
.gg-screen[hidden],
.gg-modal[hidden],
.gg-modal-backdrop[hidden],
[hidden] {
    display: none !important;
}

.gg-loading-mark {
    width: 60px;
    height: 60px;
    border: 5px solid rgb(255 255 255 / 20%);
    border-top-color: #8be3b4;
    border-radius: 50%;
    animation: gg-spin 1s linear infinite;
}

.gg-loading strong {
    font-size: 20px;
}

.gg-loading span {
    color: #a9c9c0;
    font-size: 14px;
}

@keyframes gg-spin {
    to { transform: rotate(360deg); }
}

.gg-title-screen,
.gg-hub-screen {
    background:
        linear-gradient(180deg, rgb(4 23 19 / 15%), rgb(4 23 19 / 62%)),
        url("./art/green-guard-field.png") center / cover no-repeat;
}

.gg-title-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 3%) 12%, rgb(3 24 19 / 17%) 42%, rgb(3 24 19 / 94%) 87%);
}

.gg-title-content {
    position: absolute;
    z-index: 1;
    right: 24px;
    bottom: max(42px, calc(env(safe-area-inset-bottom) + 24px));
    left: 24px;
    color: var(--gg-cream);
    text-align: center;
}

.gg-kicker {
    display: block;
    margin-bottom: 8px;
    color: #b4e9ce;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.gg-title-content h1 {
    margin: 0;
    color: #fff9dd;
    font-size: clamp(48px, 14vw, 64px);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: 1;
    text-shadow: 0 4px 0 #4b2e18, 0 8px 22px rgb(0 0 0 / 45%);
}

.gg-title-content > p {
    margin: 14px 0 20px;
    color: #e7f4ec;
    font-size: 15px;
    font-weight: 700;
}

.gg-title-record {
    margin: 0 auto 14px;
    padding: 10px 14px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 14px;
    color: #c8dfd8;
    font-size: 13px;
    background: rgb(3 25 20 / 50%);
}

.gg-title-actions,
.gg-result-actions {
    display: grid;
    gap: 9px;
}

.gg-button {
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 90ms ease, filter 90ms ease;
}

.gg-button:active {
    transform: translateY(2px) scale(.99);
}

.gg-button-primary {
    border: 2px solid #f8e29a;
    color: #173027;
    background: linear-gradient(180deg, #ffe991, #f0bd43);
    box-shadow: inset 0 -3px 0 rgb(112 63 18 / 28%), 0 7px 0 #5c371c, 0 12px 18px rgb(0 0 0 / 22%);
}

.gg-button-ghost {
    border: 1px solid rgb(255 255 255 / 22%);
    color: var(--gg-cream);
    background: rgb(8 54 45 / 78%);
}

.gg-button-danger {
    border: 1px solid rgb(255 155 125 / 40%);
    color: #ffd9cb;
    background: rgb(126 36 28 / 70%);
}

.gg-corner-button {
    position: absolute;
    z-index: 2;
    top: max(20px, env(safe-area-inset-top));
    right: 18px;
    min-width: 48px;
    min-height: 44px;
    border: 2px solid #9b7148;
    border-radius: 13px;
    color: #fff8e7;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(#5a3a22, #3d2819);
    box-shadow: 0 5px 0 #24160d;
}

.gg-page-header {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: max(18px, env(safe-area-inset-top)) 16px 12px;
    color: var(--gg-cream);
    background: linear-gradient(180deg, rgb(5 31 26 / 98%), rgb(5 38 31 / 86%));
    backdrop-filter: blur(12px);
}

.gg-page-header > div:not(.gg-currencies) {
    display: grid;
}

.gg-page-header span,
.gg-page-header small {
    color: #a9cfc3;
    font-size: 11px;
    font-weight: 800;
}

.gg-page-header strong {
    font-size: 18px;
}

.gg-back,
.gg-pause-button,
.gg-exit-button,
.gg-modal header button {
    min-height: 42px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 12px;
    color: #f7f2de;
    font-size: 12px;
    font-weight: 900;
    background: rgb(40 75 62 / 80%);
}

.gg-currencies {
    display: grid;
    gap: 3px;
    text-align: right;
}

.gg-currencies span {
    color: #f4db8d;
}

.gg-hub-screen::after {
    content: "";
    position: absolute;
    inset: 82px 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 10%, rgb(4 24 20 / 70%) 82%);
}

.gg-hub-avatar {
    position: absolute;
    z-index: 1;
    top: 122px;
    left: 50%;
    width: 126px;
    height: 154px;
    transform: translateX(-50%);
    background: url("./art/green-guard-farmer-atlas.png") 0 0 / 400% 100% no-repeat;
    filter: drop-shadow(0 12px 10px rgb(0 0 0 / 30%));
}

.gg-hub-grid {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.gg-facility {
    display: grid;
    gap: 2px;
    min-height: 92px;
    padding: 12px;
    border: 2px solid #7b5731;
    border-radius: 17px;
    color: #fdf1ce;
    text-align: left;
    background: linear-gradient(145deg, rgb(75 50 29 / 96%), rgb(42 37 24 / 96%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 6px 0 #24170e;
}

.gg-facility span {
    color: #9bdaba;
    font-size: 11px;
    font-weight: 900;
}

.gg-facility strong {
    font-size: 15px;
}

.gg-facility small {
    color: #c9c3aa;
    font-size: 10px;
}

.gg-facility-launch {
    grid-column: 1 / -1;
    min-height: 84px;
    border-color: #e0bb61;
    background: linear-gradient(145deg, rgb(17 109 88 / 98%), rgb(8 65 54 / 98%));
}

.gg-prep-screen,
.gg-map-screen,
.gg-result-screen {
    color: #1d2b25;
    background: #eee5c7;
}

.gg-prep-scroll {
    height: calc(844px - 82px - 80px);
    padding: 15px 14px 94px;
    overflow-y: auto;
    background:
        linear-gradient(rgb(250 246 226 / 94%), rgb(238 229 199 / 96%)),
        url("./art/green-guard-field.png") center / cover;
}

.gg-choice-section {
    margin-bottom: 17px;
}

.gg-section-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.gg-section-heading > span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 9px;
    color: white;
    font-size: 12px;
    font-weight: 950;
    background: var(--gg-teal);
}

.gg-section-heading > div {
    display: grid;
}

.gg-section-heading strong {
    font-size: 15px;
}

.gg-section-heading small {
    color: #647169;
    font-size: 10px;
}

.gg-choice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 2px 1px 8px;
}

.gg-choice-card,
.gg-tool-card,
.gg-difficulty-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 104px;
    padding: 11px;
    border: 2px solid #c7b98e;
    border-radius: 15px;
    color: #28342e;
    text-align: left;
    background: rgb(255 253 239 / 95%);
    box-shadow: 0 3px 0 #b2a47c;
    scroll-snap-align: start;
}

.gg-choice-card[aria-pressed="true"],
.gg-tool-card[aria-pressed="true"],
.gg-difficulty-card[aria-pressed="true"] {
    border-color: var(--gg-teal);
    box-shadow: 0 0 0 3px rgb(15 127 112 / 16%), 0 3px 0 var(--gg-teal-dark);
}

.gg-choice-card[disabled],
.gg-tool-card[disabled] {
    filter: grayscale(.55);
    opacity: .7;
}

.gg-choice-card strong,
.gg-tool-card strong,
.gg-difficulty-card strong {
    font-size: 14px;
}

.gg-choice-card small,
.gg-tool-card small,
.gg-difficulty-card small {
    color: #68746c;
    font-size: 10px;
    line-height: 1.45;
}

.gg-choice-card b,
.gg-tool-card b,
.gg-difficulty-card b {
    color: var(--gg-teal-dark);
    font-size: 10px;
}

.gg-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.gg-difficulty-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.gg-tool-card {
    min-height: 112px;
}

.gg-tool-card em {
    color: #7d3f2b;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}

.gg-locked-summary {
    grid-column: 1 / -1;
    margin: 0;
    padding: 8px 10px;
    border: 1px dashed #a89b76;
    border-radius: 10px;
    color: #647169;
    font-size: 10px;
    font-weight: 800;
    background: rgb(255 253 239 / 70%);
}

.gg-tool-symbol {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    color: white;
    font-size: 10px;
    font-weight: 950;
    background: var(--gg-teal);
}

.gg-type-icon {
    flex: 0 0 auto;
    background-color: color-mix(in srgb, var(--type-color, var(--gg-teal)) 18%, #fff8dd);
    background-image: url("./art/green-guard-skill-icons.svg");
    background-position: var(--icon-x, 0%) var(--icon-y, 0%);
    background-repeat: no-repeat;
    background-size: 300% 200%;
}

.gg-tool-symbol.gg-type-icon,
.gg-seed-symbol.gg-type-icon {
    color: transparent;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--type-color) 64%, transparent);
}

.gg-difficulty-card {
    grid-template-columns: 72px 1fr;
    min-height: 74px;
    align-items: center;
}

.gg-difficulty-card strong {
    grid-row: 1 / 3;
}

.gg-difficulty-card b {
    line-height: 1.4;
}

.gg-sticky-action {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 80px;
    padding: 13px 16px max(13px, env(safe-area-inset-bottom));
    border-top: 1px solid rgb(83 67 35 / 18%);
    background: rgb(255 251 231 / 96%);
    box-shadow: 0 -12px 30px rgb(57 42 20 / 10%);
}

.gg-sticky-action > div {
    color: #4b5b52;
    font-size: 11px;
    font-weight: 800;
}

.gg-sticky-action .gg-button {
    min-width: 132px;
}

.gg-map-screen {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    background:
        linear-gradient(180deg, rgb(230 241 222 / 92%), rgb(237 223 185 / 96%)),
        url("./art/green-guard-field.png") center / cover;
}

.gg-map-header {
    background: linear-gradient(180deg, #0d5144, #0a3d34);
}

.gg-risk {
    padding: 7px 9px;
    border-radius: 10px;
    color: #402210 !important;
    background: #ffd36a;
}

.gg-build-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 48px;
    padding: 8px 14px;
    max-height: 82px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgb(255 252 235 / 80%);
}

.gg-build-chip,
.gg-tag-chip {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgb(44 85 64 / 17%);
    border-radius: 999px;
    color: #285646;
    font-size: 10px;
    font-weight: 900;
    background: white;
}

.gg-route {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 22px 18px 88px;
    overflow-y: auto;
}

.gg-route::before {
    display: none;
}

.gg-route-node {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-height: 104px;
    margin-bottom: 14px;
    padding: 13px 15px;
    border: 3px solid #795130;
    border-radius: 21px;
    color: #2c342d;
    text-align: left;
    background: #fff9df;
    box-shadow: 0 7px 0 #4b301c, 0 14px 24px rgb(56 36 16 / 18%);
}

.gg-route-node strong {
    font-size: 16px;
}

.gg-route-node small {
    margin-top: 4px;
    color: #68736c;
    font-size: 10px;
    line-height: 1.45;
}

.gg-route-node b {
    color: var(--gg-teal-dark);
    font-size: 11px;
}

.gg-route-node[data-type="elite"],
.gg-route-node[data-type="guardian"] {
    border-color: #b5503d;
    background: #fff1d0;
}

.gg-map-tip {
    position: absolute;
    right: 18px;
    bottom: max(22px, env(safe-area-inset-bottom));
    left: 18px;
    padding: 11px 14px;
    border-radius: 14px;
    color: #f8f1d8;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    background: rgb(8 48 40 / 88%);
}

.gg-combat-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: #1b3b2b;
}

.gg-combat-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.gg-combat-rail {
    display: none;
}

.gg-combat-screen canvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 844px;
    background: #8c6a32;
    touch-action: none;
}

.gg-combat-hud {
    position: absolute;
    z-index: 8;
    top: max(14px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    pointer-events: none;
}

.gg-player-status {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 7px;
    min-height: 72px;
    padding: 5px 9px 5px 5px;
    border: 3px solid #704827;
    border-radius: 18px;
    background: rgb(32 38 23 / 88%);
    box-shadow: 0 4px 0 #382513;
}

.gg-portrait {
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: 2px solid #d5bb73;
    border-radius: 50%;
    background-color: #285a43;
    background-image: url("./art/green-guard-farmer-atlas.png");
    background-repeat: no-repeat;
    background-position: -20px -4px;
    background-size: 760% auto;
}

.gg-bars {
    display: grid;
    gap: 3px;
}

.gg-status-track,
.gg-boss-bar > div {
    position: relative;
    overflow: hidden;
    border: 2px solid #2b1d11;
    border-radius: 8px;
    background: #211f18;
}

.gg-health-track {
    height: 20px;
}

.gg-health-track > span,
.gg-shield-track > span,
.gg-growth-track > span,
.gg-boss-bar span {
    display: block;
    width: 100%;
    height: 100%;
    transition: width 180ms ease;
}

.gg-health-track > span {
    background: linear-gradient(#3fd47a, #13914c);
}

.gg-status-track b {
    position: absolute;
    inset: 0;
    color: white;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    text-shadow: 0 1px 2px black;
}

.gg-shield-track,
.gg-growth-track {
    height: 13px;
}

.gg-shield-track > span {
    background: #37c8ec;
}

.gg-growth-track > span {
    background: linear-gradient(90deg, #d6b54e, #ffe274);
}

.gg-growth-track[data-active="true"] > span {
    background: linear-gradient(90deg, #62cc68, #c8f678);
}

.gg-shield-track b,
.gg-growth-track b {
    font-size: 8px;
    line-height: 9px;
}

.gg-combat-menu-buttons {
    display: grid;
    align-content: stretch;
    gap: 4px;
    min-width: 58px;
    pointer-events: auto;
}

.gg-pause-button,
.gg-exit-button {
    min-width: 56px;
    min-height: 33px;
    padding: 0 8px;
    pointer-events: auto;
    border: 3px solid #805a38;
    background: linear-gradient(#5a3c22, #352516);
    box-shadow: 0 4px 0 #25160c;
}

.gg-exit-button {
    border-color: #9b5a43;
    color: #ffe9d8;
    background: linear-gradient(#70402c, #45251c);
}

.gg-mission-banner {
    grid-column: 1 / -1;
    justify-self: center;
    display: grid;
    gap: 1px;
    min-width: 210px;
    padding: 8px 18px;
    border: 2px solid #704c2b;
    border-radius: 14px;
    color: #fff7dc;
    text-align: center;
    background: rgb(6 77 67 / 91%);
    box-shadow: 0 4px 0 #3e2b18;
}

.gg-mission-banner strong {
    font-size: 15px;
}

.gg-mission-banner span {
    color: #bce4d6;
    font-size: 9px;
    font-weight: 800;
}

.gg-wave-status {
    grid-column: 1 / -1;
    justify-self: center;
    display: grid;
    grid-template-columns: auto auto;
    gap: 3px 10px;
    width: min(390px, calc(100% - 24px));
    padding: 5px 10px 6px;
    border: 1px solid rgb(207 238 198 / 48%);
    border-radius: 10px;
    color: #e8f6df;
    font-size: 9px;
    font-weight: 900;
    background: rgb(10 51 40 / 86%);
    box-shadow: 0 2px 0 rgb(29 25 13 / 55%);
}

.gg-wave-status span:last-of-type {
    color: #d8ff76;
    text-align: right;
}

.gg-wave-status i {
    grid-column: 1 / -1;
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: rgb(0 0 0 / 44%);
}

.gg-wave-status i b {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7bd85a, #e9ff79);
    box-shadow: 0 0 7px #baff68;
    transition: width 180ms ease;
}

.gg-auto-skill-status {
    grid-column: 1 / -1;
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: calc(100% - 24px);
    padding: 5px;
    border: 1px solid rgb(207 238 198 / 44%);
    border-radius: 10px;
    color: #ddf8d1;
    font-size: 9px;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    background: rgb(18 49 38 / 76%);
}

.gg-auto-skill-status strong {
    align-self: center;
    padding: 0 3px;
    color: #fff3a5;
}

.gg-auto-skill-status[data-compact="true"] {
    flex-wrap: nowrap;
    max-width: calc(100% - 14px);
}

.gg-auto-skill-status[data-compact="true"] .gg-skill-chip {
    min-width: 0;
    flex: 1 1 64px;
}

.gg-skill-more {
    display: grid;
    width: 26px;
    min-width: 26px;
    height: 26px;
    place-items: center;
    align-self: center;
    border: 1px solid rgb(215 237 202 / 36%);
    border-radius: 50%;
    color: #fff0a3;
    font-size: 9px;
    font-weight: 950;
    background: rgb(3 28 22 / 76%);
}

.gg-skill-chip {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 5px;
    min-width: 68px;
    padding: 4px 6px 6px;
    overflow: hidden;
    border: 1px solid rgb(215 237 202 / 26%);
    border-radius: 7px;
    text-align: left;
    background: rgb(3 28 22 / 60%);
}

.gg-skill-chip > .gg-type-icon {
    grid-row: 1 / 3;
    width: 22px;
    height: 22px;
    align-self: center;
    border: 1px solid color-mix(in srgb, var(--type-color) 70%, white);
    border-radius: 7px;
}

.gg-skill-chip b,
.gg-skill-chip small {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-skill-chip b {
    color: #e7f5e5;
    font-size: 8px;
}

.gg-skill-chip small {
    color: #a9c6bc;
    font-size: 7px;
}

.gg-skill-chip i {
    grid-column: 1 / -1;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #52cca5 var(--skill-progress), rgb(255 255 255 / 12%) var(--skill-progress));
}

.gg-skill-chip[data-reserved="true"] {
    border-color: #79e7ff;
    animation: gg-skill-reserved .7s ease-in-out infinite alternate;
    box-shadow: 0 0 12px rgb(91 213 255 / 34%);
}

.gg-skill-chip[data-reserved="true"] small {
    color: #9deaff;
}

@keyframes gg-skill-reserved {
    to { transform: translateY(-1px); }
}

.gg-skill-chip[data-ready="true"] {
    border-color: #ffe074;
    box-shadow: 0 0 9px rgb(255 224 116 / 24%);
}

.gg-skill-chip[data-ready="true"] small {
    color: #ffe98f;
}

.gg-boss-bar {
    grid-column: 1 / -1;
    display: grid;
    gap: 3px;
    color: #fff1cc;
    font-size: 11px;
    text-align: center;
}

.gg-boss-bar > div {
    height: 13px;
}

.gg-boss-bar span {
    background: linear-gradient(90deg, #dc493a, #ff8751);
}

.gg-boss-bar[data-vulnerable="true"] strong {
    color: #fff0a3;
    text-shadow: 0 0 10px rgb(255 224 95 / 70%);
}

.gg-boss-bar[data-vulnerable="true"] span {
    background: linear-gradient(90deg, #f0b936, #fff09b);
}

.gg-combo {
    position: absolute;
    z-index: 7;
    top: 206px;
    right: 14px;
    padding: 7px 10px;
    border-radius: 12px;
    color: #44250c;
    font-size: 12px;
    font-weight: 950;
    background: #ffdc62;
    box-shadow: 0 4px 0 #8b5521;
}

.gg-touch-controls {
    position: absolute;
    z-index: 9;
    inset: 0;
    pointer-events: none;
}

.gg-joystick {
    position: absolute;
    top: 70%;
    left: 24%;
    width: 112px;
    height: 112px;
    border: 3px solid rgb(255 248 216 / 40%);
    border-radius: 50%;
    pointer-events: none;
    background: rgb(27 39 29 / 33%);
    box-shadow: inset 0 0 24px rgb(255 255 255 / 8%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
    transition: opacity 90ms ease, transform 90ms ease;
    touch-action: none;
}

.gg-joystick[data-active="true"] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gg-joystick::before {
    content: "드래그 이동";
    position: absolute;
    top: 11px;
    right: 0;
    left: 0;
    color: rgb(255 255 255 / 62%);
    font-size: 9px;
    font-weight: 900;
    text-align: center;
}

.gg-joystick span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    border: 3px solid #dec694;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgb(238 221 178 / 80%);
    box-shadow: 0 5px 10px rgb(0 0 0 / 28%);
}

.gg-room-intro {
    position: absolute;
    z-index: 15;
    top: 44%;
    right: 18px;
    left: 18px;
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 18px;
    border: 3px solid #8f6740;
    border-radius: 18px;
    color: #fff8df;
    text-align: center;
    background: rgb(5 54 45 / 92%);
    box-shadow: 0 8px 0 #372414, var(--gg-shadow);
    animation: gg-room-in 350ms ease both;
}

.gg-room-intro span,
.gg-room-intro small {
    color: #a8ddc8;
    font-size: 11px;
    font-weight: 850;
}

.gg-room-intro strong {
    font-size: 22px;
}

@keyframes gg-room-in {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
}

.gg-modal-backdrop {
    position: absolute;
    z-index: 30;
    inset: 0;
    background: rgb(2 19 15 / 72%);
    backdrop-filter: blur(5px);
}

.gg-modal {
    position: absolute;
    z-index: 31;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 14px;
    max-height: calc(100% - 40px);
    padding: 18px;
    overflow-y: auto;
    border: 3px solid #76502e;
    border-radius: 22px;
    color: #26352e;
    background: #fff8df;
    box-shadow: 0 9px 0 #3c2818, 0 20px 50px rgb(0 0 0 / 42%);
    animation: gg-modal-up 220ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes gg-modal-up {
    from { opacity: 0; transform: translateY(24px); }
}

.gg-modal header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.gg-modal header > div:first-child {
    display: grid;
}

.gg-modal header span {
    color: var(--gg-teal-dark);
    font-size: 11px;
    font-weight: 900;
}

.gg-modal header strong {
    font-size: 19px;
}

.gg-modal header button {
    color: #25473d;
    background: #e4ead8;
}

.gg-reward-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 3px 0 8px;
    overflow: visible;
}

.gg-reward-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    min-height: 218px;
    padding: 10px 7px 9px;
    border: 2px solid var(--rarity-color, #9f9d82);
    border-radius: 14px;
    color: #24352e;
    text-align: left;
    background: linear-gradient(165deg, white, #f3edcf);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--rarity-color, #777) 45%, #3a2b18);
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.gg-reward-card:hover:not(:disabled) {
    color: #24352e;
    background: linear-gradient(165deg, white, #f3edcf);
}

.gg-reward-card:focus-visible:not(:disabled) {
    outline: 3px solid #ffcf4f;
    outline-offset: 2px;
}

.gg-reward-card[data-selected="true"] {
    border-color: var(--gg-teal);
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px rgb(15 127 112 / 22%), 0 6px 0 var(--gg-teal-dark);
}

.gg-reward-card[data-selected="true"]::after {
    content: "✓";
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: white;
    font-size: 13px;
    font-weight: 950;
    background: var(--gg-teal);
}

.gg-reward-card[data-unaffordable="true"]:not([data-selected="true"]) {
    filter: saturate(.65);
    background: linear-gradient(165deg, #f3f1e8, #dddccc);
}

.gg-reward-card:disabled {
    opacity: 1;
    border-color: #8b8f80;
    color: #505b54;
    cursor: not-allowed;
    background: linear-gradient(165deg, #f3f1e8, #dddccc);
    box-shadow: 0 4px 0 #77796f;
}

.gg-reward-card:disabled b,
.gg-reward-card:disabled p,
.gg-reward-card:disabled footer em {
    color: #59655e;
}

.gg-reward-card .gg-seed-symbol {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 2px solid var(--seed-color, var(--rarity-color, #777));
    border-radius: 15px 9px 15px 9px;
    color: var(--seed-color, var(--rarity-color, #777));
    font-size: 10px;
    font-weight: 950;
    background-color: #f4ecd0;
}

.gg-reward-card b {
    color: var(--rarity-color, #777);
    font-size: 10px;
    line-height: 1.25;
}

.gg-reward-card strong {
    min-height: 29px;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.gg-reward-card p {
    margin: 0;
    color: #59675f;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.gg-reward-impact {
    min-height: 29px;
    padding: 5px 6px;
    border: 1px solid color-mix(in srgb, var(--rarity-color, #777) 35%, transparent);
    border-radius: 7px;
    color: #184e41;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.25;
    background: rgb(255 255 255 / 52%);
}

.gg-reward-playstyle {
    color: #53645b;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.3;
}

.gg-reward-card footer {
    display: grid;
    gap: 3px;
    margin-top: auto;
    font-size: 10px;
    line-height: 1.2;
}

.gg-reward-card footer em {
    color: var(--rarity-color, #59675f);
    font-style: normal;
    font-weight: 950;
}

.gg-modal[data-gg-modal="reward"] {
    padding: 14px 10px 12px;
}

.gg-modal[data-gg-modal="reward"] header {
    gap: 8px;
    margin-bottom: 9px;
}

.gg-modal[data-gg-modal="reward"] header strong {
    font-size: 16px;
}

.gg-tag-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: end;
}

.gg-tag-summary span {
    padding: 2px 4px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 9px;
    background: rgb(255 255 255 / 72%);
}

.gg-choice-modal {
    display: grid;
    gap: 12px;
}

.gg-choice-copy {
    margin: -3px 0 2px;
    color: #59685f;
    font-size: 12px;
    line-height: 1.55;
}

.gg-choice-options {
    display: grid;
    gap: 9px;
}

.gg-choice-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    min-height: 66px;
    padding: 11px 13px;
    border: 2px solid #9c7a4a;
    border-radius: 14px;
    color: #263a31;
    text-align: left;
    background: linear-gradient(160deg, #fffdf1, #eee2ba);
    box-shadow: 0 4px 0 #604126;
}

.gg-choice-option strong {
    font-size: 14px;
}

.gg-choice-option small {
    grid-column: 1 / -1;
    color: #637168;
    font-size: 10px;
    line-height: 1.4;
}

.gg-choice-option em {
    align-self: center;
    color: var(--gg-teal-dark);
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
}

.gg-choice-option:disabled {
    opacity: .58;
    cursor: not-allowed;
    box-shadow: 0 3px 0 #777064;
}

.gg-modal > footer {
    display: flex;
    gap: 9px;
    justify-content: center;
    margin-top: 10px;
}

.gg-skill-tree-modal {
    top: 50%;
    bottom: auto;
    max-height: calc(100% - 28px);
    padding: 14px 12px;
    transform: translateY(-50%);
}

.gg-skill-tree-modal > header {
    align-items: center;
    margin-bottom: 8px;
}

.gg-skill-point-badge {
    flex: 0 0 auto;
    padding: 7px 9px;
    border: 2px solid #b47b22;
    border-radius: 12px;
    color: #604313;
    font-size: 10px;
    background: #ffe886;
    box-shadow: 0 3px 0 #8c5a19;
}

.gg-skill-tree-modal .gg-choice-copy {
    margin: 0 0 9px;
    font-size: 10px;
    line-height: 1.4;
}

.gg-skill-tree-grid {
    display: grid;
    gap: 8px;
}

.gg-field-combo-strip {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid #d7c779;
    border-radius: 12px;
    color: #4f542e;
    font-size: 9px;
    background: linear-gradient(135deg, #fff9d9, #f2f7d9);
}

.gg-field-combo-strip > span {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 4px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--combo-color) 75%, #7c7448);
    border-radius: 9px;
    background: color-mix(in srgb, var(--combo-color) 18%, white);
}

.gg-field-combo-strip > span small {
    grid-column: 1 / -1;
    color: #66705b;
    font-size: 7px;
}

.gg-field-branch-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.gg-field-branch-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 36px;
    padding: 5px 4px;
    border: 2px solid color-mix(in srgb, var(--branch-color) 72%, #665f48);
    border-radius: 10px;
    color: #435149;
    font-size: 9px;
    font-weight: 900;
    background: #f0eee2;
}

.gg-field-branch-tabs button[aria-pressed="true"] {
    color: #173c2d;
    background: color-mix(in srgb, var(--branch-color) 24%, white);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--branch-color) 65%, #6b634c);
}

.gg-field-branch-tabs small {
    padding: 1px 4px;
    border-radius: 6px;
    color: white;
    font-size: 7px;
    background: var(--branch-color);
}

.gg-field-branch {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 2px solid color-mix(in srgb, var(--branch-color) 72%, #3b4b3f);
    border-radius: 14px;
    background: color-mix(in srgb, var(--branch-color) 11%, #fffaf0);
}

.gg-skill-tree-grid > .gg-field-branch {
    display: none;
}

.gg-skill-tree-grid > .gg-field-branch[data-active="true"] {
    display: grid;
}

.gg-field-branch > header {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
    margin: 0;
}

.gg-field-branch > header strong {
    color: color-mix(in srgb, var(--branch-color) 78%, #26352e);
    font-size: 13px;
}

.gg-field-branch > header small {
    color: #65736b;
    font-size: 9px;
    font-weight: 750;
}

.gg-field-branch > header > b {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 8px;
    color: white;
    font-size: 8px;
    background: var(--branch-color);
}

.gg-field-node-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.gg-field-node {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-content: start;
    gap: 2px 5px;
    min-width: 0;
    min-height: 78px;
    padding: 6px 4px;
    border: 2px solid #aaa995;
    border-radius: 10px;
    color: #33443a;
    text-align: left;
    background: #e8e6d7;
    box-shadow: 0 3px 0 #888777;
}

.gg-field-node > span {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 4px;
    display: grid;
    width: 18px;
    height: 18px;
    margin: 0;
    place-items: center;
    border-radius: 50%;
    color: white;
    font-size: 9px;
    background: #8b968e;
}

.gg-field-node strong {
    grid-column: 2;
    min-height: 0;
    font-size: 10px;
    line-height: 1.1;
    word-break: keep-all;
}

.gg-field-node b {
    grid-column: 2;
    color: #4f6258;
    font-size: 8px;
}

.gg-field-node small {
    grid-column: 2;
    display: block;
    color: #69756d;
    font-size: 8px;
    line-height: 1.22;
}

.gg-field-node em {
    grid-column: 2;
    color: color-mix(in srgb, var(--branch-color) 80%, #3e5145);
    font-size: 7px;
    font-style: normal;
    font-weight: 850;
    line-height: 1.2;
}

.gg-field-node[data-state="available"] {
    border-color: var(--branch-color);
    color: #1f3d31;
    cursor: pointer;
    background: white;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--branch-color) 72%, #655);
    animation: gg-skill-ready 1.3s ease-in-out infinite alternate;
}

.gg-field-node[data-state="available"] > span,
.gg-field-node[data-state="unlocked"] > span {
    background: var(--branch-color);
}

.gg-field-node[data-state="unlocked"] {
    opacity: 1;
    border-color: var(--branch-color);
    color: #254132;
    background: color-mix(in srgb, var(--branch-color) 22%, white);
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 50%);
}

.gg-field-node[data-state="locked"] {
    opacity: .56;
}

.gg-field-node[data-state="replaced"] {
    opacity: .46;
    filter: grayscale(.7);
}

@keyframes gg-skill-ready {
    to { box-shadow: 0 3px 0 color-mix(in srgb, var(--branch-color) 72%, #655), 0 0 0 3px color-mix(in srgb, var(--branch-color) 24%, transparent); }
}

.gg-modal[data-gg-modal="reward"] > footer {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
}

.gg-modal[data-gg-modal="reward"] > footer .gg-button {
    min-height: 44px;
    padding: 0 8px;
    font-size: 11px;
}

.gg-modal[data-gg-modal="reward"] > footer .gg-shop-exit {
    grid-column: 1 / -1;
}

.gg-modal .gg-button-ghost {
    color: #215043;
    background: #dce9dc;
}

.gg-pause-modal,
.gg-settings-modal,
.gg-panel-modal {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.gg-pause-modal {
    display: grid;
    gap: 9px;
}

.gg-pause-modal [data-gg-exit-game] {
    display: grid;
    height: auto;
    min-height: 48px;
    place-content: center;
    gap: 1px;
}

.gg-pause-modal [data-gg-exit-game] small {
    color: #61746a;
    font-size: 8px;
    font-weight: 750;
}

.gg-pause-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.gg-pause-summary span,
.gg-result-stats span {
    display: grid;
    gap: 3px;
    padding: 11px;
    border: 1px solid #d8cda9;
    border-radius: 12px;
    background: #f5efd9;
}

.gg-pause-summary small,
.gg-result-stats small {
    color: #738079;
    font-size: 9px;
}

.gg-settings-modal label {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    color: #41534a;
    font-size: 13px;
    font-weight: 850;
}

.gg-settings-modal label > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.gg-settings-modal output {
    color: var(--gg-teal-dark);
    font-weight: 950;
}

.gg-settings-modal input[type="range"] {
    width: 100%;
    accent-color: var(--gg-teal);
}

.gg-settings-modal .gg-toggle {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #e1d8ba;
}

.gg-guide-modal {
    top: 50%;
    bottom: auto;
    display: grid;
    gap: 12px;
    transform: translateY(-50%);
}

.gg-guide-steps {
    display: grid;
    gap: 8px;
}

.gg-guide-steps > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid #ddcfaa;
    border-radius: 12px;
    background: #f7f0d7;
}

.gg-guide-steps > div > b {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: white;
    background: var(--gg-teal);
}

.gg-guide-steps span {
    display: grid;
    gap: 2px;
}

.gg-guide-steps strong {
    font-size: 12px;
}

.gg-guide-steps small {
    color: #68766e;
    font-size: 9px;
    line-height: 1.4;
}

.gg-toggle span {
    display: grid;
}

.gg-toggle small {
    color: #758079;
    font-size: 10px;
    font-weight: 600;
}

.gg-toggle input {
    width: 22px;
    height: 22px;
    accent-color: var(--gg-teal);
}

.gg-panel-modal [data-gg-panel-content] {
    color: #4c5b53;
    font-size: 13px;
    line-height: 1.65;
}

.gg-panel-list {
    display: grid;
    gap: 8px;
}

.gg-panel-list > div {
    padding: 11px;
    border: 1px solid #d9cda5;
    border-radius: 13px;
    background: #f5efd9;
}

.gg-panel-list strong,
.gg-panel-list span {
    display: block;
}

.gg-panel-list span {
    color: #68766e;
    font-size: 11px;
}

.gg-panel-subheading {
    margin: 16px 0 8px;
    color: #274e41;
    font-size: 14px;
}

.gg-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.gg-upgrade-card {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 112px;
    padding: 11px;
    border: 2px solid #b99a53;
    border-radius: 14px;
    color: #2d493d;
    text-align: left;
    background: linear-gradient(150deg, #fff9de, #edf2cf);
    box-shadow: 0 3px 0 #9b7c3f;
}

.gg-upgrade-card > span {
    justify-self: start;
    padding: 3px 6px;
    border-radius: 999px;
    color: #fff8d8;
    font-size: 9px;
    font-weight: 900;
    background: #287760;
}

.gg-upgrade-card > strong {
    font-size: 12px;
}

.gg-upgrade-card > small {
    color: #66756d;
    font-size: 9px;
    line-height: 1.4;
}

.gg-upgrade-card > b {
    margin-top: auto;
    color: #8b5e20;
    font-size: 9px;
}

.gg-upgrade-card:disabled {
    cursor: default;
    filter: grayscale(.55);
    opacity: .62;
    box-shadow: none;
}

.gg-result-screen {
    padding: max(64px, calc(env(safe-area-inset-top) + 34px)) 20px max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgb(13 80 66 / 86%), rgb(8 35 29 / 96%)),
        url("./art/green-guard-field.png") center / cover;
}

.gg-result-hero {
    color: #fff6da;
    text-align: center;
}

.gg-result-hero span {
    color: #a9e5c7;
    font-size: 12px;
    font-weight: 950;
}

.gg-result-hero h2 {
    margin: 8px 0;
    font-size: 34px;
    letter-spacing: -.05em;
}

.gg-result-hero p {
    color: #d3e4dc;
    font-size: 13px;
}

.gg-result-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 20px 0;
}

.gg-result-build {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 16px;
    background: rgb(255 248 218 / 92%);
}

.gg-result-build > strong {
    flex: 1 0 100%;
}

.gg-result-build > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gg-result-build > div > span {
    padding: 5px 8px;
    border: 1px solid #d6c892;
    border-radius: 999px;
    color: #315648;
    font-size: 10px;
    font-weight: 850;
    background: #fffdf0;
}

.gg-live {
    position: absolute;
    z-index: 60;
    right: 20px;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 20px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: #f8f3dc;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
    background: rgb(5 41 34 / 90%);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.gg-live[data-show="true"] {
    opacity: 1;
    transform: translateY(0);
}

.gg-app[data-high-contrast="true"] .gg-mission-banner,
.gg-app[data-high-contrast="true"] .gg-route-node {
    border-width: 4px;
}

.gg-app[data-high-contrast="true"] canvas {
    filter: contrast(1.08) saturate(.94);
}

body.gg-game-active {
    --gg-sitebar-height: 56px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--gg-forest);
}

body.gg-game-active.gg-combat-active {
    overflow: hidden;
}

body.gg-fullscreen-mode {
    overflow: hidden;
    background: #071d18;
}

body.gg-fullscreen-mode .topbar {
    display: none;
}

body.gg-fullscreen-mode .minigame-shell {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    padding: 0;
}

body.gg-fullscreen-mode .gg-app {
    top: 0 !important;
    height: 100dvh !important;
    min-height: 0;
    margin-top: 0 !important;
}

body.gg-fullscreen-mode .gg-app[data-screen="combat"],
.gg-app:fullscreen[data-screen="combat"] {
    position: fixed;
    z-index: 80;
    inset: 0;
    width: 100vw !important;
    max-width: none;
    height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.gg-app:fullscreen {
    background: #071d18;
}

body.gg-game-active .minigame-shell {
    width: 100vw;
    max-width: none;
    padding: 0;
}

body.gg-game-active .topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 60;
    min-height: var(--gg-sitebar-height);
    margin: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    border-width: 0 0 1px;
    border-radius: 0;
}

.minigame-page .topbar .nav-button,
.minigame-page .topbar .global-nav a {
    min-height: 44px;
}

body.gg-game-active .gg-app {
    width: min(100%, 430px);
    height: calc(100dvh - var(--gg-sitebar-height));
    min-height: 0;
    margin: var(--gg-sitebar-height) auto 0;
    border: 0;
    border-radius: 0;
}

body.gg-game-active .gg-app:not([data-screen="prep"]) {
    top: var(--gg-sitebar-height);
    margin-top: 0;
}

body.gg-game-active .gg-loading,
body.gg-game-active .gg-screen {
    height: 100%;
    min-height: 0;
}

body.gg-game-active .gg-prep-scroll {
    height: calc(100% - 162px);
}

body.gg-game-active .gg-combat-screen canvas {
    height: 100%;
    min-height: 0;
}

@media (min-width: 700px) {
    .gg-upgrade-grid,
    .gg-result-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gg-skill-tree-modal {
        right: auto;
        left: 50%;
        width: min(880px, calc(100% - 32px));
        transform: translate(-50%, -50%);
    }

    .gg-skill-tree-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .gg-field-branch-tabs {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .gg-skill-tree-grid > .gg-field-branch {
        display: none;
    }

    .gg-skill-tree-grid > .gg-field-branch[data-active="true"] {
        display: grid;
    }

    .gg-field-node-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gg-field-node {
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: start;
        min-height: 82px;
        padding: 6px;
        text-align: left;
    }

    .gg-field-node > span {
        grid-row: auto;
        width: 18px;
        height: 18px;
    }

    .gg-field-node strong {
        min-height: 0;
        font-size: 11px;
    }

    .gg-field-node b {
        text-align: left;
    }

    .gg-field-node small {
        display: block;
        grid-column: 2 / -1;
        color: #69756d;
        font-size: 8px;
        line-height: 1.25;
    }

    .gg-field-node em {
        grid-column: 2 / -1;
    }

    body:not(.gg-game-active) .gg-app[data-screen="boot"],
    body:not(.gg-game-active) .gg-app[data-screen="title"] {
        height: min(844px, calc(100dvh - 104px));
        min-height: 0;
        margin: 20px auto 14px;
    }

    body:not(.gg-game-active) .gg-app[data-screen="boot"] .gg-loading,
    body:not(.gg-game-active) .gg-app[data-screen="title"] .gg-title-screen {
        height: 100%;
        min-height: 0;
    }

    body.gg-game-active .gg-app {
        height: min(calc(100dvh - var(--gg-sitebar-height)), 900px);
        min-height: 0;
        border-right: 1px solid rgb(255 255 255 / 10%);
        border-left: 1px solid rgb(255 255 255 / 10%);
    }

    body.gg-game-active .gg-app[data-screen="prep"] {
        width: min(calc(100% - 32px), 960px);
        height: auto;
        min-height: auto;
        margin: calc(var(--gg-sitebar-height) + 16px) auto 40px;
        overflow: visible;
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: 24px;
    }

    body.gg-game-active .gg-app[data-screen="map"] {
        width: min(calc(100% - 32px), 760px);
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: 20px;
    }

    body.gg-game-active .gg-app[data-screen="map"] .gg-route {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: start;
        gap: 14px;
        padding: 22px 18px 88px;
    }

    body.gg-game-active .gg-app[data-screen="map"] .gg-route-node {
        align-content: start;
        min-height: 166px;
        margin: 0;
    }

    body.gg-game-active .gg-app[data-screen="prep"] .gg-prep-screen {
        position: relative;
        min-height: auto;
        overflow: visible;
        border-radius: inherit;
    }

    body.gg-game-active .gg-app[data-screen="prep"] .gg-prep-scroll {
        height: auto;
        padding-bottom: 28px;
        overflow: visible;
    }

    body.gg-game-active .gg-app[data-screen="prep"] .gg-choice-row {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        overflow: visible;
    }

    body.gg-game-active .gg-app[data-screen="prep"] .gg-tool-grid,
    body.gg-game-active .gg-app[data-screen="prep"] .gg-difficulty-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.gg-game-active .gg-app[data-screen="prep"] .gg-difficulty-card {
        display: grid;
    }

    body.gg-game-active .gg-app[data-screen="prep"] .gg-sticky-action {
        position: sticky;
        bottom: 0;
        border-radius: 0 0 24px 24px;
    }
}

@media (min-width: 900px) {
    body.gg-game-active .gg-app[data-screen="combat"] {
        width: min(calc(100% - 32px), 1200px);
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: 20px;
    }

    .gg-combat-screen {
        grid-template-columns: minmax(190px, 210px) minmax(480px, 1fr) minmax(190px, 210px);
        gap: 0;
        background: linear-gradient(90deg, #0d2923, #17382c 24%, #17382c 76%, #0d2923);
    }

    .gg-combat-viewport {
        grid-column: 2;
        border-right: 1px solid rgb(255 255 255 / 12%);
        border-left: 1px solid rgb(255 255 255 / 12%);
        box-shadow: 0 0 34px rgb(0 0 0 / 28%);
    }

    .gg-combat-rail {
        position: relative;
        z-index: 2;
        display: grid;
        align-content: start;
        gap: 10px;
        min-width: 0;
        padding: 20px 14px;
        overflow-y: auto;
        color: #eaf4e9;
        background:
            linear-gradient(180deg, rgb(17 62 50 / 92%), rgb(7 36 30 / 97%)),
            url("./art/green-guard-field.png") center / cover;
    }

    .gg-combat-rail > span {
        color: #9fe0c2;
        font-size: 11px;
        font-weight: 950;
        letter-spacing: .1em;
    }

    .gg-combat-rail > div {
        display: grid;
        gap: 8px;
        min-width: 0;
    }

    .gg-combat-rail strong {
        color: #fff4ce;
        font-size: 17px;
    }

    .gg-combat-rail small {
        color: #b7cec4;
        font-size: 11px;
        line-height: 1.45;
    }

    .gg-rail-chips {
        display: grid;
        gap: 5px;
        margin-top: 7px;
    }

    .gg-rail-chip {
        display: grid;
        gap: 2px;
        padding: 7px 8px;
        border: 1px solid color-mix(in srgb, var(--chip-color) 62%, transparent);
        border-left: 4px solid var(--chip-color);
        border-radius: 9px;
        color: #ecf3e8;
        font-size: 10px;
        font-weight: 850;
        background: rgb(2 25 20 / 44%);
    }

    .gg-rail-chip small,
    .gg-reaction-list small {
        display: block;
        color: #a9c9bc;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.35;
    }

    .gg-rail-subtitle {
        display: block;
        margin-top: 8px;
        color: #8ee0bd;
        font-size: 9px;
        font-weight: 950;
        letter-spacing: .06em;
    }

    .gg-reaction-list {
        border-left: 3px solid #78d9bd;
    }

    .gg-combat-rail ul {
        display: grid;
        gap: 5px;
        margin: 5px 0 0;
        padding: 0;
        list-style: none;
    }

    .gg-combat-rail li {
        padding: 6px 7px;
        border-radius: 8px;
        color: #cfddd5;
        font-size: 10px;
        background: rgb(255 255 255 / 6%);
    }

    .gg-combat-rail dl {
        display: grid;
        gap: 6px;
        margin: 10px 0 0;
    }

    .gg-combat-rail dl > div {
        display: grid;
        gap: 2px;
        padding: 8px;
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: 10px;
        background: rgb(2 25 20 / 38%);
    }

    .gg-combat-rail dt {
        color: #9fc2b4;
        font-size: 10px;
    }

    .gg-combat-rail dd {
        margin: 0;
        color: #fff4ce;
        font-size: 12px;
        font-weight: 900;
        overflow-wrap: anywhere;
    }

    .gg-combat-rail p {
        margin: 8px 0 0;
        padding: 9px;
        border-radius: 10px;
        color: #b8d4c8;
        font-size: 10px;
        line-height: 1.55;
        background: rgb(255 255 255 / 5%);
    }

    .gg-modal[data-gg-modal="reward"] {
        right: auto;
        left: 50%;
        width: min(880px, calc(100% - 32px));
        transform: translateX(-50%);
    }

    .gg-pause-modal,
    .gg-settings-modal,
    .gg-panel-modal,
    .gg-guide-modal {
        right: auto;
        left: 50%;
        width: min(430px, calc(100% - 32px));
        transform: translate(-50%, -50%);
    }
}

/* 2026-08-19 층형 원정 지도: 현재 선택뿐 아니라 지역 전체 경로를 미리 읽는다. */
.gg-route,
body.gg-game-active .gg-app[data-screen="map"] .gg-route {
    display: block;
    padding: 8px 8px 76px;
    overflow: hidden;
}

.gg-route-legend {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 12px;
    min-height: 24px;
    color: #365849;
    font-size: 8px;
    font-weight: 900;
}

.gg-route-legend span::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-radius: 50%;
    background: #e6d6ae;
    content: "";
}

.gg-route-legend span:first-child::before { background: #ffd85f; box-shadow: 0 0 0 2px #856023; }
.gg-route-legend span:nth-child(2)::before { background: #62be76; }

.gg-expedition-map {
    position: relative;
    width: min(100%, 690px);
    height: calc(100% - 24px);
    min-height: 390px;
    margin: 0 auto;
    border: 2px solid rgb(82 62 31 / 25%);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 7%, rgb(255 241 164 / 75%), transparent 24%),
        linear-gradient(180deg, rgb(221 240 202 / 86%), rgb(247 225 176 / 91%));
    box-shadow: inset 0 0 28px rgb(72 87 45 / 15%), 0 8px 20px rgb(62 42 22 / 12%);
}

.gg-expedition-map::after {
    position: absolute;
    inset: 7px;
    border: 1px dashed rgb(74 100 63 / 20%);
    border-radius: 17px;
    pointer-events: none;
    content: "";
}

.gg-expedition-map svg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.gg-expedition-map line {
    stroke: #9d8962;
    stroke-width: 1.15;
    stroke-dasharray: 2.2 2.2;
    vector-effect: non-scaling-stroke;
}

.gg-expedition-map line[data-state="ready"] {
    stroke: #d59029;
    stroke-width: 2.7;
    stroke-dasharray: 5 3;
    animation: gg-route-flow 1s linear infinite;
}

.gg-expedition-map line[data-state="chosen"] {
    stroke: #3e9f63;
    stroke-width: 3.2;
    stroke-dasharray: none;
}

@keyframes gg-route-flow { to { stroke-dashoffset: -8; } }

.gg-expedition-node {
    position: absolute;
    z-index: 2;
    left: var(--node-x);
    top: var(--node-y);
    display: grid;
    grid-template-rows: 46px auto auto;
    justify-items: center;
    width: 92px;
    min-height: 78px;
    padding: 4px 3px 5px;
    border: 2px solid #806442;
    border-radius: 16px;
    color: #34463a;
    text-align: center;
    background: #fff8df;
    box-shadow: 0 4px 0 #63472d, 0 7px 12px rgb(70 43 20 / 18%);
    transform: translate(-50%, -50%);
}

.gg-expedition-node:disabled { cursor: default; }

.gg-expedition-art {
    width: 48px;
    height: 46px;
    filter: drop-shadow(0 3px 2px rgb(57 42 22 / 18%));
}

.gg-expedition-node strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-expedition-node small {
    color: #6c6a55;
    font-size: 7px;
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
}

.gg-expedition-node[data-state="available"],
.gg-expedition-node[data-state="selected"] {
    border-color: #c77b16;
    background: #fff3ac;
    box-shadow: 0 4px 0 #8a5415, 0 0 0 4px rgb(255 217 84 / 36%), 0 10px 20px rgb(77 48 15 / 22%);
    animation: gg-route-ready 1.1s ease-in-out infinite alternate;
}

.gg-expedition-node[data-state="visited"] {
    border-color: #39835a;
    background: #daf0ce;
    box-shadow: 0 3px 0 #326645;
}

.gg-expedition-node[data-state="missed"] {
    opacity: .32;
    filter: grayscale(.8);
}

.gg-expedition-node[data-state="future"] { opacity: .76; }

.gg-expedition-node[data-type="elite"],
.gg-expedition-node[data-type="guardian"] { border-color: #a94835; }

@keyframes gg-route-ready { to { transform: translate(-50%, -50%) scale(1.04); } }

/* 무작위 3택과 전체 계통도를 한 화면에서 함께 비교한다. */
.gg-skill-tree-grid {
    max-height: calc(100dvh - 238px);
    padding: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gg-field-offer {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 2px solid #b78a2b;
    border-radius: 15px;
    background: linear-gradient(145deg, #fff8ce, #f3e6b0);
    box-shadow: 0 4px 0 #816522;
}

.gg-field-offer > header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
}

.gg-field-offer > header strong { color: #5a4418; font-size: 12px; }
.gg-field-offer > header small { color: #766a49; font-size: 8px; }

.gg-field-offer > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.gg-field-offer button {
    display: grid;
    grid-template-rows: 48px auto auto auto 1fr auto;
    min-width: 0;
    min-height: 142px;
    padding: 7px 5px;
    border: 2px solid color-mix(in srgb, var(--branch-color) 82%, #6d5a3a);
    border-radius: 12px;
    color: #2d4236;
    text-align: center;
    background: white;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--branch-color) 72%, #6b5437);
}

.gg-field-offer button:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--branch-color) 72%, #6b5437); }

.gg-field-offer-art {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    filter: drop-shadow(0 3px 2px rgb(55 37 18 / 18%));
}

.gg-field-offer button > span { color: var(--branch-color); font-size: 7px; font-weight: 950; }
.gg-field-offer button > strong { margin-top: 2px; font-size: 10px; line-height: 1.15; }
.gg-field-offer button > b { color: #506458; font-size: 8px; }
.gg-field-offer button > small { margin-top: 3px; color: #69736c; font-size: 7px; line-height: 1.25; }
.gg-field-offer button > em { margin-top: 4px; color: #805e14; font-size: 7px; font-style: normal; font-weight: 950; }

.gg-field-node[data-state="offered"] {
    border-color: var(--branch-color);
    color: #1f3d31;
    background: #fff9d5;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--branch-color) 72%, #655);
}

.gg-skill-tree-modal > footer [data-gg-refresh-skill-offer]:disabled { opacity: .5; }

@media (max-width: 480px) {
    .gg-expedition-node {
        grid-template-rows: 38px auto auto;
        width: 76px;
        min-height: 67px;
        border-radius: 13px;
    }

    .gg-expedition-art { width: 40px; height: 38px; }
    .gg-expedition-node strong { font-size: 9px; }
    .gg-field-offer button { min-height: 128px; padding: 6px 3px; }
    .gg-field-offer-art { width: 40px; height: 40px; }
    .gg-field-offer button > small { max-height: 28px; overflow: hidden; }
}

@media (max-height: 680px) {
    .gg-expedition-map { min-height: 330px; }
    .gg-skill-tree-grid { max-height: calc(100dvh - 220px); }
}

@media (prefers-reduced-motion: reduce) {
    .gg-expedition-map line[data-state="ready"],
    .gg-expedition-node[data-state="available"],
    .gg-expedition-node[data-state="selected"] { animation: none; }
}

/* 2026-08-19 귀여운 통합 아트 패스 */
.gg-atlas-art {
    display: block;
    flex: 0 0 auto;
    background-image: var(--art-image);
    background-repeat: no-repeat;
    background-position: var(--art-x, 0%) var(--art-y, 0%);
    background-size: var(--art-size, 100% 100%);
}

.gg-title-mascot {
    position: absolute;
    z-index: 1;
    top: 54px;
    left: 50%;
    width: 172px;
    height: 172px;
    transform: translateX(-50%);
    background: url("./art/green-guard-cute-farmer-atlas.png") 0 0 / 400% 400% no-repeat;
    filter: drop-shadow(0 14px 13px rgb(0 0 0 / 42%));
    pointer-events: none;
}

.gg-title-content {
    z-index: 2;
}

.gg-hub-avatar {
    top: 104px;
    width: 132px;
    height: 132px;
    background-image: url("./art/green-guard-cute-farmer-atlas.png");
    background-position: 0 0;
    background-size: 400% 400%;
}

.gg-facility {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    align-items: center;
    gap: 1px 8px;
    min-height: 98px;
    padding: 9px;
}

.gg-facility-art {
    grid-row: 1 / -1;
    width: 52px;
    height: 64px;
    background-image: url("./art/green-guard-cute-ui-atlas.png");
    background-repeat: no-repeat;
    background-position: var(--art-x) var(--art-y);
    background-size: 400% 400%;
    filter: drop-shadow(0 3px 2px rgb(0 0 0 / 28%));
}

.gg-facility > span,
.gg-facility > strong,
.gg-facility > small {
    grid-column: 2;
}

.gg-facility-launch {
    grid-template-columns: 66px minmax(0, 1fr);
    min-height: 88px;
}

.gg-facility-launch .gg-facility-art {
    width: 64px;
    height: 66px;
}

.gg-type-icon {
    background-image: url("./art/green-guard-cute-seed-atlas.png");
    background-size: 300% 200%;
}

.gg-portrait {
    background-color: #cce4a5;
    background-image: var(--art-image, url("./art/green-guard-cute-farmer-atlas.png"));
    background-position: var(--art-x, 0%) var(--art-y, 0%);
    background-size: var(--art-size, 400% 400%);
}

.gg-choice-card,
.gg-tool-card {
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    align-items: center;
    min-height: 136px;
    padding: 9px;
}

.gg-card-art {
    grid-row: 1 / -1;
    width: 62px;
    height: 78px;
    align-self: center;
    filter: drop-shadow(0 4px 3px rgb(45 55 32 / 20%));
}

.gg-farmer-card-art {
    height: 82px;
}

.gg-tool-card-art,
.gg-seed-card-art {
    height: 68px;
}

.gg-choice-card > b,
.gg-choice-card > strong,
.gg-choice-card > small,
.gg-tool-card > b,
.gg-tool-card > strong,
.gg-tool-card > small,
.gg-tool-card > em {
    grid-column: 2;
}

.gg-inline-type {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: -4px 3px -5px -1px;
    border-radius: 6px;
    vertical-align: middle;
}

.gg-difficulty-card {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    align-items: center;
}

.gg-difficulty-art {
    grid-row: 1 / -1;
    width: 58px;
    height: 58px;
    filter: drop-shadow(0 3px 2px rgb(45 55 32 / 18%));
}

.gg-difficulty-card > strong,
.gg-difficulty-card > small,
.gg-difficulty-card > b {
    grid-column: 2;
}

.gg-build-chip,
.gg-result-build > div > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gg-chip-art,
.gg-result-seed-art {
    width: 19px;
    height: 19px;
}

.gg-route-node {
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    align-items: center;
    gap: 1px 11px;
    min-height: 118px;
    padding: 11px 13px;
}

.gg-route-art {
    grid-row: 1 / -1;
    width: 76px;
    height: 82px;
    filter: drop-shadow(0 5px 3px rgb(54 38 20 / 20%));
}

.gg-route-node > b,
.gg-route-node > strong,
.gg-route-node > small {
    grid-column: 2;
}

.gg-event-intro {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 94px;
    padding: 7px 10px;
    border: 1px solid #d9cda5;
    border-radius: 15px;
    background: #f8f2dc;
}

.gg-event-art,
.gg-evolution-art {
    width: 98px;
    height: 90px;
    filter: drop-shadow(0 4px 3px rgb(54 38 20 / 16%));
}

.gg-event-intro .gg-choice-copy {
    margin: 0;
}

.gg-choice-option {
    position: relative;
    overflow: hidden;
}

.gg-choice-option-art {
    position: absolute;
    top: 5px;
    right: 34px;
    width: 58px;
    height: 58px;
    opacity: .13;
    pointer-events: none;
}

.gg-reward-card .gg-seed-symbol {
    width: 48px;
    height: 48px;
    border: 0;
    background-color: transparent;
    filter: drop-shadow(0 3px 2px rgb(54 38 20 / 18%));
}

.gg-field-node-art {
    grid-column: 1;
    grid-row: 1 / 6;
    width: 31px;
    height: 31px;
    margin: 7px auto 0;
    filter: drop-shadow(0 2px 1px rgb(54 38 20 / 16%));
}

.gg-field-node {
    min-height: 110px;
}

@media (min-width: 700px) {
    .gg-field-node {
        grid-template-columns: 32px minmax(0, 1fr);
        min-height: 82px;
    }

    .gg-field-node-art {
        grid-column: 1;
        grid-row: 1 / 6;
        width: 30px;
        height: 30px;
        margin: 8px 0 0;
    }

    .gg-field-node > span {
        grid-row: auto;
        margin: 0;
    }

    .gg-field-node small {
        grid-column: 2 / -1;
    }

    .gg-field-combo-strip > span small {
        display: none;
    }
}

.gg-panel-entry {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.gg-panel-entry > span {
    min-width: 0;
}

.gg-panel-entry small {
    display: block;
    color: #68766e;
    font-size: 11px;
    line-height: 1.45;
}

.gg-panel-art {
    width: 54px;
    height: 54px;
}

.gg-panel-hero-art {
    float: left;
    width: 104px;
    height: 92px;
    margin: 0 12px 7px 0;
}

.gg-upgrade-card {
    position: relative;
    min-height: 132px;
    padding-left: 58px;
}

.gg-upgrade-art {
    position: absolute;
    top: 35px;
    left: 7px;
    width: 48px;
    height: 48px;
}

.gg-result-build {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
}

.gg-result-farmer-art {
    grid-row: 1 / 4;
    width: 76px;
    height: 82px;
}

.gg-result-build > strong,
.gg-result-build > small,
.gg-result-build > div {
    grid-column: 2;
}

.gg-result-build > strong {
    flex: none;
}

@media (max-height: 680px) {
    .gg-title-mascot {
        top: 36px;
        width: 136px;
        height: 136px;
    }
}

@media (max-width: 480px) {
    .gg-choice-card,
    .gg-tool-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .gg-card-art {
        width: 50px;
        height: 68px;
    }

    .gg-tool-card-art,
    .gg-seed-card-art {
        height: 58px;
    }
}

@media (min-width: 700px) {
    .gg-choice-card,
    .gg-tool-card {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .gg-card-art {
        width: 76px;
        height: 90px;
    }

    .gg-route-node {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .gg-route-art {
        width: 90px;
        height: 94px;
    }
}

/* 2026-08-19 스킬·농장 작업 피드백 정합성 개선 */
.gg-mission-banner .gg-work-progress:not([hidden]) {
    display: block;
    overflow: hidden;
    color: #9ff4ce;
    font-size: 8px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-mission-banner .gg-work-progress[data-active="true"] {
    color: #fff08b;
}

.gg-field-skill-button {
    width: 100%;
    min-height: 15px;
    padding: 1px 4px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #d8ff76;
    font: inherit;
    font-weight: 950;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    box-shadow: none;
}

.gg-field-skill-button[data-ready="true"] {
    pointer-events: auto;
    cursor: pointer;
    border-color: rgb(255 226 116 / 70%);
    color: #fff3a1;
    background: rgb(118 78 14 / 70%);
    box-shadow: 0 0 8px rgb(255 224 116 / 24%);
}

.gg-field-skill-button:disabled {
    opacity: 1;
}

.gg-field-skill-button:focus-visible,
.gg-skill-chip:focus-visible,
.gg-skill-more:focus-visible {
    outline: 3px solid #ffe96b;
    outline-offset: 2px;
}

.gg-auto-skill-status,
.gg-auto-skill-status[data-compact="true"] {
    pointer-events: auto;
}

.gg-skill-chip,
.gg-skill-more {
    color: inherit;
    font: inherit;
    cursor: pointer;
    box-shadow: none;
    appearance: none;
}

.gg-skill-chip:active,
.gg-skill-more:active {
    transform: translateY(1px);
}

.gg-skill-result {
    position: absolute;
    z-index: 9;
    top: 206px;
    left: 50%;
    display: grid;
    min-width: min(270px, calc(100% - 40px));
    max-width: calc(100% - 32px);
    gap: 1px;
    padding: 6px 12px;
    pointer-events: none;
    border: 1px solid var(--skill-result-color, #ffe071);
    border-radius: 10px;
    color: #fffceb;
    text-align: center;
    background: rgb(9 38 29 / 90%);
    box-shadow: 0 3px 0 rgb(26 21 12 / 60%), 0 0 14px color-mix(in srgb, var(--skill-result-color, #ffe071) 35%, transparent);
    opacity: 0;
    transform: translate(-50%, -6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.gg-skill-result[data-show="true"] {
    opacity: 1;
    transform: translate(-50%, 0);
}

.gg-skill-result strong {
    color: var(--skill-result-color, #ffe071);
    font-size: 11px;
}

.gg-skill-result small {
    font-size: 8px;
    font-weight: 800;
}

.gg-skill-info-modal {
    top: 50%;
    bottom: auto;
    width: min(430px, calc(100% - 24px));
    max-height: calc(100% - 28px);
    transform: translateY(-50%);
}

.gg-skill-info-body {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 12px;
    border: 2px solid #8ab99d;
    border-radius: 14px;
    background: #edf5e8;
}

.gg-skill-info-icon {
    width: 58px;
    height: 58px;
    border: 3px solid color-mix(in srgb, var(--type-color) 72%, white);
    border-radius: 16px;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--type-color) 55%, #4d4939);
}

.gg-skill-info-body b {
    color: #1f6c54;
    font-size: 12px;
}

.gg-skill-info-body p {
    margin: 4px 0 0;
    color: #43584b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;
}

.gg-skill-info-details {
    display: grid;
    gap: 7px;
    margin: 0;
}

.gg-skill-info-details > div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 9px;
    border-radius: 10px;
    background: #f3efe1;
}

.gg-skill-info-details dt {
    color: #6c5126;
    font-size: 10px;
    font-weight: 950;
}

.gg-skill-info-details dd {
    margin: 0;
    color: #48544c;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.4;
}

.gg-field-node[data-state="waiting"] {
    opacity: .88;
    border-color: #969b88;
    color: #34463b;
    background: #f0eee1;
}

.gg-field-node[data-state="waiting"] b {
    color: #7a5b1d;
}

.gg-field-node[data-state="locked"] {
    opacity: .74;
    color: #4e5c54;
    background: #dfdfd2;
}

.gg-field-node[data-state="locked"] b {
    color: #7b5548;
}

.gg-app[data-high-contrast="true"] .gg-work-progress,
.gg-app[data-high-contrast="true"] .gg-field-skill-button[data-ready="true"] {
    color: #fff;
}

@media (min-width: 700px) {
    .gg-skill-info-modal {
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gg-skill-result {
        transition: none;
    }

    .gg-skill-chip:active,
    .gg-skill-more:active {
        transform: none;
    }
}

@media (min-width: 700px) and (max-height: 760px) {
    .gg-app[data-screen="title"] .gg-title-content {
        bottom: 18px;
    }

    .gg-app[data-screen="title"] .gg-kicker {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .gg-app[data-screen="title"] .gg-title-content h1 {
        font-size: 46px;
    }

    .gg-app[data-screen="title"] .gg-title-content > p {
        margin: 8px 0 10px;
        font-size: 13px;
    }

    .gg-app[data-screen="title"] .gg-title-record {
        margin-bottom: 9px;
        padding: 7px 10px;
        font-size: 11px;
    }

    .gg-app[data-screen="title"] .gg-title-actions {
        gap: 6px;
    }

    .gg-app[data-screen="title"] .gg-title-actions .gg-button {
        min-height: 42px;
    }

    .gg-app[data-screen="title"] .gg-corner-button {
        top: 14px;
    }
}

@media (max-width: 460px) {
    .minigame-shell {
        padding-right: 0;
        padding-left: 0;
    }

    .gg-app {
        min-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    body:not(.gg-game-active) .gg-app[data-screen="boot"],
    body:not(.gg-game-active) .gg-app[data-screen="title"] {
        height: calc(100dvh - 82px);
        min-height: 0;
    }

    body:not(.gg-game-active) .gg-app[data-screen="boot"] .gg-loading,
    body:not(.gg-game-active) .gg-app[data-screen="title"] .gg-title-screen {
        height: 100%;
        min-height: 0;
    }

    .gg-app[data-screen="title"] .gg-title-content {
        bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px));
    }

    .gg-loading,
    .gg-screen {
        min-height: 100dvh;
    }

    .gg-prep-scroll {
        height: calc(100dvh - 162px);
    }

    body.gg-game-active .gg-prep-scroll {
        height: calc(100% - 162px);
    }

    .gg-combat-screen canvas {
        min-height: 100dvh;
    }
}

@media (max-width: 699px) {
    .gg-choice-card.is-locked,
    .gg-tool-card.is-locked {
        display: none;
    }
}

@media (max-height: 760px) {
    .gg-app,
    .gg-loading,
    .gg-screen,
    .gg-combat-screen canvas {
        min-height: 740px;
    }

    .gg-hub-avatar {
        top: 94px;
        width: 98px;
        height: 124px;
    }

    .gg-facility {
        min-height: 78px;
    }

    .gg-route {
        height: auto;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gg-loading-mark {
        animation: none;
    }

    .gg-modal,
    .gg-room-intro {
        animation-duration: 1ms;
    }
}

/* 전투 중에는 생존·목표·웨이브만 남기고 상세 정보는 일시정지 화면에서 확인한다. */
.gg-combat-hud {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    left: 8px;
    gap: 4px;
}

.gg-player-status {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px;
    min-height: 58px;
    padding: 4px 7px 4px 4px;
    border-width: 2px;
    border-radius: 13px;
    box-shadow: 0 2px 0 #382513;
}

.gg-portrait {
    width: 38px;
    height: 38px;
}

.gg-bars {
    gap: 2px;
}

.gg-health-track {
    height: 18px;
}

.gg-shield-track,
.gg-growth-track {
    height: 10px;
}

.gg-shield-track[hidden] {
    display: none;
}

.gg-status-track b {
    font-size: 8px;
    line-height: 14px;
}

.gg-shield-track b,
.gg-growth-track b {
    font-size: 7px;
    line-height: 7px;
}

.gg-combat-menu-buttons {
    gap: 3px;
    min-width: 50px;
}

.gg-pause-button,
.gg-exit-button {
    min-width: 50px;
    min-height: 27px;
    padding: 0 6px;
    border-width: 2px;
    box-shadow: 0 2px 0 #25160c;
}

.gg-objective-status {
    grid-column: 1 / -1;
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    width: min(460px, calc(100% - 18px));
    overflow: hidden;
    border: 1px solid rgb(207 238 198 / 45%);
    border-radius: 9px;
    color: #e8f6df;
    background: rgb(10 51 40 / 78%);
    box-shadow: 0 2px 0 rgb(29 25 13 / 44%);
}

.gg-app[data-high-contrast="true"] .gg-objective-status {
    border-width: 3px;
    border-color: #f7ffe7;
}

.gg-mission-banner,
.gg-wave-status {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.gg-mission-banner {
    grid-column: auto;
    justify-self: stretch;
    align-content: center;
    min-width: 0;
    padding: 5px 8px;
    text-align: left;
}

.gg-mission-banner strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-mission-banner span {
    display: none;
}

.gg-wave-status {
    grid-column: auto;
    justify-self: stretch;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    width: auto;
    padding: 4px 7px 5px;
    border-left: 1px solid rgb(207 238 198 / 22%);
    font-size: 7px;
    text-align: right;
}

.gg-wave-status span,
.gg-wave-status span:last-of-type {
    overflow: hidden;
    color: #e8f6df;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gg-wave-status span:last-of-type {
    color: #d8ff76;
}

.gg-wave-status i {
    grid-column: 1;
    height: 3px;
}

.gg-auto-skill-status,
.gg-auto-skill-status[data-compact="true"] {
    grid-column: 1 / -1;
    justify-self: center;
    flex-wrap: nowrap;
    gap: 3px;
    max-width: calc(100% - 18px);
    padding: 0;
    border: 0;
    background: transparent;
}

.gg-auto-skill-status strong {
    display: none;
}

.gg-auto-skill-status[data-compact="true"] .gg-skill-chip,
.gg-skill-chip {
    display: block;
    flex: 0 0 31px;
    width: 31px;
    min-width: 31px;
    height: 31px;
    padding: 3px;
    border-radius: 9px;
    background: rgb(3 28 22 / 72%);
}

.gg-skill-chip > .gg-type-icon {
    display: block;
    width: 23px;
    height: 23px;
    border-radius: 7px;
}

.gg-skill-chip b {
    display: none;
}

.gg-skill-chip small {
    position: absolute;
    z-index: 2;
    right: 1px;
    bottom: 2px;
    min-width: 13px;
    padding: 1px 2px;
    border-radius: 5px;
    color: #fff7cc;
    font-size: 6px;
    line-height: 1;
    text-align: center;
    background: rgb(1 20 16 / 90%);
}

.gg-skill-chip i {
    height: 2px;
}

.gg-skill-more {
    width: 29px;
    min-width: 29px;
    height: 29px;
    font-size: 8px;
}

.gg-combo {
    top: 118px;
}

@media (min-width: 900px) {
    body.gg-game-active .gg-app[data-screen="combat"] {
        width: min(calc(100% - 32px), 1200px);
    }

    .gg-combat-screen {
        grid-template-columns: minmax(0, 1fr);
        background: #17382c;
    }

    .gg-combat-viewport {
        grid-column: 1;
        border: 0;
        box-shadow: 0 0 34px rgb(0 0 0 / 28%);
    }

    .gg-combat-rail {
        display: none;
    }

    .gg-objective-status {
        width: min(520px, calc(100% - 24px));
    }
}

/* 선택 화면은 종류가 달라도 같은 위치·크기·시선 흐름을 사용한다. */
.gg-modal.gg-decision-modal,
body.gg-game-active .gg-modal.gg-decision-modal {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: 50%;
    display: grid;
    width: min(720px, calc(100% - 24px));
    height: auto;
    max-height: calc(100dvh - 28px);
    padding: 14px 12px 12px;
    overflow: hidden;
    transform: translateX(-50%);
    animation: gg-decision-in 180ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes gg-decision-in {
    from { opacity: 0; transform: translate(-50%, 12px) scale(.98); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.gg-decision-modal > header {
    min-height: 46px;
    margin: 0 -2px 9px;
    padding: 0 4px 9px;
    border-bottom: 1px solid rgb(102 74 35 / 20%);
}

.gg-decision-modal > header strong { font-size: 16px; }

.gg-decision-modal > footer {
    align-self: end;
    margin: 8px -2px 0;
    padding: 9px 2px 0;
    border-top: 1px solid rgb(102 74 35 / 20%);
}

.gg-decision-modal[data-gg-modal="reward"] {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.gg-decision-modal[data-gg-modal="reward"] .gg-reward-cards {
    align-items: stretch;
    height: auto;
    min-height: 0;
    padding: 4px 2px 8px;
    overflow-y: auto;
}

.gg-decision-modal[data-gg-modal="reward"] .gg-reward-card {
    height: auto;
    min-height: 218px;
}

.gg-decision-modal[data-gg-modal="event"],
.gg-decision-modal[data-gg-modal="evolution"] {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
}

.gg-decision-modal[data-gg-modal="event"] .gg-choice-options,
.gg-decision-modal[data-gg-modal="evolution"] .gg-choice-options {
    align-content: start;
    min-height: 0;
    padding: 3px 2px 8px;
    overflow-y: auto;
}

.gg-decision-modal[data-gg-modal="skillTree"] {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.gg-decision-modal[data-gg-modal="skillTree"] .gg-skill-tree-grid {
    height: 100%;
    max-height: none;
    min-height: 0;
}

@media (max-width: 480px) {
    .gg-modal.gg-decision-modal,
    body.gg-game-active .gg-modal.gg-decision-modal {
        width: calc(100% - 20px);
        height: auto;
        max-height: calc(100dvh - 20px);
        padding: 12px 10px 10px;
        border-radius: 19px;
    }

    .gg-decision-modal > header {
        min-height: 42px;
        margin-bottom: 7px;
        padding-bottom: 7px;
    }
}

@media (max-height: 640px) {
    .gg-modal.gg-decision-modal,
    body.gg-game-active .gg-modal.gg-decision-modal {
        height: auto;
        max-height: calc(100dvh - 16px);
    }

    .gg-decision-modal > header { min-height: 38px; }
}