/* Yenra Games / noad. Scenery is raster art; controls and energy state are semantic HTML. */
.tg { --ink:#12324b; --teal:#006b77; --line:#cbdde3; color:#203443; }
.tg [hidden] { display:none!important; }
.tg button { font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; min-height:44px; padding:9px 14px; cursor:pointer; touch-action:manipulation; }
.tg button:hover:not(:disabled) { border-color:var(--teal); }
.tg button:focus-visible { outline:3px solid #007d89; outline-offset:3px; }
.tg button:disabled { cursor:default; color:#647078; background:#edf1ef; }
.tg h3 { color:var(--ink); font-size:19px; line-height:1.4; margin:0; }
.tg-collection { display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center; margin-bottom:12px; }
#town-picker { display:flex; gap:7px; }
#town-picker button { min-width:48px; }
#town-picker [aria-pressed=true] { background:var(--teal); color:white; border-color:var(--teal); }
#town-progress { margin:0; font-size:12px; color:#4d6470; }
.tg-game { border:1px solid #d7ded4; border-radius:14px; overflow:hidden; background:#faf7ee; }
.tg-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; padding:16px 23px; background:#fffdf6; }
.tg-heading h2 { font-size:23px; margin:0; }
.tg-heading .game-eyebrow { font-size:10px; margin:0 0 4px; }
#town-plots-count { color:var(--teal); font-size:13px; white-space:nowrap; }
.tg-landscape { position:relative; isolation:isolate; aspect-ratio:2/1; background:#334d60; overflow:hidden; }
.tg-backdrop { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.tg-night,.tg-lit { opacity:0; z-index:-2; }
.tg-lit { z-index:-1; }
.tg-landscape[data-period="1"] #town-day { filter:brightness(1.04) saturate(1.06); }
.tg-landscape[data-period="2"] .tg-night { opacity:1; }
.tg-landscape[data-period="2"].is-powered .tg-lit { opacity:1; }
.tg-scene-caption { position:absolute; top:15px; left:20px; margin:0; padding:5px 12px; border-radius:20px; background:#fffcf2ed; color:#193b4b; font-size:12px; font-weight:bold; z-index:3; }
.tg-plots { position:absolute; bottom:18px; left:10%; right:10%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:10%; }
.tg-plots[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); left:21%; right:21%; gap:20%; }
.tg .tg-plot { border:0; background:transparent; padding:0; display:flex; align-items:center; flex-direction:column; position:relative; min-width:0; }
.tg .tg-plot:disabled { background:transparent; }
.tg-equipment { position:relative; flex-shrink:0; width:100%; height:160px; display:grid; place-items:end center; }
.tg-equipment img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 3px #142b2a35); pointer-events:none; }
.tg-plot-label { position:relative; z-index:2; display:block; min-width:80%; border:2px solid #ffffffb5; padding:4px 9px; border-radius:9px; background:#fff9e8ed; font-size:12px; font-weight:bold; color:#183e4c; }
.tg-plot:hover .tg-plot-label,.tg-plot:focus-visible .tg-plot-label { border-color:#007d89; }
.tg-plus { width:85%; height:53px; display:grid; place-items:center; border:2px dashed #fffde2; border-radius:50%; color:#fff; background:#24494a80; font-size:28px; line-height:1; margin-bottom:8px; }
.tg-plot.is-filled .tg-plot-label { background:#f0faf0f2; }
.tg-landscape[data-period="2"] .tg-equipment img { filter:brightness(.8) drop-shadow(0 3px 3px #0008); }
.tg-plot-flow { position:absolute; right:0; top:25%; font-size:30px; line-height:1; color:#eaffc3; text-shadow:0 0 6px #005f65,0 0 3px #005f65; pointer-events:none; }
.tg-plot-flow.is-charging { color:#ffe9a0; }
.tg-dashboard { margin:-1px 0 0; padding:20px 26px; }
.tg-tray-heading { text-align:center; }
.tg-tray-heading h3 { font-size:24px; }
.tg-tray-heading p { margin:4px 0 12px; color:#48606b; font-size:12px; }
.tg-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tg .tg-tool { display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; padding:10px; background:#fffdf7; border:2px solid #e6e8da; text-align:left; }
.tg .tg-tool[aria-pressed=true] { border-color:#007d89; background:#e8f5ed; box-shadow:0 0 0 1px #007d89; }
.tg-tool img { width:90px; height:95px; object-fit:contain; flex-shrink:0; }
.tg-tool strong { display:block; font-size:15px; }
.tg-tool-note { display:block; color:#4d6470; font-size:11px; line-height:1.45; margin-top:4px; }
.tg-stock { display:block; font-size:11px; font-weight:bold; color:var(--teal); margin-top:5px; }
.tg-tool:disabled img { opacity:.5; }
.tg-forecast-title { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 15px; margin:24px 0 10px; align-items:center; }
.tg-forecast-title h3 { font-size:17px; }
.tg-forecast-title p { margin:0; color:#4d6470; font-size:11px; }
.tg-forecast { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.tg .tg-period { padding:11px 13px; min-width:0; text-align:left; background:#fffdf7; border:2px solid #e0e7de; }
.tg .tg-period[aria-pressed=true] { border-color:#007d89; }
.tg-period>strong { display:block; font-size:14px; }
.tg-weather { display:block; font-size:11px; color:#48606b; margin:2px 0 7px; }
.tg-output { display:flex; flex-wrap:wrap; gap:8px 16px; line-height:1.5; font-size:12px; }
.tg-output b { font-size:15px; color:#183e4c; }
.tg-step-result { display:block; font-size:11px; margin-top:8px; color:#48606b; }
.tg-step-result[data-kind=success] { color:#23633a; font-weight:bold; }
.tg-step-result[data-kind=retry] { color:#8c4a16; font-weight:bold; }
.tg-storage-meter { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:#365361; padding:12px 2px; }
.tg-storage-meter meter { width:180px; height:16px; accent-color:#007d89; }
.tg-status { background:#fffdf8; border-left:3px solid #007d89; padding:10px 13px; font-size:13px; line-height:1.6; min-height:44px; }
.tg-status[data-kind=retry] { background:#fff0d9; border-color:#9b611d; }
.tg-status[data-kind=success] { background:#eaf5e9; border-color:#39754b; }
.tg-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.tg-controls button { font-size:13px; }
.tg .tg-primary { background:var(--teal); border-color:var(--teal); color:#fff; }
.tg .tg-primary:disabled { background:#dce6e3; border-color:#cbd9d5; color:#4d6470; }
#town-why { margin-left:auto; }
.tg-explanation { margin-top:20px; border-top:1px solid #d2dacc; padding-top:16px; font-size:14px; }
.tg-explanation p { max-width:78ch; margin:10px 0; }
.tg-result { border-top:1px solid #d9d5c2; background:#fff1db; display:flex; gap:24px; align-items:center; justify-content:space-between; padding:24px 26px; }
.tg-result[data-success=true] { background:#e9f4e8; border-color:#cadcc6; }
.tg-result h3 { font-size:23px; }
.tg-result p { margin:9px 0 0; font-size:14px; }
.tg-result .game-eyebrow { font-size:10px; margin:0 0 7px; }
.tg-result button { flex-shrink:0; }
.yenra-games:has(.tg) .game-header { padding:20px 0; }
.yenra-games:has(.tg) h1 { margin:12px 0 8px; }
.yenra-games:has(.tg) .game-header>p { font-size:14px; }
@media(prefers-reduced-motion:no-preference) {
 .tg-backdrop { transition:opacity .7s ease,filter .7s ease; }
 .tg[data-running=true] .tg-plot-flow { animation:tg-flow 1.2s ease-in-out infinite; }
 @keyframes tg-flow { 0% { transform:translateY(7px);opacity:.3; } 70% { opacity:1; } 100% { transform:translateY(-12px);opacity:.1; } }
}
@media(max-width:850px) {
 .tg-tool img { width:65px; height:80px; }
 .tg .tg-tool { gap:6px; }
 .tg-tool strong { font-size:13px; }
 .tg-equipment { height:130px; }
 .tg-output { display:grid; grid-template-columns:1fr; gap:2px; }
 .tg-output>span { display:flex; justify-content:space-between; gap:5px; }
}
@media(max-width:580px) {
 .tg-heading { padding:14px; }
 .tg-heading h2 { font-size:19px; }
 .tg-heading .game-eyebrow { font-size:9px; letter-spacing:.7px; }
 #town-plots-count { font-size:11px; }
 .tg-landscape { aspect-ratio:1.1/1; }
 .tg-backdrop { object-position:50% 50%; }
 .tg-scene-caption { top:10px; left:12px; font-size:11px; }
 .tg-plots { bottom:12px; left:4%; right:4%; gap:4%; }
 .tg-plots[data-count="2"] { left:12%; right:12%; gap:18%; }
 .tg-equipment { height:105px; }
 .tg-plot-label { padding:4px; font-size:10px; min-width:100%; }
 .tg-plus { height:40px; font-size:23px; }
 .tg-dashboard { padding:16px 12px; }
 .tg-tray-heading h3 { font-size:21px; }
 .tg-tools { gap:6px; }
 .tg .tg-tool { flex-direction:column; padding:8px 4px; text-align:center; gap:4px; }
 .tg-tool img { width:70px; max-width:100%; height:75px; }
 .tg-tool strong { font-size:12px; }
 .tg-tool-note { font-size:10px; }
 .tg-stock { font-size:10px; }
 .tg-forecast { gap:6px; }
 .tg .tg-period { padding:9px 7px; }
 .tg-period>strong { font-size:12px; }
 .tg-weather { font-size:10px; min-height:30px; }
 .tg-output { font-size:11px; }
 .tg-output b { font-size:13px; }
 .tg-step-result { font-size:10px; }
 .tg-status { font-size:12px; }
 .tg-controls button { padding:9px 11px; font-size:12px; }
 #town-why { margin-left:0; }
 .tg-result { display:block; padding:20px 16px; }
 .tg-result button { margin-top:16px; }
}
@media(forced-colors:active) {
 .tg-plot-label { border:2px solid ButtonText; }
 .tg button[aria-pressed=true] { outline:3px solid Highlight; }
}