/* REV26 - UI coherence, desktop/mobile separation, no placeholder glyphs in choices. */
#choice .panel{width:min(930px,calc(100vw - 28px))!important;max-width:930px!important}
#choice .choice-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:19px}
#choice .choice-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0;min-height:246px;padding:15px!important;border-radius:18px!important;border:1px solid color-mix(in srgb,var(--card-accent),transparent 55%)!important;background:radial-gradient(circle at top left,color-mix(in srgb,var(--card-accent),transparent 85%),transparent 55%),linear-gradient(160deg,#202c50,#10172e)!important;box-shadow:inset 0 1px 0 #ffffff1a,0 12px 32px #0005;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
#choice .choice-card:hover,#choice .choice-card:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 1px var(--card-accent),0 20px 36px #0007}
#choice .choice-art{display:block;width:78px;height:78px;object-fit:cover;border-radius:15px;box-shadow:0 0 20px color-mix(in srgb,var(--card-accent),transparent 75%);border:1px solid #ffffff36;flex:none}
#choice .choice-info{display:flex;flex:1;flex-direction:column;gap:8px;text-align:left;min-width:0}
#choice .choice-info small{font-size:10px!important;letter-spacing:1.5px;color:var(--card-accent)!important}
#choice .choice-info strong{font-size:18px;line-height:1.15;overflow-wrap:anywhere}
#choice .choice-info span{font-size:12px;line-height:1.46;color:#d2dff7!important}
#choice .choice-select{font-size:10px!important;font-weight:900;letter-spacing:1.3px!important;color:#edf5ff!important;background:#ffffff12;border:1px solid #ffffff2a;border-radius:999px;padding:6px 11px;margin-top:auto}
#transform .panel{max-width:770px!important;width:min(770px,calc(100vw - 28px))!important}
#transform .skins button{transition:transform .2s,box-shadow .2s,border-color .2s;min-height:222px!important}
#transform .skins button:hover,#transform .skins button:focus-visible{transform:translateY(-2px);border-color:#f4d8ff!important;box-shadow:0 16px 40px #0008,0 0 25px #b382d344}
#transform .skins .transform-icon{height:104px;width:104px!important;object-fit:cover;object-position:center;background:#251a3d}
#transform .skins small{display:block;line-height:1.42!important;max-width:240px}
#pause .panel,#end .panel{animation:menuReveal .2s ease-out}
#item-panel .loot-current-build{margin-top:16px;border:1px solid #8ba6d844;border-radius:15px;background:#111d32b8;padding:12px;text-align:left}
#item-panel .loot-current-build summary{font-size:13px;color:#dbecff;font-weight:800;cursor:pointer;padding:5px;list-style:revert}
#item-panel .loot-build-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
#item-panel .loot-build-slot{display:flex;align-items:center;gap:9px;padding:8px;border-radius:12px;background:#22335166;border:1px solid #9fbae122;min-width:0;font-size:11px;color:#dfeaff}
#item-panel .loot-build-slot img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0}
#item-panel .loot-build-slot span:not(.empty-indicator){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#item-panel .empty-indicator{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;background:#27334c;border-radius:8px;color:#bdcce2;font-size:13px}
@keyframes menuReveal{from{opacity:0;transform:translateY(8px) scale(.988)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(pointer:coarse){#choice .choice-card:hover,#transform .skins button:hover{transform:none}}
@media(max-width:800px){
 #choice .panel{padding:13px!important}
 #choice .choice-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
 #choice .choice-card{padding:10px!important;min-height:180px;gap:6px}
 #choice .choice-art{width:46px;height:46px;border-radius:10px}
 #choice .choice-info{gap:5px}
 #choice .choice-info strong{font-size:13px}
 #choice .choice-info span{font-size:10px;line-height:1.3}
 #choice .choice-info small{font-size:8px!important;letter-spacing:.6px}
 #choice .choice-select{font-size:8px!important;padding:4px 8px}
 #transform .skins button{min-height:150px!important;padding:9px!important;font-size:12px!important}
 #transform .skins .transform-icon{height:65px;width:65px!important;border-radius:12px}
 #transform .skins small{font-size:10px!important}
 #item-panel .loot-build-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* Slot strip is PC-only; mobile opens inventory with a single bag control. */
 #build-hud{left:auto!important;right:max(10px,env(safe-area-inset-right))!important;top:max(76px,env(safe-area-inset-top) + 66px)!important;bottom:auto!important;max-width:unset!important;gap:0!important;padding:5px!important}
 #build-hud .equip,#build-hud .consumables{display:none!important}
 #build-hud .bag-open{width:49px;height:49px;min-height:49px!important;padding:0!important;justify-content:center;border-radius:13px!important}
 #build-hud .bag-open .bag-label{display:none!important}
 #build-hud .bag-icon{font-size:23px}
 #quick-potions{right:calc(max(12px,env(safe-area-inset-right)) + 228px)!important;bottom:max(14px,env(safe-area-inset-bottom))!important;flex-direction:row!important;gap:5px!important}
 #quick-potions button{height:44px!important;width:44px!important}
}
@media(max-width:540px){#choice .choice-list{grid-template-columns:1fr;max-height:64dvh;overflow:auto}#choice .choice-card{flex-direction:row;min-height:85px;align-items:center}#choice .choice-art{width:48px;height:48px}#choice .choice-info{flex:1}#choice .choice-select{margin:0 0 0 auto}#item-panel .loot-build-summary{grid-template-columns:1fr}}
@media(max-height:410px) and (orientation:landscape){#choice .panel,#transform .panel{max-height:96dvh;overflow:auto}#choice .choice-card{min-height:155px}#choice .choice-art{width:42px;height:42px}#transform .skins button{min-height:128px!important}#transform .skins .transform-icon{height:58px;width:58px!important}#choice .panel>p,#transform .panel>p{margin:3px 0!important}}
@media(prefers-reduced-motion:reduce){.modal .panel,.choice-card,.skins button{animation:none!important;transition:none!important}}

@media(max-width:800px){#guardian-buffs{top:max(78px,env(safe-area-inset-top) + 70px)!important;left:max(10px,env(safe-area-inset-left))!important;max-width:calc(100vw - 86px)}.guardian-buff{padding:4px 6px!important;font-size:11px!important}}
/* REV26: potions sit above the skill cluster, never over the virtual joystick.
   The older 228px right offset could place potions directly on top of movement. */
@media(max-width:800px){
 #quick-potions{right:max(10px,env(safe-area-inset-right))!important;bottom:max(87px,calc(env(safe-area-inset-bottom) + 82px))!important;flex-direction:row!important;gap:7px!important}
 #quick-potions button{width:43px!important;height:43px!important}
}
@media(max-width:520px) and (orientation:portrait){
 #quick-potions{bottom:max(95px,calc(env(safe-area-inset-bottom) + 90px))!important}
}

/* REV26 release candidate: landscape phones are often >800 CSS px wide.
   Pointer type, not width alone, decides the compact control layout. */
@media (pointer:coarse), (max-width:900px) {
 #build-hud {
   left:auto!important;right:max(8px,env(safe-area-inset-right))!important;
   top:max(59px,env(safe-area-inset-top) + 54px)!important;bottom:auto!important;
   width:52px!important;height:52px!important;max-width:52px!important;
   padding:2px!important;transform:none!important;
   background:transparent!important;border:0!important;box-shadow:none!important;
   backdrop-filter:none!important;display:flex!important;align-items:center!important;
 }
 #build-hud.hidden{display:none!important}
 #build-hud .equip,#build-hud .consumables{display:none!important}
 #build-hud .bag-open {width:50px!important;height:50px!important;min-height:50px!important;max-width:50px!important;
   padding:0!important;display:grid!important;place-items:center!important;border-radius:14px!important;
   font-size:0!important;white-space:nowrap!important;overflow:hidden!important}
 #build-hud .bag-open .bag-label{display:none!important}
 #build-hud .bag-open .bag-icon{font-size:24px!important;line-height:1!important}
 #quick-potions:not(.hidden){display:flex!important;position:fixed!important;left:auto!important;
   right:max(10px,env(safe-area-inset-right))!important;bottom:max(158px,env(safe-area-inset-bottom) + 152px)!important;
   transform:none!important;flex-direction:row!important;gap:6px!important;width:auto!important}
 #quick-potions button{height:43px!important;width:43px!important;min-width:43px!important;min-height:43px!important}
 #hud .hud-left{width:min(276px,52vw)!important;max-width:min(276px,52vw)!important;
   min-height:0!important;max-height:105px!important;padding:7px 9px!important;gap:8px!important}
 #hud .champion-portrait{width:50px!important;height:50px!important;flex:0 0 50px!important;border-radius:12px!important}
 #hud #formName{max-width:min(130px,22vw)!important;font-size:11px!important}
 #hud .hud-top,#hud .hud-foot{font-size:10px!important}
 #controls{right:max(9px,env(safe-area-inset-right))!important;bottom:max(7px,env(safe-area-inset-bottom))!important}
 #controls .skill{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important}
}
@media (pointer:coarse) and (max-height:440px) and (orientation:landscape){
 #quick-potions:not(.hidden){bottom:max(126px,env(safe-area-inset-bottom) + 122px)!important;right:8px!important}
 #controls .skill{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
 #hud .hud-left{max-height:72px!important;overflow:visible!important}
}

/* Reward selection first: avoid a huge stats block obscuring every choice on phones. */
#item-overlay[data-mode="loot"] #item-panel .summary-bar{display:none!important}
#item-overlay[data-mode="loot"] #item-panel>p{font-size:12px;line-height:1.35;margin:4px 0 8px}
#item-overlay[data-mode="loot"] #item-panel .item-head{margin-bottom:3px}
#item-overlay[data-mode="loot"] #item-panel .item-grid{margin:8px 0}
#item-overlay[data-mode="loot"] #item-panel .item-option{min-height:128px}
#item-overlay[data-mode="loot"] #item-panel .filter-button{padding:6px 12px}
@media (pointer:coarse), (max-width:900px){
 #item-overlay{padding:5px!important;align-items:center!important}
 #item-panel{width:calc(100vw - 10px)!important;max-height:calc(100dvh - 10px)!important;padding:12px!important}
 #item-overlay[data-mode="loot"] #item-panel h2{font-size:20px!important}
 #item-overlay[data-mode="loot"] #item-panel .item-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
 #item-overlay[data-mode="loot"] #item-panel .item-option{padding:8px!important;min-height:120px!important}
 #item-overlay[data-mode="loot"] #item-panel .item-option .art-frame{width:44px!important;height:44px!important;flex:0 0 44px!important}
 #item-overlay[data-mode="loot"] #item-panel .item-option strong{font-size:11px!important;line-height:1.15!important}
 #item-overlay[data-mode="loot"] #item-panel .item-option .desc{font-size:10px!important;line-height:1.24!important}
 #item-overlay[data-mode="loot"] #item-panel .item-option .stats{font-size:10px!important}
 #item-overlay[data-mode="loot"] #item-panel .item-head .eyebrow{font-size:10px}
 #item-overlay[data-mode="loot"] #item-panel .item-grid .card-top{gap:5px!important}
 #item-overlay[data-mode="inventory"] #item-panel .summary-card{padding:7px!important}
 #item-overlay[data-mode="inventory"] #item-panel h2{font-size:20px!important}
}
@media (max-width:540px) and (orientation:portrait){
 #item-overlay[data-mode="loot"] #item-panel .item-grid{grid-template-columns:1fr!important}
}
#build-hud .bag-open .bag-art{width:32px;height:32px;object-fit:contain;display:block;filter:drop-shadow(0 3px 4px #0006)}
@media(pointer:coarse),(max-width:900px){#build-hud .bag-open .bag-art{width:37px;height:37px}}
/* Final illustrated main menu from the actual Ionia scene, not a placeholder panel. */
#home{background:linear-gradient(90deg,rgba(4,8,20,.94) 0%,rgba(9,13,29,.76) 47%,rgba(6,13,25,.49) 100%),url('../assets/ui/ionia_menu_backdrop.webp') center center/cover no-repeat!important;justify-content:flex-start!important;padding:clamp(12px,4vw,52px)!important}
#home .home-panel{width:min(530px,100%)!important;max-width:530px!important;background:linear-gradient(155deg,rgba(25,31,58,.96),rgba(8,13,27,.95))!important;border:1px solid rgba(190,213,255,.24)!important;box-shadow:0 30px 90px #0009!important;text-align:left!important}
#home .home-hero{display:flex;align-items:center;gap:17px}
#home .home-avatar{width:116px;height:116px;flex:0 0 116px;padding:5px;border-radius:27px;background:linear-gradient(135deg,#a2d8f1,#d096e6 60%,#f3cca0);box-shadow:0 10px 38px #0009,0 0 22px #b28eff66}
#home .home-avatar img{width:100%;height:100%;object-fit:cover;border-radius:22px;display:block;background:#30254a}
#home .home-heading{flex:1;min-width:0}
#home .home-heading h1{font-size:clamp(26px,4vw,42px)!important;margin:5px 0 2px!important;line-height:.99!important;letter-spacing:.02em!important}
#home .home-heading p{margin:8px 0 0!important;font-size:12px!important;letter-spacing:.02em;color:#a9d7f5!important}
#home .home-intro{text-align:left!important;font-size:14px!important;line-height:1.5!important;margin:18px 0 12px!important;color:#dce7ff!important}
#home .home-tags{justify-content:flex-start!important;margin:12px 0!important}
#home .orientation-card{margin:12px 0!important}
#home #start{min-height:52px;margin-top:12px!important;font-size:15px;box-shadow:0 10px 32px #7a56d44c}
#home #homeFullscreen{margin-top:9px!important;padding:10px!important}
#home .home-controls{font-size:11px!important;color:#c9dcff!important}
#home .home-legal{font-size:10px!important;color:#8899bd!important;margin-top:6px!important}
@media(orientation:landscape){#home #orientationCard{display:none!important}}
@media(max-height:500px) and (orientation:landscape){
 #home{justify-content:flex-start!important;padding:9px 20px!important}
 #home .home-panel{max-width:630px!important;width:min(630px,100%)!important;padding:13px 20px!important;max-height:95dvh!important;overflow-y:auto!important}
 #home .home-avatar{width:73px;height:73px;flex-basis:73px;border-radius:17px;padding:3px}
 #home .home-avatar img{border-radius:14px}
 #home .home-heading h1{font-size:25px!important;margin:2px 0!important}
 #home .home-heading p{font-size:10px!important;margin:3px 0 0!important}
 #home .home-intro{margin:8px 0!important;font-size:11px!important}
 #home .home-tags{margin:7px 0!important}
 #home .home-tags span{font-size:9px!important;padding:3px 7px!important}
 #home #start{min-height:38px!important;margin-top:5px!important;padding:8px!important}
 #home #homeFullscreen{padding:8px!important;margin-top:5px!important}
 #home .home-controls{margin-top:6px!important;font-size:9px!important}
 #home .home-legal{margin:3px 0!important;font-size:8px!important}
}