:root{--ink: #3b2d1f;--wood: #4a3829;--gold: #d9b45f;--gold-bright: #f0d080;--parchment: #f7efdc;--parchment-2: #efe2c4;--night: #1f2336;--night-edge: #3a405e;--green: #58b368;--red: #e25b5b;--radius: 12px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#6db04a;font-family:Trebuchet MS,Segoe UI,Verdana,system-ui,sans-serif;color:var(--ink);touch-action:none}#app{position:fixed;inset:0}#game-root,#game-root canvas{position:absolute;inset:0;width:100%;height:100%}#ui-root{position:absolute;inset:0;pointer-events:none;user-select:none}#ui-root>*{pointer-events:auto}.panel{background:linear-gradient(180deg,var(--parchment) 0%,var(--parchment-2) 100%);border:4px solid var(--wood);border-radius:var(--radius);box-shadow:inset 0 0 0 2.5px var(--gold),0 6px #2b1e1273,0 10px 24px #00000040;padding:16px 20px}button.btn{font:inherit;font-weight:700;letter-spacing:.02em;color:var(--ink);background:linear-gradient(180deg,#fdf6e4 0%,var(--parchment-2) 100%);border:3.5px solid var(--wood);border-radius:10px;box-shadow:inset 0 0 0 2px var(--gold),0 4px #2b1e1280;padding:10px 16px;cursor:pointer;transition:transform .06s ease}button.btn:hover{box-shadow:inset 0 0 0 2px var(--gold-bright),0 4px #2b1e1280}button.btn:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--gold),0 1px #2b1e1280}button.btn.primary{background:linear-gradient(180deg,#7fcb8c 0%,var(--green) 100%);color:#fff;text-shadow:0 1.5px 0 rgba(36,70,42,.6)}button.btn.danger{background:linear-gradient(180deg,#f08a8a 0%,var(--red) 100%);color:#fff;text-shadow:0 1.5px 0 rgba(90,30,30,.6)}button.btn:disabled{opacity:.45;cursor:default}.dialog-box{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(680px,calc(100% - 32px));min-height:96px;font-size:17.5px;line-height:1.5;cursor:pointer;background:linear-gradient(180deg,#232842f5,#1a1d30f5);color:#f4eedd;border:4px solid var(--wood);border-radius:var(--radius);box-shadow:inset 0 0 0 2.5px var(--gold),0 8px 20px #00000059;padding:14px 20px}.dialog-box .speaker{display:inline-block;background:var(--gold);color:var(--ink);border:2.5px solid var(--wood);border-radius:8px;padding:2px 12px;font-weight:700;margin-bottom:6px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}.dialog-box .hint{position:absolute;right:16px;bottom:10px;font-size:12px;color:var(--gold-bright);animation:blink 1.2s infinite}@keyframes blink{50%{opacity:.15}}.hud{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;display:flex;flex-direction:column;gap:7px;pointer-events:none}.hud-chip{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--parchment),var(--parchment-2));border:3px solid var(--wood);box-shadow:inset 0 0 0 1.5px var(--gold);border-radius:999px;padding:5px 14px 5px 6px;font-size:13.5px;font-weight:700;width:fit-content}.hud-chip .chip-avatar{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff,#d8e8d0);border:2px solid var(--wood);object-fit:contain}.hud-chip .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--wood)}.notice{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%);font-size:14.5px;font-weight:700;padding:9px 18px;opacity:0;transition:opacity .25s ease}.notice.visible{opacity:1}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1816228c;padding:16px}.overlay .panel{max-width:760px;width:100%;max-height:calc(100% - 24px);overflow-y:auto}h2.ui-title{margin:0 0 6px;text-transform:uppercase;letter-spacing:.05em;font-size:21px;color:var(--wood);border-bottom:3px solid var(--gold);padding-bottom:6px}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}@media(max-width:560px){.starter-grid{grid-template-columns:1fr}}.starter-card{background:linear-gradient(180deg,#fdf6e4,var(--parchment-2));border:3.5px solid var(--wood);box-shadow:inset 0 0 0 2px var(--gold);border-radius:var(--radius);padding:14px 12px;text-align:center;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.starter-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--gold-bright),0 8px 18px #00000040}.starter-card img{width:116px;height:116px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}.starter-card h3{margin:8px 0 4px;font-size:18px}.starter-card .tipo{display:inline-block;font-size:12px;font-weight:700;border:2.5px solid var(--wood);border-radius:999px;padding:2px 12px;margin-bottom:8px}.starter-card p{font-size:13px;margin:4px 0 0;opacity:.85}.battle{position:absolute;inset:0;display:flex;flex-direction:column}.battle-field{flex:1;position:relative;min-height:0;background-size:220px 220px;background-repeat:repeat;overflow:hidden;box-shadow:inset 0 0 140px #143c1473}.battle-deco{position:absolute;inset:0;pointer-events:none}.battle-deco img{position:absolute;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25))}.deco-tree-l{left:-3%;top:-6%;width:clamp(120px,22vmin,220px)}.deco-tree-r{right:-2%;bottom:18%;width:clamp(90px,16vmin,170px)}.deco-bush-l{left:4%;top:38%;width:clamp(60px,11vmin,110px)}.deco-bush-r{right:22%;top:6%;width:clamp(50px,9vmin,90px)}.combatant{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px}.combatant.enemy{top:7%;right:9%}.combatant.ally{bottom:4%;left:9%}.combatant img{width:clamp(120px,24vmin,210px);height:auto;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35));animation:float 3.2s ease-in-out infinite}.combatant.ally img{width:clamp(140px,28vmin,250px);animation-delay:-1.6s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.combatant .card{background:linear-gradient(180deg,var(--parchment),var(--parchment-2));border:3.5px solid var(--wood);box-shadow:inset 0 0 0 2px var(--gold),0 4px #2b1e1266;border-radius:12px;padding:8px 14px;min-width:190px}.combatant .card .nome{font-weight:700;display:flex;justify-content:space-between;gap:10px;font-size:14px}.hp-bar{height:12px;background:#cdbb96;border:2.5px solid var(--wood);border-radius:999px;overflow:hidden;margin-top:5px;box-shadow:inset 0 2px 2px #0003}.hp-bar .fill{height:100%;background:linear-gradient(180deg,#8fdd9c,var(--green));border-radius:999px;transition:width .4s ease,background .4s ease}.hp-bar .fill.warn{background:linear-gradient(180deg,#f7d98a,#e8b545)}.hp-bar .fill.low{background:linear-gradient(180deg,#f0908d,var(--red))}.battle-panel{border-top:4px solid var(--wood);background:linear-gradient(180deg,#232842f7,#1a1d30f7);box-shadow:inset 0 3px 0 var(--gold);color:#f4eedd;padding:12px 16px calc(12px + env(safe-area-inset-bottom));min-height:138px}.battle-log{font-size:16px;min-height:26px;margin-bottom:10px;font-weight:700;text-shadow:0 2px 2px rgba(0,0,0,.4)}.battle-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}@media(min-width:700px){.battle-actions{grid-template-columns:repeat(4,1fr)}}.shake{animation:shake .35s ease!important}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-9px)}75%{transform:translate(9px)}}.flash{animation:flash .4s ease!important}@keyframes flash{50%{filter:brightness(2.4) drop-shadow(0 0 18px #fff)}}.team-list{display:flex;flex-direction:column;gap:9px;margin-top:12px}.team-row{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#fdf6e4,var(--parchment-2));border:3px solid var(--wood);box-shadow:inset 0 0 0 1.5px var(--gold);border-radius:12px;padding:8px 14px}.team-row img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}.team-row .info{flex:1;min-width:0}.team-row .info .nome{font-weight:700;font-size:14.5px}.team-row .info .hp-bar{max-width:240px}.team-row.fainted{opacity:.5;filter:grayscale(.8)}.joystick{position:absolute;left:22px;bottom:max(26px,env(safe-area-inset-bottom));width:116px;height:116px;border-radius:50%;border:4px solid rgba(74,56,41,.65);background:#f7efdc4d;box-shadow:inset 0 0 0 2px #d9b45f80;touch-action:none}.joystick-knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:linear-gradient(180deg,var(--parchment),var(--parchment-2));border:3.5px solid var(--wood);box-shadow:inset 0 0 0 2px var(--gold);pointer-events:none}.touch-action{position:absolute;right:26px;bottom:max(40px,calc(env(safe-area-inset-bottom) + 14px));width:68px;height:68px;border-radius:50%;font-size:24px;font-weight:700;background:linear-gradient(180deg,#7fcb8c,var(--green));border:4px solid var(--wood);box-shadow:inset 0 0 0 2px var(--gold),0 4px #2b1e1280;color:#fff;text-shadow:0 2px 0 rgba(36,70,42,.6)}.touch-menu{position:absolute;right:26px;top:max(14px,env(safe-area-inset-top));width:46px;height:46px;border-radius:12px;font-size:18px;background:linear-gradient(180deg,var(--parchment),var(--parchment-2));border:3.5px solid var(--wood);box-shadow:inset 0 0 0 2px var(--gold);color:var(--ink)}.menu-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}