/* Crownspire Academy – portrait reference UI, pass 2. Non-destructive layout layer. */
#create{background:linear-gradient(#060b16b8,#060a13e8),radial-gradient(ellipse at 50% 20%,#263b5b,#050811 78%);color:#dce6f6}
#create .file{position:relative;max-width:720px;margin:auto;padding:clamp(18px,5vw,36px)!important;background:linear-gradient(155deg,#0d1727ed,#060a14f5)!important;border:24px solid transparent!important;border-image:url('/assets/ui/reference-panel.svg') 38 fill / 24px / 0 stretch!important}
#create .filehead{text-align:center;font:clamp(20px,5vw,31px) 'Cinzel',Georgia,serif;letter-spacing:.15em;color:#e4e9f5!important}
#create .file label{display:block;margin:16px 0 7px;font:19px Georgia,serif;color:#e0e6f3!important}
#create #charName{display:block;width:100%;min-height:56px;border:1px solid #a4b5d0!important;border-radius:8px!important;background:linear-gradient(#080e1a,#05070d)!important;color:#f1f5ff!important;box-shadow:inset 0 0 0 2px #26364b,0 0 13px #94b6ed30!important;padding:12px 18px!important;font:20px Georgia,serif!important;letter-spacing:.02em;outline-offset:3px}
#create #charName:focus{outline:2px solid #b8d3ff;box-shadow:0 0 20px #769edb77!important}
#create #charName::placeholder{color:#a2afc4;opacity:1}
#create .file select,#create .file input:not(#charName){min-height:48px;border:1px solid #8b9cb7!important;background:#080f1d!important;color:#e7ebf4!important;border-radius:6px;padding:10px}
#create #createBtn{display:block;max-width:650px;margin:18px auto 28px;min-height:65px;background:url('/assets/ui/reference-panel.svg') center/100% 100% no-repeat!important;border:0!important;color:#e5ebfa!important;font:22px 'Cinzel',Georgia,serif!important}
#gameScreen .reference-nav button{min-width:44px;min-height:48px}
#gameScreen .reference-nav button:focus-visible,#gameScreen .weapon-actions button:focus-visible,#gameScreen #skills button:focus-visible{outline:2px solid #d6e6ff;outline-offset:2px}
#gameScreen .reference-quest{pointer-events:none}
#gameScreen .reference-hotbar{pointer-events:none}
@media(max-width:750px) and (orientation:portrait){
 #gameScreen .hud{top:calc(5px + env(safe-area-inset-top))}
 #gameScreen .reference-nav{top:calc(62px + env(safe-area-inset-top));z-index:15}
 #gameScreen .reference-nav button{height:51px;font-size:9px}
 #gameScreen .reference-nav button .ref-icon{font-size:20px}
 #gameScreen .reference-quest{top:calc(123px + env(safe-area-inset-top));width:min(60vw,245px);min-height:65px}
 #gameScreen .hall-location{top:calc(200px + env(safe-area-inset-top))!important}
 #gameScreen .hall-controls{top:calc(200px + env(safe-area-inset-top));right:7px}
 #gameScreen .actionline{top:auto;bottom:calc(280px + env(safe-area-inset-bottom));right:5px;gap:0}
 #gameScreen .actionline .orn{min-height:48px;width:76px;max-width:76px;font-size:10px}
 #gameScreen .bottom{bottom:calc(80px + env(safe-area-inset-bottom));left:8px;right:8px}
 #gameScreen .joystick{width:clamp(92px,27vw,120px);height:clamp(92px,27vw,120px)}
 #gameScreen #skills{position:absolute;right:0;bottom:calc(120px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,56px);max-width:120px;gap:4px}
 #gameScreen #skills .skill{width:56px;height:56px;min-height:56px;min-width:56px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px!important}
 #gameScreen #skills .skill span{font-size:8px;line-height:1.05;max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #gameScreen #skills .skill i{font-size:17px}
 #gameScreen .weapon-actions{bottom:calc(92px + env(safe-area-inset-bottom));right:6px;display:grid;grid-template-columns:repeat(2,65px);gap:3px}
 #gameScreen .weapon-actions .skill{width:65px;height:65px;min-height:65px;padding:9px!important;overflow:hidden}
 #gameScreen .weapon-actions .skill img{height:23px}
 #gameScreen .weapon-actions .rpg-attack-label{font-size:9px!important;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 #gameScreen .reference-hotbar{bottom:calc(7px + env(safe-area-inset-bottom));left:50%;width:min(75vw,280px);height:63px;z-index:12;padding:12px 22px}
 #gameScreen .reference-hotbar span{height:38px}
 #gameScreen .hall-prompt{bottom:calc(360px + env(safe-area-inset-bottom))}
}
@media(max-width:380px) and (orientation:portrait){
 #gameScreen .reference-quest{width:52vw}
 #gameScreen .reference-nav button{font-size:8px}
 #gameScreen .actionline .orn{width:65px;max-width:65px}
}