*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#142c32;color:#edf8f2;font-family:system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;height:100dvh;user-select:none}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #466067;background:#253e44;border-radius:12px}button:active{transform:scale(.96);background:#476267}button:focus-visible,a:focus-visible{outline:3px solid #b6ff83;outline-offset:2px}header{height:76px;flex-shrink:0;padding:calc(13px + env(safe-area-inset-top)) 20px 13px;display:flex;align-items:center;justify-content:space-between;height:calc(76px + env(safe-area-inset-top));border-bottom:1px solid #385057}.brand{display:flex;gap:10px;align-items:center;font-size:17px;letter-spacing:2px}.brand b{color:#b6ee91}.brand-icon{font-size:34px;color:#b6ee91}.brand small{display:block;font-size:8px;letter-spacing:1.35px;color:#99b3b5;margin-top:5px}#invite{font-size:13px;color:#daeddf;text-decoration:none;border:1px solid #47615f;border-radius:20px;padding:9px 13px}#world{position:relative;flex:1;min-height:100px;overflow:hidden;background:#a8d9e6;touch-action:none}canvas{display:block;width:100%;height:100%}.world-meta{position:absolute;z-index:1;top:14px;left:16px;right:16px;display:flex;justify-content:flex-end;pointer-events:none;color:#264b48;font-size:9px;font-weight:800;letter-spacing:1px}.world-meta span{background:#edf8ecc9;padding:7px 9px;border-radius:7px}#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:white;font-size:27px;font-weight:300;text-shadow:0 1px 3px #173c40;pointer-events:none}#target{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#173931db;border:1px solid #e0f7df38;white-space:nowrap;border-radius:20px;padding:8px 13px;font-size:11px;pointer-events:none}#toast{position:absolute;top:55px;left:15px;right:15px;text-align:center;font-size:12px;color:#fff;background:#173931e8;border-radius:8px;padding:10px;display:none}#controls{padding:10px 18px calc(9px + env(safe-area-inset-bottom));flex-shrink:0;background:#142c32}.control-heading,.palette-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.6px;color:#aec3c0}.control-heading button{width:28px;height:28px;border-radius:50%;font-size:13px}#coordinates{letter-spacing:0;color:#7f9e9d;margin-left:8px}.thumb-controls{display:flex;align-items:center;justify-content:space-around;height:119px}.pad{position:relative;width:102px;height:102px;border:1px solid #526a69;background:#1b343b;border-radius:50%;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px;color:#91ada8;font-size:12px}.pad>span:last-child{font-size:8px;letter-spacing:1.5px}.pad i{position:absolute;top:30px;left:30px;width:40px;height:40px;background:#406059;border:1px solid #78998a;border-radius:50%;pointer-events:none}.look i{background:#40535f;border-color:#738c9c}.flight{display:flex;gap:6px}.flight button{height:53px;width:45px;font-size:20px}.flight small{display:block;font-size:8px;letter-spacing:1px}.actions{display:flex;gap:10px;margin:2px 0 15px}.actions button{height:50px;min-height:44px;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;border-radius:13px;border:1px solid #52696b;background:#253e44 linear-gradient(#304a50,#253e44);box-shadow:inset 0 1px 0 #ffffff0d,0 3px 0 #0c2228;transition:transform .12s,box-shadow .12s,opacity .12s}.actions span{font-size:14px;font-weight:700;letter-spacing:.1px;white-space:nowrap}.actions svg{width:23px;height:23px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.actions #remove{color:#f2d8cf;border-color:#666565}.actions #remove svg{color:#edaa95}.actions #place{background:#b8ed91 linear-gradient(#c9f6a5,#aee483);color:#1c402a;border-color:#d3f9b6;box-shadow:inset 0 1px 0 #efffe1,0 3px 0 #688f4e;flex:1.35}.actions button:enabled:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #00000018,0 1px 0 #0c2228}.actions #place:enabled:active{box-shadow:inset 0 1px 3px #25401920,0 1px 0 #688f4e}.actions button:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}.palette-heading{margin-bottom:10px}#selected{color:#c8efa7;letter-spacing:0;font-size:11px}#palette{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}#palette button{position:relative;height:39px;padding:5px;border:2px solid transparent;border-radius:9px;background:#2a4247}#palette button[aria-pressed=true]{border-color:#ceffa2;background:#54705a}#palette i{display:block;width:100%;height:100%;border-radius:3px;box-shadow:inset 0 4px 0 #ffffff30,inset -5px -6px 0 #00000020}footer{display:flex;justify-content:space-between;gap:5px;font-size:8px;color:#88a39d;margin-top:10px}dialog{border:1px solid #557267;border-radius:22px;background:#173239;color:#edf8f2;width:min(90vw,390px);padding:28px;max-height:90dvh;overflow:auto;user-select:text}dialog::backdrop{background:#081e27bb}dialog h2{font-size:23px;line-height:1.25;margin:12px 0}dialog p{font-size:13px;line-height:1.6;color:#bdcfcc}.close{position:absolute;right:12px;top:10px;width:32px;height:32px;font-size:22px}#copy{width:100%;padding:13px;background:#b8ed91;color:#183d2c;font-weight:700}#join-link{width:100%;margin:16px 0 12px;padding:10px;background:#0e252a;color:#c3dace;border:1px solid #426057;border-radius:8px;font-size:12px}#qr{text-align:center}.rcRoomQrCodeLink{display:inline-block;background:white;color:#111;padding:14px;text-align:center;text-decoration:none;border-radius:10px}.rcTechLabel{font-size:18px;font-weight:bold;margin-bottom:9px}.rcRoomQrCode{display:block;margin:auto;width:150px;height:150px}.rcRoomId{font-size:21px;margin-top:8px;letter-spacing:3px}@media(min-width:700px){#controls{padding-left:max(18px,calc((100vw - 480px)/2));padding-right:max(18px,calc((100vw - 480px)/2))}}@media(max-height:650px){header{height:56px;padding-top:8px;padding-bottom:8px}.thumb-controls{height:88px}.pad{width:78px;height:78px}.pad i{left:22px;top:22px;width:32px;height:32px}.actions{margin-bottom:8px}.actions button{height:39px}#controls{padding-top:5px}.control-heading{height:22px}footer{margin-top:6px}}@media(orientation:landscape) and (max-height:600px){body{padding-right:290px}header{height:58px}#controls{position:absolute;right:0;top:0;bottom:0;width:290px;padding:14px 12px;overflow:auto}.thumb-controls{height:110px}#palette{grid-template-columns:repeat(4,1fr)}}
.control-heading #mode{width:auto;min-width:86px;height:28px;padding:0 10px;border-radius:14px;color:#c8efa7;font-size:11px;letter-spacing:0}.control-heading #mode[aria-pressed=true]{background:#476344}.flight button:disabled{opacity:.3}.control-heading{gap:6px}@media(max-width:360px){#coordinates{display:none}}

#options{font-size:13px;color:#daeddf;border:1px solid #47615f;border-radius:20px;padding:9px 13px;background:transparent}.option-list{display:flex;flex-direction:column;gap:10px}.option-list button{text-align:left;padding:15px;font-weight:650}.option-list small{display:block;color:#a5bcb5;font-size:11px;font-weight:400;margin-top:5px}#name-form label{display:block;font-size:12px;color:#bdcfcc}#player-name{display:block;width:100%;margin-top:8px;padding:13px;background:#0e252a;color:#edf8f2;border:1px solid #638375;border-radius:10px;font:inherit;user-select:text}#save-name{width:100%;padding:13px;background:#b8ed91;color:#183d2c;font-weight:700}#name-error{color:#efb19e}
.outfit-colors{display:flex;gap:14px;margin-top:20px}.outfit-colors label{flex:1}.outfit-colors input{display:block;width:100%;height:46px;padding:4px;margin-top:8px;border:1px solid #638375;border-radius:10px;background:#0e252a;cursor:pointer}
.actions button{-webkit-appearance:none;appearance:none}
.actions button,.actions button *{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.actions button>*{pointer-events:none}
.actions button:focus:not(:focus-visible){outline:none}
/* Reserve the same line box for every save status, including fallback-font symbols. */
#controls footer{height:16px;min-height:16px;line-height:16px;overflow:hidden}
#save{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Keep touch presses on the same painted layer; mobile browsers can flash when it moves. */
@media(hover:none),(pointer:coarse){
    .actions button{transition:none}
    .actions button:enabled:active{transform:none;background:#253e44;box-shadow:inset 0 2px 3px #00000025}
    .actions #place:enabled:active{transform:none;background:#aee483;box-shadow:inset 0 2px 3px #25401920}
}


/* Keep the two World options actions identical in height and vertical rhythm. */
.option-list button{height:72px;min-height:72px;padding:12px 15px;line-height:1.2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#options-dialog #invite{height:72px;min-height:72px;padding:12px 15px;border-radius:12px}
.option-list .option-icon{width:18px;height:18px;position:absolute;margin-left:0;stroke:#b8ed91;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.option-list button>span,.option-list button>small{margin-left:28px}