/* Arena Core 0.5.3 — Recovery UI Pack 002: clean iPad interface */
:root{
  --ui002-dock-height:76px;
  --ui002-safe-bottom:max(10px,env(safe-area-inset-bottom));
  --ui002-surface:rgba(7,17,29,.985);
  --ui002-surface-2:rgba(12,27,44,.985);
  --ui002-line:#29445f;
  --ui002-blue:#62b9ff;
  --ui002-gold:#e2bd67;
  --ui002-muted:#9aadc1;
}

/* Bigger, safer touch targets without changing game mechanics. */
html.ui002-touch-layout button,
html.ui002-touch-layout .action,
html.ui002-touch-layout .chip,
html.ui002-touch-layout select,
html.ui002-touch-layout input{min-height:44px}
html.ui002-touch-layout button{touch-action:manipulation}
html.ui002-touch-layout .action.small{min-height:40px}
html.ui002-touch-layout .field,
html.ui002-touch-layout .catalog-search,
html.ui002-touch-layout .catalog-sort,
html.ui002-touch-layout .shop-filter-grid select{font-size:15px}
html.ui002-touch-layout .muted,
html.ui002-touch-layout small{line-height:1.35}

/* On iPad and other touch layouts keep one navigation system: the dock. */
html.ui002-touch-layout .desktop-nav{display:none!important}
html.ui002-touch-layout .app{padding-left:14px;padding-right:14px;padding-bottom:calc(var(--ui002-dock-height) + var(--ui002-safe-bottom) + 18px)}
html.ui002-touch-layout .game-header{padding:8px 2px 10px;margin:0;min-height:62px}
html.ui002-touch-layout .game-brand-mark{width:46px;height:46px;font-size:26px}
html.ui002-touch-layout .game-brand-copy h1{font-size:20px;letter-spacing:.09em}
html.ui002-touch-layout .game-brand-copy small{font-size:11px}
html.ui002-touch-layout .header-actions{gap:8px}
html.ui002-touch-layout .header-resource{min-height:42px;padding:0 12px;border:1px solid #253d56;border-radius:11px;background:rgba(8,20,33,.8);display:flex;align-items:center}
html.ui002-touch-layout .performance-button{min-width:142px;border-color:#38628a;background:linear-gradient(180deg,#173a5b,#0a2035);font-size:12px}

/* Compact global character strip: identity + HP + damage. Detailed stats remain in Hero/Skills. */
html.ui002-touch-layout body:not([data-screen="arena"]) .core053-statusbar{
  grid-template-columns:minmax(255px,1.45fr) minmax(120px,.64fr) minmax(120px,.64fr);
  margin:0 0 10px;border-radius:12px;overflow:hidden;
}
html.ui002-touch-layout body:not([data-screen="arena"]) .core053-statusbar .core053-stat:nth-child(n+4){display:none!important}
html.ui002-touch-layout .core053-status-hero{grid-template-columns:50px minmax(0,1fr);gap:10px;padding:9px 12px}
html.ui002-touch-layout .core053-crest{width:46px;height:46px;font-size:22px}
html.ui002-touch-layout .core053-crest b{margin-top:42px;font-size:10px}
html.ui002-touch-layout .core053-stat{padding:9px 12px}
html.ui002-touch-layout .core053-stat span{font-size:10px}
html.ui002-touch-layout .core053-stat b{font-size:15px}

/* Battle owns its own compact HUD. */
html.ui002-touch-layout body[data-screen="arena"] .top-hud{margin:0 0 10px}
html.ui002-touch-layout body[data-screen="arena"] .top-hud .hud-grid{
  grid-template-columns:minmax(300px,1.7fr) repeat(4,minmax(104px,.63fr));gap:7px;padding:8px;
}
html.ui002-touch-layout body[data-screen="arena"] .hud-box{min-height:58px;padding:8px 10px}
html.ui002-touch-layout body[data-screen="arena"] .hud-label{font-size:9px}
html.ui002-touch-layout body[data-screen="arena"] .hud-value{font-size:14px;margin-top:4px}
html.ui002-touch-layout body[data-screen="arena"] .hud-progress-head{font-size:11px}
html.ui002-touch-layout body[data-screen="arena"] .hud-progress-caption{font-size:9px}
html.ui002-touch-layout .location-ribbon{min-height:48px}
html.ui002-touch-layout .combat-step{min-height:52px;padding:7px 9px}
html.ui002-touch-layout .combat-step b{font-size:12px}
html.ui002-touch-layout .body-zone{min-width:76px;min-height:38px;font-size:11px}
html.ui002-touch-layout .body-zone.active,
html.ui002-touch-layout .body-zone.selected{box-shadow:0 0 0 2px rgba(98,185,255,.42),0 0 24px rgba(98,185,255,.26)}
html.ui002-touch-layout .compact-hit-button{min-height:52px;font-size:14px;font-weight:800;letter-spacing:.02em}
html.ui002-touch-layout .battle-log-toggle{min-height:48px}

/* Five-button dock. Secondary original buttons stay available in the More sheet. */
html.ui002-touch-layout body>nav{
  position:fixed!important;z-index:900;left:50%!important;right:auto!important;bottom:0!important;
  transform:translateX(-50%);width:min(100%,760px)!important;
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:4px;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
  min-height:var(--ui002-dock-height);border:1px solid #263e57;border-bottom:0;border-radius:18px 18px 0 0;
  background:linear-gradient(180deg,rgba(12,28,46,.985),rgba(4,11,20,.995));
  box-shadow:0 -12px 34px rgba(0,0,0,.5);backdrop-filter:blur(18px);
}
html.ui002-touch-layout body>nav button{display:flex!important;min-width:0!important;min-height:56px!important;padding:5px 3px!important;border-radius:12px!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px!important;color:#9eb0c3}
html.ui002-touch-layout body>nav button b{font-size:20px;line-height:1}
html.ui002-touch-layout body>nav button.active{color:#fff;background:linear-gradient(180deg,rgba(48,112,165,.62),rgba(15,46,76,.8));box-shadow:inset 0 0 0 1px rgba(112,190,255,.36)}
html.ui002-touch-layout body>nav button.ui002-secondary-nav{display:none!important}
html.ui002-touch-layout body>nav button.ui002-more-button{display:flex!important}

/* More menu */
.ui002-more-overlay,.ui002-mode-overlay{position:fixed;inset:0;z-index:1600;display:none;align-items:flex-end;justify-content:center;padding:18px 14px calc(18px + env(safe-area-inset-bottom));background:rgba(1,5,10,.72);backdrop-filter:blur(10px)}
.ui002-more-overlay.show,.ui002-mode-overlay.show{display:flex}
.ui002-sheet{width:min(100%,720px);border:1px solid #355470;border-radius:20px;background:linear-gradient(180deg,#10243a,#07121f);box-shadow:0 30px 80px rgba(0,0,0,.65);overflow:hidden;animation:ui002SheetIn .18s ease-out}
.ui002-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 17px;border-bottom:1px solid #294157}
.ui002-sheet-head h2{margin:0;font-size:18px;font-family:Georgia,"Times New Roman",serif}
.ui002-sheet-head small{display:block;margin-top:3px;color:var(--ui002-muted)}
.ui002-sheet-close{width:44px;height:44px;border-radius:12px;border:1px solid #38556f;background:#0a1a2b;color:#fff;font-size:24px}
.ui002-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:14px}
.ui002-more-item{min-height:82px!important;border:1px solid #294762;border-radius:14px;background:linear-gradient(180deg,#142c45,#0a192a);color:#edf6ff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:12px!important;text-align:left}
.ui002-more-item b{font-size:22px;margin-bottom:7px}.ui002-more-item strong{font-size:13px}.ui002-more-item small{margin-top:3px;color:#91a6bb;font-size:10px}
.ui002-more-item.active{border-color:#63baff;box-shadow:inset 0 0 0 1px rgba(99,186,255,.38),0 0 22px rgba(47,135,204,.18)}

/* Performance chooser */
.ui002-mode-list{display:grid;gap:9px;padding:14px}
.ui002-mode-option{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:72px!important;padding:11px 13px!important;border:1px solid #2b465f;border-radius:14px;background:#0a1a2a;color:#eef6ff;text-align:left}
.ui002-mode-option .ui002-mode-icon{font-size:25px;text-align:center}.ui002-mode-option strong{display:block;font-size:14px}.ui002-mode-option small{display:block;margin-top:4px;color:#92a7bb;font-size:11px}.ui002-mode-check{opacity:0;color:#72dba6;font-size:20px}.ui002-mode-option.active{border-color:#62b9ff;background:linear-gradient(180deg,#173b5d,#0b2136)}.ui002-mode-option.active .ui002-mode-check{opacity:1}

/* Honest states for unfinished forge workbenches. */
.forge-workbench.ui002-planned{position:relative;opacity:.86;border-style:dashed}
.forge-workbench.ui002-planned:after{content:"БУДУЩИЙ МОДУЛЬ";position:absolute;right:10px;top:10px;padding:4px 7px;border:1px solid #6d5731;border-radius:999px;background:#241b0c;color:#e6c477;font-size:8px;font-weight:800;letter-spacing:.08em}
.forge-workbench.ui002-planned .forge-status{color:#e2bd67}

/* Better use of iPad width and readability across tabs. */
html.ui002-touch-layout .ui-page-head p,
html.ui002-touch-layout .character-screen-head p,
html.ui002-touch-layout .forge-hero p,
html.ui002-touch-layout .bestiary-head p{font-size:13px;line-height:1.5}
html.ui002-touch-layout .card{border-radius:13px}
html.ui002-touch-layout .section-title{font-size:13px}
html.ui002-touch-layout .shop-filter-grid{gap:8px}
html.ui002-touch-layout .shop-filter-grid label{font-size:10px}
html.ui002-touch-layout .toolbar{gap:7px}
html.ui002-touch-layout .chip{font-size:12px;padding-left:13px;padding-right:13px}
html.ui002-touch-layout .item-list button,
html.ui002-touch-layout .item-list .item{min-height:58px}

@media (max-width:900px){
  html.ui002-touch-layout body:not([data-screen="arena"]) .core053-statusbar{grid-template-columns:minmax(215px,1.3fr) minmax(100px,.6fr)}
  html.ui002-touch-layout body:not([data-screen="arena"]) .core053-statusbar .core053-stat:nth-child(n+3){display:none!important}
  html.ui002-touch-layout body[data-screen="arena"] .top-hud .hud-grid{grid-template-columns:1fr 1fr 1fr}
  html.ui002-touch-layout body[data-screen="arena"] .hud-progress-box{grid-column:1/-1}
  .ui002-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  html.ui002-touch-layout .game-brand-copy small{display:none}
  html.ui002-touch-layout .header-resource{display:none}
  html.ui002-touch-layout .performance-button{min-width:112px;padding-left:8px;padding-right:8px}
  .ui002-more-grid{grid-template-columns:1fr 1fr}
  .ui002-more-item{min-height:72px!important}
}
@keyframes ui002SheetIn{from{transform:translateY(22px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.ui002-sheet{animation:none}}