/* The visual shell is scoped to the game, after login and character selection. */
body.emerald-game {
  --forest-art:url('/assets/ui/character-forest-v2.jpg');
  background:#071c18 var(--forest-art) center/cover fixed no-repeat;
  color:#f1edce;
}
body.emerald-game::before {content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#06191320,#0414120d 50%,#041310ad);z-index:0}
body.emerald-game main.game-shell {--frame-gutter:32px;position:relative;z-index:1;max-width:1120px;padding:20px 28px;isolation:isolate}
.game-viewport-frame {position:relative;width:fit-content;max-width:100%;margin:0 auto;flex:none}
.toolbar-controls {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;width:100%;min-width:0}
.game-atmosphere {position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.game-atmosphere i {position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#edffc0;box-shadow:0 0 8px 2px #b6f29c80;opacity:0;animation:verdant-firefly var(--duration) var(--delay) ease-in-out infinite}
.game-atmosphere i:nth-child(3n) {width:2px;height:2px;background:#f1d282;box-shadow:0 0 9px #eac469}
body.emerald-game .game-shell>.game-heading {position:relative;display:flex;align-items:center;gap:18px;width:100%;padding:9px 18px 6px;margin:0;border:1px solid #b5b98266;border-bottom:0;border-radius:12px 12px 0 0;background:linear-gradient(125deg,#204639ef,#102c29f2 62%,#112c25f2);box-shadow:0 -1px 0 #f3ebad25,inset 0 1px 0 #d4e6b01c;color:#ede8c9}
.game-heading .game-brand {display:flex;align-items:center;gap:10px;font:750 17px/1.2 system-ui,sans-serif;letter-spacing:.11em;text-shadow:0 1px 2px #061b14}
.game-heading .game-brand img {display:block;width:36px;height:36px;flex:none;object-fit:contain;filter:drop-shadow(0 2px 5px #03191099)}
.game-heading .game-brand span {font-size:12px;font-weight:500;color:#cbd8b7;letter-spacing:.15em}
body.emerald-game .game-heading #status {min-width:0;margin-left:auto;max-width:50%;font:12px/1.4 system-ui,sans-serif;color:#d3dbb6;text-align:right;overflow-wrap:anywhere}
.game-heading #status::before {content:'◆';margin-right:9px;font-size:10px;color:#d8c785}
body.emerald-game .game-shell>.toolbar {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;width:100%;margin:0 0 34px;padding:6px 16px 8px;border:1px solid #b5b98266;border-top:0;border-radius:0 0 12px 12px;background:linear-gradient(115deg,#143e32f2,#102925f5);box-shadow:0 15px 35px #0005,inset 0 -2px 0 #b4a25e35;font:600 12px/1.2 system-ui,sans-serif}
body.emerald-game .game-shell .toolbar button {position:relative;min-height:36px;padding:7px 12px;white-space:nowrap;border:1px solid #baa66a91;border-radius:5px;color:#edeacc;background:linear-gradient(#345946,#1b3b32 48%,#152f2a);box-shadow:inset 0 1px 0 #d7e3a73b,0 2px 0 #061c16,0 3px 8px #0003;text-shadow:0 1px #0006;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;font:inherit}
body.emerald-game .game-shell .toolbar button:hover:not(:disabled) {background:linear-gradient(#44785c,#245a43);border-color:#e1cd8c;box-shadow:inset 0 1px 0 #eaffcb44,0 0 14px #60d99b29;transform:translateY(-1px)}
body.emerald-game .game-shell .toolbar button:active:not(:disabled) {transform:translateY(1px)}
body.emerald-game .game-shell .toolbar button:focus-visible {outline:2px solid #f9dfa0;outline-offset:3px}
body.emerald-game .game-shell .toolbar button[aria-pressed=true] {background:linear-gradient(#d2dbaa,#9cb985);color:#163f30;border-color:#e9dda7;text-shadow:none}
body.emerald-game .game-shell .toolbar button:disabled {opacity:.4;cursor:default}
body.emerald-game .game-shell .toolbar #logout {background:linear-gradient(#674843,#3b302c);border-color:#a9845c99}
#fast-forward {display:none!important}
body.emerald-game .game-shell .display-modes {align-items:center;gap:0;border:1px solid #bda87577;border-radius:6px;background:#082b237a;box-shadow:inset 0 1px 5px #0004;overflow:visible}
body.emerald-game .game-shell .display-modes button {border:0;border-radius:0;box-shadow:inset 0 1px 0 #d7e3a733;min-width:34px}
body.emerald-game .display-modes button:first-child {border-radius:5px 0 0 5px}
body.emerald-game .display-modes button:last-child {border-radius:0 5px 5px 0}
.game-shell .camera-zoom-label,.game-shell #zoom-value {padding:0 9px;white-space:nowrap;font:600 11px/1.3 system-ui,sans-serif;color:#e1e5c2;font-variant-numeric:tabular-nums}
body.emerald-game .world-mode-slot {flex:1 0 100%;display:flex;align-items:center;justify-content:center;gap:10px;padding-top:4px}
.world-mode-slot::before,.world-mode-slot::after {content:'';height:1px;flex:0 1 100px;background:linear-gradient(90deg,transparent,#c7c48455)}
.world-mode-slot::after {transform:rotate(180deg)}
body.emerald-game .game-shell .toolbar #world-graphics {min-height:29px;padding:5px 20px;font-size:11px;border-color:#9bb7799c;color:#dbedbf}
body.emerald-game main.game-shell #screen {border:1px solid #cdcf9466;border-radius:3px;box-shadow:0 0 0 3px #122d23,0 0 0 5px #ae9b5c,0 0 0 8px #18382b,0 0 0 9px #d6c883aa,0 20px 65px #000a;background:#0d261f}
.game-frame-ornaments {position:absolute;inset:-12px;z-index:45;pointer-events:none;border:8px solid #365846;border-image:linear-gradient(140deg,#efe0a2,#597957 24%,#1c6247 49%,#c5b76a 74%,#eef0b8) 8;box-shadow:0 0 0 1px #e9dc9c99,0 0 0 4px #0a2920,0 0 18px #9fff8d24,inset 0 0 0 1px #eef2b982}
.frame-rayquaza {position:absolute;right:-57px;top:-63px;width:138px;height:138px;max-width:none;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 5px 4px #02130da6);transform:scaleX(-1)}
.frame-gem {position:absolute;width:22px;height:30px;border:2px solid #d5c180;border-radius:70% 12% 70% 12%;background:conic-gradient(from 20deg,#c3ffc8,#21b27e,#08734e,#bfffaf,#64d996);box-shadow:0 0 0 3px #1d4734,0 0 0 4px #a29158,0 0 14px #81d89077,inset 2px 2px 0 #faffc55c}
.frame-nw {left:-13px;top:-17px;rotate:-45deg}.frame-ne{right:-13px;top:-17px;rotate:45deg}.frame-sw{left:-13px;bottom:-17px;rotate:45deg}.frame-se{right:-13px;bottom:-17px;rotate:-45deg}
body.emerald-game #screen #server-presence {top:10px;z-index:46;background:linear-gradient(#23493aef,#112d27f5);border:1px solid #bdb97e88;border-radius:5px;color:#eaf0d4;box-shadow:0 3px 10px #0006,inset 0 1px 0 #e4efd126;font-size:11px}
body.emerald-game #screen #server-presence button {border-color:#a4b37e88;background:linear-gradient(#426b4d,#264a39);font-size:11px;color:#f2efd0}
/* The opening stage is a separate readable scene, with the native Birch sprite. */
body.emerald-game #screen #campaign-scene.birch-intro {
  display:grid;grid-template-rows:18px minmax(0,1fr) auto 42px;gap:9px;inset:0;width:100%;height:100%;max-width:none;max-height:100%;min-height:0;overflow:hidden;
  padding:54px 26px 16px;border:0!important;border-radius:2px;box-shadow:none;color:#f8f4d9;
  background:radial-gradient(ellipse at 50% 54%,#698a3730,transparent 50%),linear-gradient(180deg,#092c2580,#071e18cf 66%,#081b17fa),var(--forest-art) center/cover;
}
body.emerald-game #screen #campaign-scene.birch-intro>h3 {position:relative;margin:0;align-self:center;text-align:center;color:#d6deb9;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase}
body.emerald-game #screen #campaign-scene.birch-intro .birch-stage {position:relative;isolation:isolate;min-height:0;display:flex;align-items:flex-end;justify-content:center;background:none}
body.emerald-game .birch-stage::before {content:'';position:absolute;left:50%;bottom:3%;translate:-50% 0;width:min(64%,310px);height:22%;border-radius:50%;background:radial-gradient(ellipse,#fff6b8ee 0,#eff28bbb 42%,#c7cc7099 61%,#d4e78766 65%,transparent 72%);box-shadow:0 10px 35px #d3d9761f;filter:drop-shadow(0 -6px 12px #e7ef8555);z-index:-1}
body.emerald-game .birch-stage::after {content:'';position:absolute;inset:-34% 2% 0;z-index:-2;background:conic-gradient(from 166deg at 32% 0,transparent 0deg,#f4ecc820 8deg,transparent 13deg,#ffffc812 22deg,transparent 31deg);pointer-events:none}
body.emerald-game #screen .birch-stage img {display:block;width:auto;height:90%;max-height:250px;max-width:65%;margin:0 0 10px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 5px 1px #07100a99)}
body.emerald-game #screen #campaign-scene.birch-intro>p {position:relative;min-height:76px;max-height:150px;margin:0;padding:18px 22px;overflow:auto;overscroll-behavior:contain;background:linear-gradient(130deg,#254e3ce8,#133a2df2);border:1px solid #d0c386aa;border-radius:7px;box-shadow:0 0 0 3px #193e30,inset 0 0 0 3px #73956835,0 7px 20px #0004;color:#fbf4d6;font:400 clamp(14px,2.2cqw,18px)/1.65 'Consolas',monospace;text-shadow:0 1px 2px #071d16;white-space:pre-line}
body.emerald-game #screen #campaign-scene.birch-intro>button {justify-self:end;align-self:stretch;min-height:44px;margin:0;padding:8px 19px;display:flex;align-items:center;gap:20px;border:1px solid #f0db9e;border-radius:5px;background:linear-gradient(#417458,#20553d 54%,#183e2e);box-shadow:inset 0 1px 0 #eeffcf66,0 2px 0 #a28c4d,0 3px 14px #00120dcc;color:#fff5cd;font:600 14px/1.2 system-ui,sans-serif;text-shadow:0 1px 2px #052218;transition:filter .15s,box-shadow .15s}
body.emerald-game #screen #campaign-scene.birch-intro>button::after {content:'➜';font-size:19px;color:#e5e6aa;animation:verdant-next 2s ease-in-out infinite}
body.emerald-game #screen #campaign-scene.birch-intro>button:hover {filter:brightness(1.2);box-shadow:0 0 18px #69c48b40,inset 0 1px 0 #eeffcf66}
body.emerald-game #screen #campaign-scene.birch-intro>button:focus-visible {outline:3px solid #fce4a1;outline-offset:3px}
body.emerald-game .game-shell>#campaign-objective {width:min(100%,850px);margin:37px auto 0;text-align:left;padding:9px 13px;border-block:1px solid #b5c18038;color:#d5e2b1;background:linear-gradient(90deg,#0b2a208c,transparent);font:12px/1.55 system-ui,sans-serif;text-shadow:0 1px 3px #000}
body.emerald-game .game-shell>.game-key-guide {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;padding:15px 0 0;color:#b7c4a6;font:11px/1.5 system-ui,sans-serif}
.game-key-guide>span {display:inline-flex;gap:7px;align-items:center}
.game-key-guide kbd {border:1px solid #8ea47970;border-bottom-width:2px;border-radius:3px;padding:3px 6px;background:linear-gradient(#2e4a39,#19352a);box-shadow:inset 0 1px 0 #ecf7ba12;color:#e7e8c3;font:10px/1.2 'Consolas',monospace}
body.emerald-game .game-shell>#note {margin:12px 0 0;color:#dfd3a3;font:18px/1.5 Georgia,serif;text-shadow:0 2px 8px #031d15}
/* Expanded play keeps the same palette, with compact decoration. */
body.emerald-game main.game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen]) {--frame-gutter:8px;position:fixed;max-width:none;padding:8px 18px;background:linear-gradient(#071f1c77,#051411b3),var(--forest-art) center/cover}
body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen])>.toolbar {padding:7px 10px;margin-bottom:17px;border:1px solid #b5b98266;border-radius:8px;flex:none}
body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen]) .world-mode-slot {flex:0 0 auto;padding:0}
body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen]) .world-mode-slot::before,body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen]) .world-mode-slot::after {display:none}
body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen]) .game-frame-ornaments {inset:-6px;border-width:4px}
body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen]) .frame-rayquaza {width:58px;height:58px;right:-7px;top:-10px}
body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen]) .frame-gem {width:12px;height:15px}
body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen])>.game-heading,body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen])>.game-key-guide,body.emerald-game .game-shell:is([data-display-mode=fill],[data-display-mode=fullscreen])>#note {display:none}
@media(max-width:760px),(pointer:coarse),(orientation:landscape) and (max-height:600px) and (max-width:1100px) {
  body.emerald-game main.game-shell {--frame-gutter:16px;padding:12px 12px calc(172px + env(safe-area-inset-bottom));max-width:100%}
  body.emerald-game .game-shell>.game-heading {padding:13px 12px 9px;gap:8px}
  .game-heading .game-brand {font-size:13px;letter-spacing:.06em;gap:7px}
  .game-heading .game-brand span {font-size:9px;letter-spacing:.04em}
  .game-heading .game-brand img {width:32px;height:32px}
  body.emerald-game .game-heading #status {font-size:10px;max-width:43%}
  .game-heading #status::before {display:none}
  body.emerald-game .game-shell>.toolbar {gap:4px;padding:5px 8px 7px;margin-bottom:26px;overflow:visible}
  body.emerald-game .game-shell .toolbar::after {content:'Deslize para ver mais controles';color:#c8d5b0;font:10px/1.2 system-ui,sans-serif}
  body.emerald-game .toolbar-controls {flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#88a66c #102c25;padding:2px 1px 6px;scroll-padding:8px;touch-action:pan-x}
  body.emerald-game .game-shell .toolbar button {font-size:12px;min-height:44px;padding:8px 12px;flex:none}
  body.emerald-game .world-mode-slot {flex:0 0 auto;padding:0}
  body.emerald-game .world-mode-slot::before,body.emerald-game .world-mode-slot::after {display:none}
  body.emerald-game .game-shell .toolbar .window-zoom {display:flex;flex:none}
  body.emerald-game .game-shell .toolbar :is(.window-zoom,.camera-zoom) button {display:block;min-width:44px;padding:8px}
  body.emerald-game .game-shell .toolbar :is(#zoom-value,.camera-zoom-label) {display:block;padding:0 5px;font-size:11px}
  body.emerald-game .game-shell .toolbar #world-graphics {display:block;min-height:44px}
  .game-frame-ornaments {inset:-8px;border-width:5px}
  .frame-rayquaza {width:76px;height:76px;right:-20px;top:-38px}
  .frame-gem {width:15px;height:20px}
  .frame-nw{left:-9px;top:-12px}.frame-ne{right:-9px;top:-12px}.frame-sw{left:-9px;bottom:-12px}.frame-se{right:-9px;bottom:-12px}
  body.emerald-game .game-shell>#campaign-objective {margin-top:24px;padding:8px;font-size:11px}
  body.emerald-game .game-shell>.game-key-guide {display:none}
  body.emerald-game .game-shell>#note {margin-top:13px;font-size:15px}
  body.emerald-game #screen #campaign-scene.birch-intro {padding:55px 12px 12px;gap:9px;grid-template-rows:18px minmax(0,1fr) minmax(70px,auto) 44px}
  body.emerald-game #screen #campaign-scene.birch-intro>h3 {font-size:10px;letter-spacing:.14em}
  body.emerald-game #screen #campaign-scene.birch-intro>p {min-height:70px;max-height:130px;padding:12px;font:13px/1.5 'Consolas',monospace;border-radius:5px}
  body.emerald-game #screen #campaign-scene.birch-intro>button {min-height:44px;font-size:13px;padding:7px 14px}
  body.emerald-game .game-shell:has(#campaign-scene.birch-intro:not([hidden])) {padding-bottom:20px}
  body.emerald-game .game-shell:has(#campaign-scene.birch-intro:not([hidden])) #touch-controls {display:none!important}
  body.mobile-immersive .game-frame-ornaments {display:none}
  body.mobile-immersive #screen #campaign-scene.birch-intro {padding-bottom:18px}
}
@media(max-width:360px) {
  body.emerald-game #screen #server-presence {display:grid;grid-template-columns:1fr auto auto;gap:4px;width:calc(100% - 16px);max-width:270px;padding:4px 7px}
  body.emerald-game #screen #server-presence time {grid-column:1/-1;text-align:center;font-size:11px}
  body.emerald-game #screen #server-presence button {min-height:36px;padding:4px 7px;font-size:10px}
  body.emerald-game #screen #campaign-scene.birch-intro {padding:83px 10px 10px;gap:7px;grid-template-rows:15px minmax(0,1fr) minmax(65px,auto) 44px}
  body.emerald-game #screen #campaign-scene.birch-intro>p {min-height:65px;max-height:126px;font-size:12px;padding:10px;line-height:1.45}
}
@media(max-width:360px) and (max-height:660px) {
  body.emerald-game main.game-shell {padding-top:6px}
  body.emerald-game .game-shell:has(#campaign-scene.birch-intro:not([hidden])) {padding-bottom:10px}
  body.emerald-game .game-shell>.game-heading {padding:6px 10px}
  body.emerald-game .game-heading .game-brand img {width:24px;height:24px}
  body.emerald-game .game-heading .game-brand {font-size:12px}
  body.emerald-game .game-shell>.toolbar {padding:2px 6px 4px;margin-bottom:18px}
  body.emerald-game .game-shell>#campaign-objective {margin-top:18px;padding:6px;font-size:10px}
  body.emerald-game #screen #campaign-scene.birch-intro {padding-top:77px;gap:6px}
  body.emerald-game #screen #campaign-scene.birch-intro>p {max-height:108px;padding:8px;font-size:12px;line-height:1.4}
  body.emerald-game #screen #server-presence {top:6px;padding:3px 6px}
  body.emerald-game #screen #server-presence button {min-height:34px}
}
@media(max-height:500px) and (orientation:landscape) {
  body.emerald-game main.game-shell {--frame-gutter:12px;padding:6px 14px 10px}
  body.emerald-game .game-shell>.game-heading,body.emerald-game .game-shell>#campaign-objective {display:none}
  body.emerald-game .game-shell>.toolbar {margin-bottom:15px;padding:3px 7px}
  body.emerald-game .game-shell>.toolbar::after {display:none}
  body.emerald-game #screen #campaign-scene.birch-intro {grid-template-columns:minmax(0,42%) minmax(0,58%);grid-template-rows:22px minmax(0,1fr) 42px;padding:52px 16px 12px;gap:8px 12px}
  body.emerald-game #screen #campaign-scene.birch-intro>h3 {grid-column:1/-1}
  body.emerald-game #screen #campaign-scene.birch-intro .birch-stage {grid-column:1;grid-row:2/4}
  body.emerald-game #screen #campaign-scene.birch-intro>p {grid-column:2;grid-row:2;min-height:0;max-height:100%;padding:10px;font-size:12px}
  body.emerald-game #screen #campaign-scene.birch-intro>button {grid-column:2;grid-row:3;min-height:38px}
}
/* The window can be narrower than the phone when Tela 1× is selected. */
@container(max-width:330px) {
  body.emerald-game #screen #server-presence {display:grid;grid-template-columns:1fr auto auto;gap:4px;width:calc(100% - 16px);max-width:270px;padding:4px 7px}
  body.emerald-game #screen #server-presence time {grid-column:1/-1;text-align:center;font-size:11px}
  body.emerald-game #screen #server-presence button {min-height:36px;padding:4px 7px;font-size:10px}
  body.emerald-game #screen #campaign-scene.birch-intro {padding-top:83px}
}
@keyframes verdant-firefly {0%,100%{opacity:0;transform:translate(0,12px)}30%,70%{opacity:.6}50%{transform:translate(14px,-18px)}}
@keyframes verdant-next {0%,100%{translate:0}50%{translate:3px}}
@media(prefers-reduced-motion:reduce) {.game-atmosphere i,body.emerald-game #screen #campaign-scene.birch-intro>button::after{animation:none}.game-atmosphere i{opacity:.25}body.emerald-game .game-shell .toolbar button{transition:none}}