[hidden]{display:none!important} :root{color-scheme:dark;color:#eee4d3} body{font-family:Georgia,'Batang',serif} button,input{font:inherit} button{color:#eee4d3;border:1px solid #8d7957;background:linear-gradient(#10151bdd,#04060beb);cursor:pointer;min-height:44px;padding:10px 20px} button:hover,button:focus-visible{border-color:#b5d9ff;box-shadow:inset 0 0 20px #477eb933} button:disabled{opacity:.4;cursor:default} small{display:block;font-size:.55em;letter-spacing:.09em;margin-top:6px;color:#b9b4aa} #selection{height:100dvh;padding: max(10px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:grid;grid-template-rows:15% 73% 12%;background:linear-gradient(#02050b25,#02050b20),url('assets/background.png') center/cover} header{display:flex;align-items:start;justify-content:space-between;gap:20px} header img{width:29%;max-height:100%;object-fit:contain;object-position:left top} header p{max-width:32%;font-size:clamp(10px,1.2vw,18px);text-align:right;line-height:1.6;margin:12px 8px} .layout{display:grid;grid-template-columns:25% 44% 29%;gap:1%;min-height:0}.panel{background:linear-gradient(120deg,#03070def,#080c1399);border:1px solid #8d79577a;box-shadow:inset 0 0 0 4px #03070b,inset 0 0 0 5px #8d795744;padding:14px;min-width:0;min-height:0} h1,h2{font-weight:normal;text-align:center;font-size:clamp(16px,1.6vw,26px);margin:0 0 12px} .roster{display:flex;flex-direction:column} #slots{flex:1;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:8px;min-height:0}.slot{padding:6px 10px;display:flex;align-items:center;gap:10px;text-align:left;min-height:0;min-width:0;border:1px solid #95836688;background:#060b12bf}.slot.selected{border-color:#96caff;background:linear-gradient(90deg,#19334bbb,#040a12dd);box-shadow:inset 0 0 15px #6ba4d344}.slot img{height:100%;width:24%;object-fit:contain}.slot span{min-width:0;flex:1}.slot strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(12px,1.25vw,20px);font-weight:normal}.slot small{font-size:clamp(9px,.8vw,13px);letter-spacing:0;line-height:1.4}.slot.empty{justify-content:center;text-align:center;font-size:clamp(12px,1.1vw,18px)} #count{font-size:clamp(10px,.9vw,14px);margin:12px 0 0;color:#bdb49f}.stage{position:relative;min-height:0;text-align:center} #hero{position:absolute;width:100%;height:84%;bottom:0;left:0;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 15px #0009)} #heroInfo{position:relative;z-index:1;text-shadow:0 2px 8px #000;font-size:clamp(16px,1.5vw,24px)} #heroInfo p{margin:6px} #heroInfo small{font-size:.6em} #empty{position:absolute;top:30%;width:100%;font-size:clamp(14px,1.4vw,22px)} #equipment{height:80%;display:grid;grid-template-rows:repeat(4,1fr);gap:10px} .equip{display:flex;align-items:center;gap:14px;border:1px solid #b3a58a55;background:#03070bbd;padding:8px;min-height:0}.equip img{width:28%;height:100%;object-fit:contain;object-position:center}.equip span{font-size:clamp(11px,1.05vw,17px)}.equip small{font-size:.8em;letter-spacing:0;line-height:1.4}.hint{color:#b3ada1;font-size:clamp(10px,.85vw,14px);line-height:1.5} footer{display:flex;align-items:center;justify-content:center;gap:22px} footer button{width:20%;font-size:clamp(13px,1.4vw,23px)} #enter{width:27%;border-color:#b6a071;background:linear-gradient(#122239dd,#040b16)}#delete{border-color:#81514a} #mute{position:fixed;bottom:8px;right:8px;font-size:11px;min-height:30px;padding:5px 9px;z-index:5} fieldset{border:0;margin:0 0 16px;padding:0;display:flex;gap:8px}legend{font-size:14px;margin-bottom:8px}fieldset label{flex:1;padding:14px 6px;border:1px solid #8d795777;cursor:pointer;font-size:clamp(12px,1.2vw,18px)}fieldset label:has(input:checked){border-color:#88bfff;background:#22476a66}input[type=radio]{accent-color:#9ec9fa}#name{width:100%;margin:10px 0;padding:12px;background:#0007;border:1px solid #8d7957;color:#fff}.actions{display:flex;gap:8px}.actions button{flex:1}dialog{max-width: min(460px,90vw);background:#060b14;color:#eee4d3;border:1px solid #ae9470;padding:24px}dialog::backdrop{background:#000b}#toast{position:fixed;left:50%;top:12px;transform:translateX(-50%);background:#060b14ed;border:1px solid #968264;padding:12px;z-index:20;display:none;text-align:center}#toast.show{display:block}#portrait{display:none;position:fixed;inset:0;background:#060b14;z-index:100;align-items:center;justify-content:center} @media(orientation:portrait){#portrait{display:flex}}@media(max-height:550px){#selection{grid-template-rows:14% 72% 14%;padding:6px 12px}.panel{padding:8px}h1,h2{margin-bottom:6px}#slots{gap:4px}#count{margin:5px 0 0}footer{gap:12px}footer button{padding:4px 10px;min-height:38px}#equipment{gap:5px;height:82%}.equip{padding:4px;gap:7px}fieldset{margin-bottom:8px}fieldset label{padding:6px}#name{padding:7px;margin:5px 0}.hint{margin:4px 0}.actions button{padding:6px}header p{margin:0}#hero{height:82%}}
[hidden]{display:none!important}
@media(max-height:550px){#heroInfo{font-size:12px}#heroInfo p{margin:3px}#heroInfo p:last-child{font-size:10px}#hero{height:76%}.equipment{overflow-y:auto}#createForm{font-size:12px}}