@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#100f1b;--panel:#1b1b2a;--panel2:#242437;--line:#393748;--gold:#e8c57a;--gold2:#b68b49;--text:#f3eee4;--muted:#a3a0ad;--red:#dc6d69;--blue:#65a9df;--green:#75c49b}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}body{background:radial-gradient(ellipse at 50% -15%,#413048 0,transparent 54%),var(--bg)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}#app{max-width:630px;min-height:100dvh;margin:auto;position:relative;padding:0 14px calc(102px + env(safe-area-inset-bottom))}.loading{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sigil{font-size:48px;color:var(--gold);text-shadow:0 0 25px var(--gold2)}h1,h2,h3,.cinzel{font-family:Cinzel,Georgia,serif}h1{font-size:24px;letter-spacing:.12em;color:var(--gold)}h2{font-size:19px;margin:0 0 14px;color:var(--gold)}h3{font-size:14px;margin:0 0 10px;color:var(--gold)}p{line-height:1.5}.muted{color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);font-weight:700}.header{padding:20px 2px 13px;display:flex;align-items:center;justify-content:space-between}.brand{font:700 18px Cinzel;color:var(--gold);letter-spacing:.08em}.brand small{display:block;font:600 10px Inter;letter-spacing:.18em;color:var(--muted);margin-top:2px}.header-right{text-align:right;font-size:13px;color:var(--gold)}.hero-strip{display:flex;gap:11px;align-items:center;background:linear-gradient(135deg,#292437,#1b1b2a);border:1px solid #574b54;border-radius:16px;padding:10px 12px;margin-bottom:12px;box-shadow:0 10px 35px #0004}.avatar{width:45px;height:45px;display:grid;place-items:center;font-size:25px;background:radial-gradient(circle,#655370,#2b2639);border:1px solid #947b6b;border-radius:12px}.hero-meta{flex:1;min-width:0}.hero-meta strong{font:600 15px Cinzel}.hero-meta small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.bars{width:100%;display:flex;gap:5px;margin-top:7px}.bar{height:5px;border-radius:9px;background:#090910;overflow:hidden;flex:1}.bar span{display:block;height:100%;border-radius:9px}.bar.hp span{background:linear-gradient(90deg,#913c4b,#ed7773)}.bar.mp span{background:linear-gradient(90deg,#3969a2,#79bce9)}.bar.xp span{background:linear-gradient(90deg,#a56d40,#f1ce83)}.panel{background:linear-gradient(145deg,#202031,#171722);border:1px solid var(--line);border-radius:17px;padding:15px;margin-bottom:12px;box-shadow:0 8px 30px #0003}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-title h2{margin:0}.pill{display:inline-flex;align-items:center;border:1px solid #62543d;color:var(--gold);border-radius:99px;padding:4px 9px;font-size:11px;background:#3a3024}.map-shell{position:relative;border:1px solid #645541;border-radius:14px;overflow:hidden;background:#252e2a;box-shadow:inset 0 0 50px #000a}.map-shell:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 48px 18px #0c0b16b0}canvas{display:block;width:100%;height:auto;touch-action:none}.map-hint{font-size:11px;color:var(--muted);text-align:center;margin:9px 0 0}.target{display:flex;align-items:center;gap:10px;min-height:53px}.target .face{font-size:27px;width:39px;text-align:center}.target-details{flex:1}.target-details strong{font-size:14px}.target-details small{display:block;color:var(--muted);font-size:11px;margin:4px 0}.target .bar{max-width:85px;height:7px}.btn{border:1px solid #816a42;background:linear-gradient(#72583a,#4c382b);color:#fff4d7;border-radius:11px;padding:11px 14px;font-weight:700;font-size:13px;min-height:42px}.btn:active{transform:scale(.98)}.btn.secondary{background:#29293a;border-color:#505066;color:var(--text)}.btn.red{background:#58303b;border-color:#9b5260}.btn.small{padding:7px 10px;min-height:32px;font-size:11px}.btn.full{width:100%}.actions{display:flex;gap:7px;margin-top:10px}.actions>*{flex:1}.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:10px}.skill{background:#27273a;border:1px solid #54506a;border-radius:11px;color:var(--text);padding:10px;display:flex;gap:8px;align-items:center;text-align:left;font-size:12px}.skill b{font-size:20px}.skill small{display:block;color:var(--blue);font-size:10px;margin-top:3px}.skill.locked{opacity:.45}.combat-log{display:flex;flex-direction:column;gap:7px}.combat-log div{font-size:12px;color:#ccc4b7;border-left:2px solid #746049;padding-left:9px}.nav{position:fixed;z-index:5;bottom:0;left:50%;transform:translateX(-50%);width:min(630px,100%);display:flex;justify-content:space-around;background:#171722ed;border-top:1px solid #4d4250;backdrop-filter:blur(16px);padding:8px 6px calc(9px + env(safe-area-inset-bottom))}.nav button{min-width:61px;background:none;border:0;color:#9a96a6;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px}.nav button .ico{font-size:21px}.nav button.active{color:var(--gold)}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.stat-card{background:#242437;border:1px solid var(--line);border-radius:12px;padding:12px}.stat-card small{color:var(--muted);font-size:11px}.stat-card strong{display:block;font-size:20px;margin-top:4px}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #3a3947;font-size:13px}.stat-row:last-child{border:0}.item-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.item{background:#292839;border:1px solid #5c5263;border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:var(--text);position:relative}.item b{font-size:26px}.item small{font-size:9px;line-height:1.1;text-align:center;color:#dbcaa9;max-width:95%}.equipment{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.equipment .item{aspect-ratio:auto;min-height:84px}.map-card{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:12px;border:1px solid var(--line);background:#242437;border-radius:12px;margin-bottom:8px}.map-card strong{font:600 14px Cinzel;color:var(--gold)}.map-card small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.create-card{padding-top:8vh;text-align:center}.class-list{display:grid;gap:10px;margin:18px 0}.class-option{display:flex;align-items:center;gap:15px;text-align:left;background:#252436;border:1px solid #5a5264;border-radius:14px;color:var(--text);padding:14px;width:100%}.class-option.selected{border-color:var(--gold);background:#38313b;box-shadow:0 0 0 1px #b8945790}.class-option .icon{font-size:29px;width:39px;text-align:center}.class-option strong{font:600 15px Cinzel;color:var(--gold)}.class-option small{display:block;color:var(--muted);margin-top:5px;font-size:11px}input,select{background:#13131e;border:1px solid #555061;color:var(--text);border-radius:10px;padding:11px;width:100%;outline:none}input:focus,select:focus{border-color:var(--gold)}label{font-size:12px;color:var(--muted);display:block;margin:10px 0 6px}.admin-player{padding:10px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:7px}.admin-player small{display:block;color:var(--muted);margin-top:4px;font-size:10px}.admin-player strong{font-size:12px}.admin-actions{display:flex;gap:6px;flex-wrap:wrap}.toast{position:fixed;z-index:10;bottom:90px;left:50%;transform:translateX(-50%);max-width:min(90vw,500px);background:#44303a;border:1px solid #be747a;color:#fff;padding:11px 15px;border-radius:10px;box-shadow:0 8px 25px #0008;font-size:13px;text-align:center}.footer-note{color:#827d8b;font-size:11px;text-align:center;margin:15px 0}
.character-scene{height:290px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:14px;border:1px solid #60516a;background:radial-gradient(circle at 50% 39%,#66516b 0,#302839 34%,#171721 77%);margin-bottom:12px}.character-scene:before{content:"";position:absolute;bottom:-55px;width:250px;height:130px;border:1px solid #ac8c65;border-radius:50%;box-shadow:0 0 25px #d1a56c88,inset 0 0 30px #b5905d77;transform:rotateX(68deg)}.character-scene:after{content:"✦  ·  ✧  ·  ✦";position:absolute;top:14px;left:0;right:0;text-align:center;color:#dbc18499;letter-spacing:1.3em;font-size:12px}.character-viewport{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:#cbbd9d;font-size:12px;touch-action:pan-y}.character-viewport canvas{width:100%;height:100%;touch-action:pan-y}.character-caption{position:absolute;z-index:2;bottom:9px;left:0;right:0;text-align:center;font:600 12px Cinzel;color:#ead5a2;text-shadow:0 2px 8px #000}
.guild-compose{display:flex;align-items:center;gap:7px;margin-top:10px}.guild-compose input{flex:1;min-width:0}.guild-compose .btn{flex:none}.guild-manage{display:flex;gap:5px}.guild-chat{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:8px;scrollbar-color:#6e5b67 transparent}.guild-message{background:#292739;border:1px solid #494354;border-radius:10px;padding:8px 10px;font-size:12px}.guild-message strong{color:var(--gold)}.guild-message small{float:right;color:var(--muted)}.guild-message p{margin:5px 0 0;word-break:break-word;white-space:pre-wrap}
.item.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold2),0 0 14px #c29a6644}

/* Mobile interpretation of the classic MU stone, brass and red/blue HUD. */
:root {
  --bg:#0b1014; --panel:#161b20; --panel2:#242b30; --line:#53504a;
  --gold:#ebcf91; --gold2:#af8650; --text:#f3eee0; --muted:#b5afa0;
  --red:#dd5a50; --blue:#60a4db; --green:#8ab489;
}
body {
  background:
    radial-gradient(ellipse at 50% -18%,#61533e68 0,transparent 52%),
    radial-gradient(ellipse at 0% 50%,#17455036 0,transparent 48%),
    linear-gradient(135deg,#101317,#090d10 68%,#171713);
}
#app { border-inline:1px solid #a28b5424; box-shadow:0 0 90px #000b; }
.header { min-height:71px; border-bottom:1px solid #b79b6344; margin-bottom:12px; position:relative; }
.header:after { content:"◆"; position:absolute; bottom:-7px; left:50%; color:var(--gold2); font-size:11px; background:var(--bg); padding-inline:7px; }
.brand { color:#f0d99e; text-shadow:0 2px 0 #211509,0 0 18px #d89a374f; }
.brand small { color:#b69b76; }
.header-right { background:linear-gradient(110deg,#1a1c20,#302a20); border:1px solid #756245; border-radius:4px; padding:6px 9px; box-shadow:inset 0 1px #d1ae6850,0 3px 9px #0007; }
.hero-strip {
  display:grid; grid-template-columns:42px minmax(0,1fr) 91px; gap:9px;
  border-radius:7px; border:1px solid #806b4b;
  background:linear-gradient(135deg,#34322a,#151b20 55%,#292724);
  box-shadow:inset 0 1px #c3a56b49,inset 0 -3px #090b0f,0 5px 19px #0009;
  padding:9px;
}
.avatar { width:41px; height:41px; border-radius:50%; background:radial-gradient(circle at 33% 28%,#7c6751,#242128 70%); border:2px solid #bc9d68; box-shadow:0 0 0 2px #151313,inset 0 0 12px #000b; }
.avatar img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 16%; border-radius:50%; }
.hero-meta strong { color:#f4e4bc; text-shadow:0 1px #000; }
.hero-meta small { line-height:1.3; }
.bars { margin-top:8px; gap:3px; }
.bar { height:6px; border-radius:2px; border:1px solid #070909; background:#080b0d; }
.bar span { border-radius:1px; }
.resource-orbs { display:flex; gap:5px; justify-content:flex-end; }
.orb { --orb-color:#b94039; width:43px; height:43px; border-radius:50%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; background:conic-gradient(from 180deg,var(--orb-color) var(--fill),#181b20 var(--fill)); border:2px solid #b29563; box-shadow:0 0 0 2px #171312,inset 0 0 8px #000b,0 3px 7px #0008; color:#fff5e7; text-shadow:0 1px 2px #000; }
.orb:before { content:""; position:absolute; inset:4px; border-radius:50%; background:radial-gradient(circle at 28% 18%,#ffffff50,transparent 30%),radial-gradient(circle at 65% 80%,#0008,transparent 48%); pointer-events:none; }
.orb span,.orb b { position:relative; line-height:1.05; }
.orb span { font-size:8px; font-weight:700; letter-spacing:.09em; }
.orb b { font-size:11px; }
.mp-orb { --orb-color:#3072ad; }
.panel { border-radius:7px; border:1px solid #655e4e; background:linear-gradient(145deg,#282c2d,#151b20 33%,#11171a); box-shadow:inset 0 1px #b69b6940,inset 0 -2px #080a0c,0 7px 22px #0009; padding:15px; }
.panel h2 { color:#ead4a1; text-shadow:0 1px #000; letter-spacing:.025em; }
.panel h3 { color:#d7bf8d; letter-spacing:.07em; }
.pill { border-radius:3px; border-color:#7c6645; background:linear-gradient(#3b3428,#25251f); }
.map-shell { border-radius:3px; border:3px ridge #75674d; box-shadow:0 0 0 1px #0b0b0b,inset 0 0 40px #0008; }
.map-shell:after { box-shadow:inset 0 0 52px 16px #090c11ae; }
.btn { border-radius:4px; border-color:#c29a5b; background:linear-gradient(#8b6a40,#5c4327 48%,#382a20); box-shadow:inset 0 1px #e1bc7e81,inset 0 -2px #211811,0 2px 7px #0007; color:#fff2cf; text-shadow:0 1px 1px #000; }
.btn.secondary { background:linear-gradient(#4b5052,#272d30 55%,#1c2226); border-color:#7f8582; color:#e9e6da; box-shadow:inset 0 1px #ffffff38,inset 0 -2px #121517,0 2px 7px #0007; }
.btn.red { background:linear-gradient(#81453c,#542a2b 58%,#311c21); border-color:#a46b57; }
.skill,.stat-card,.map-card,.class-option,.guild-message { border-radius:4px; background:linear-gradient(145deg,#2b3032,#1b2225); border-color:#5c5c55; box-shadow:inset 0 1px #ffffff14; }
.skill b,.item b { filter:drop-shadow(0 2px 3px #000b); }
.skill small { color:#8fc0e8; }
.item { border-radius:3px; border-color:#716b5e; background:linear-gradient(135deg,#333636,#181d20); box-shadow:inset 0 1px #ffffff20,inset 0 0 9px #0008; }
.item.selected { border-color:#e3bb69; box-shadow:0 0 0 1px #a98546,0 0 13px #e9ab4c6e,inset 0 0 9px #0008; }
.nav { background:linear-gradient(#30322ff5,#151b1deb 36%,#111417f5); border-top:2px ridge #8e7955; box-shadow:0 -4px 18px #000b; }
.nav button { color:#c5bdad; }
.nav button.active { color:#ffe1a0; text-shadow:0 0 11px #d8ab55aa; }
.nav button .ico { filter:drop-shadow(0 2px 2px #000); }
.character-scene { border-radius:3px; border-color:#8b7654; background:radial-gradient(circle at 50% 38%,#595b56,#222d31 38%,#11171b 78%); }
.toast { border-radius:4px; }
input,select { border-radius:4px; border-color:#726850; background:#0e1316; }

/* Only applied after local client textures have been converted. */
.client-art .panel { background-image:linear-gradient(#10161ddd,#101418ef),var(--client-stone,none); background-size:auto,400px 69px; }
.client-art .item { background-image:linear-gradient(#0d1112a8,#1115189c),var(--client-slot,var(--client-inventory,none)); background-size:auto,100% 100%; }
.client-art .nav { background-image:linear-gradient(#0b1013b8,#0b1013cc),var(--client-hud,none); background-size:auto,auto 100%; }
.client-art .orb { border:0; border-radius:8px; background-image:linear-gradient(to top,transparent var(--fill),#0b1015ce var(--fill)),var(--client-life_orb,none); background-position:center; background-size:cover; box-shadow:0 0 0 1px #79736e,0 3px 9px #000c; }
.client-art .orb.mp-orb { background-image:linear-gradient(to top,transparent var(--fill),#0b1015ce var(--fill)),var(--client-mana_orb,none); }
.client-art .orb:before { display:none; }
.client-art .skill b { width:35px; height:40px; flex:none; display:grid; place-items:center; background-image:var(--client-skill_frame,none); background-size:100% 100%; }
.client-art .character-scene { background-image:linear-gradient(#07101772,#0a1117c9),var(--client-stone_alt,none); background-size:auto,400px 69px; }
.has-client-title .brand { width:91px; height:58px; overflow:hidden; font-size:0; background-image:var(--client-title); background-size:cover; background-position:center; }
.has-client-title .brand small { display:none; }
.enemy-list { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 10px; margin-bottom:10px; scrollbar-width:thin; scrollbar-color:#8a704b transparent; }
.enemy-chip { flex:0 0 auto; min-width:92px; min-height:62px; padding:5px 8px; color:var(--text); border:1px solid #766849; border-radius:4px; background:linear-gradient(#343434,#1c2225); display:grid; grid-template-columns:24px auto; column-gap:4px; align-content:center; text-align:left; }
.enemy-chip span { grid-row:span 2; font-size:22px; align-self:center; }
.enemy-chip strong { font-size:10px; white-space:nowrap; }
.enemy-chip small { font-size:10px; color:#d2b9a9; }
.enemy-chip.selected { border-color:#ecc378; box-shadow:0 0 10px #cfa46370,inset 0 1px #e4cb9650; }
.battle-dock { position:fixed; z-index:4; left:50%; transform:translateX(-50%); bottom:calc(67px + env(safe-area-inset-bottom)); width:min(630px,100%); padding:7px 12px 9px; border-top:2px ridge #a18556; background:linear-gradient(#31302aef,#101619f5); box-shadow:0 -7px 21px #000b; backdrop-filter:blur(12px); }
.dock-target { min-height:18px; color:#ecd39e; font:600 11px Cinzel,Georgia,serif; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dock-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.dock-actions .btn { min-height:46px; }
body.battle-tab #app { padding-bottom:calc(170px + env(safe-area-inset-bottom)); }
.btn.small { min-height:40px; }
.nav button { min-height:48px; }
.skill { min-height:56px; }
@media (max-width:370px) {
  .hero-strip { grid-template-columns:37px minmax(0,1fr) 79px; gap:6px; }
  .avatar { width:36px; height:36px; }
  .orb { width:37px; height:37px; }
  .orb b { font-size:9px; }
  .nav button { min-width:45px; }
}
.world-viewport { height:min(65vh,520px); min-height:300px; position:relative; color:#e9d19e; font-size:13px; background:#18211e; overflow:hidden; }
.world-viewport canvas { display:block; width:100%; height:100%; touch-action:none; }
.world-joystick { position:absolute; z-index:3; left:18px; bottom:18px; width:106px; height:106px; border:2px solid #c9ac7caa; border-radius:50%; background:#10191d9c; box-shadow:inset 0 0 25px #0009,0 0 15px #0008; touch-action:none; display:grid; place-items:center; }
.world-joystick:after { content:"✣"; position:absolute; color:#d6c39770; font-size:22px; pointer-events:none; }
.joystick-thumb { width:49px; height:49px; border:2px solid #f1d49e; border-radius:50%; background:radial-gradient(circle at 35% 25%,#a48a61,#443e36 70%); box-shadow:0 3px 10px #000b; pointer-events:none; }
.npc-dialog { border:1px solid #ad9163; background:#1a201f; padding:8px; margin-bottom:12px; box-shadow:0 0 18px #d7a46044; }
.npc-dialog .panel-title { margin-bottom:5px; }
.npc-dialog h3 { margin:0; }
.npc-dialog p { font-size:12px; margin:6px 0; }
.npc-dialog .map-card { padding:6px; margin-bottom:4px; }
.battle-layout { display:block; }
#rotate-device { display:none; position:fixed; inset:0; z-index:30; padding:24px; background:linear-gradient(#0b1113f5,#1b1c20f8); text-align:center; align-items:center; justify-content:center; flex-direction:column; }
#rotate-device h2 { margin:12px 0 2px; }
#rotate-device p { max-width:280px; color:#d0c8b5; }
#rotate-device .rotate-symbol { width:90px; height:90px; display:grid; place-items:center; border:2px solid #c7a36b; border-radius:16px; font-size:60px; color:#eed29b; transform:rotate(-25deg); box-shadow:0 0 24px #c89e5b55; }
#rotate-device .btn { margin-top:18px; }
@media (orientation:portrait) and (max-width:900px) {
  body.battle-tab:not(.portrait-ok) #rotate-device { display:flex; }
}
@media (min-width:900px) {
  body.battle-tab #app { max-width:1200px; }
  .battle-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:12px; }
  .battle-layout>.panel { min-width:0; }
  .world-viewport { height:min(72vh,660px); }
}
@media (orientation:landscape) and (max-height:600px) {
  body.battle-tab #app { max-width:none; width:100%; padding:58px 5px 0; }
  body.battle-tab .header { display:none; }
  body.battle-tab .hero-strip { position:fixed; top:0; left:0; right:0; z-index:7; height:55px; margin:0; padding:5px 10px; border-radius:0; }
  .battle-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,28vw); gap:5px; height:calc(100dvh - 113px); }
  .battle-layout>.panel { min-width:0; margin:0; }
  .battle-map-panel { height:100%; position:relative; padding:0; overflow:hidden; }
  .battle-map-panel .panel-title { position:absolute; z-index:2; top:7px; left:9px; right:9px; margin:0; pointer-events:none; text-shadow:0 2px 8px #000; }
  .battle-map-panel .panel-title h2 { font-size:15px; }
  .battle-map-panel .map-shell { height:100%; border:0; }
  .battle-map-panel .world-viewport { height:100%; min-height:0; }
  .battle-map-panel .map-hint { display:none; }
  .battle-layout>.panel:nth-child(2) { height:100%; overflow:auto; padding:8px 8px 70px; }
  .battle-layout>.panel:nth-child(2) h3 { margin:0 0 5px; }
  .battle-layout .enemy-list { margin-bottom:4px; padding-bottom:4px; }
  .battle-layout .enemy-chip { min-height:44px; }
  .battle-layout .skills { grid-template-columns:1fr; gap:3px; margin-top:4px; }
  .battle-layout .skill { min-height:42px; padding:3px 6px; }
  .battle-layout .skill b { height:34px; }
  .battle-layout .target { min-height:38px; }
  .battle-layout .target .face { font-size:20px; }
  .battle-layout .target-details small { margin:2px 0; }
  body.battle-tab .combat-log { display:none; }
  body.battle-tab .battle-dock { left:auto; right:5px; bottom:calc(56px + env(safe-area-inset-bottom)); transform:none; width:max(210px,28vw); padding:4px 6px; }
  body.battle-tab .dock-actions .btn { min-height:35px; padding:4px; font-size:11px; }
  body.battle-tab .nav { height:55px; width:100%; padding:2px 6px calc(3px + env(safe-area-inset-bottom)); }
  body.battle-tab .nav button { min-height:42px; }
  body.battle-tab .nav button .ico { font-size:17px; }
}