*{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}}
.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}
}


/* Compact, uniform options fit a short landscape viewport without scrolling. */
#options-dialog{padding:16px}
#options-dialog h2{font-size:20px;margin:0 40px 0 0;line-height:25px}
#options-dialog #current-name{font-size:11px;line-height:16px;margin:4px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#options-dialog .close{width:44px;height:44px;top:6px;right:6px}
#options-dialog .option-list{gap:6px}
#options-dialog .option-list button{position:relative;height:48px;min-height:48px;padding:7px 12px;border-radius:10px;font-size:13px;font-weight:650;line-height:16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
#options-dialog .option-list small{font-size:10px;line-height:12px;margin-top:2px}
.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}

#target{left:auto;right:14px;transform:none;max-width:calc(100% - 28px);white-space:normal;text-align:right}

/* Keep both action pairs between the thumb pads, without a separate building row. */
.thumb-controls{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px minmax(0,1fr);gap:8px;height:112px}
.pad-wrap{display:flex;justify-content:center;min-width:0}
.thumb-controls .pad{width:min(102px,100%);height:auto;aspect-ratio:1}
.thumb-controls .pad i{left:calc(50% - 20px);top:calc(50% - 20px);width:40px;height:40px}
.actions,.flight{flex-direction:column;gap:8px;margin:0}
.actions button,.actions #place,.flight button{flex:none;width:44px;height:44px;min-height:44px;padding:0;justify-content:center}
.flight button{font-size:26px;touch-action:none}

/* Landscape screens: controls float at the edges of a full-viewport world. */
@media(orientation:landscape){
    body{position:relative;padding:0}
    #world{position:absolute;inset:0;width:100%;height:100%;min-height:0}
    header{position:absolute;z-index:4;top:calc(10px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));height:44px;padding:0;border:0;pointer-events:none}
    .brand{font-size:13px;letter-spacing:1.5px;text-shadow:0 1px 3px #142c32}
    .brand-icon{font-size:26px}.brand small{display:none}
    #options{min-height:44px;background:#142c32c9;pointer-events:auto}
    #controls{position:absolute;z-index:3;inset:0;width:auto;padding:0;background:none;overflow:visible;pointer-events:none}
    #controls button,#controls .pad{pointer-events:auto}
    .control-heading,.thumb-controls{display:contents}
    .control-heading>span,#controls footer,.palette-heading>span:first-child{display:none}
    .control-heading #mode{position:absolute;left:calc(16px + env(safe-area-inset-left));top:calc(64px + env(safe-area-inset-top));height:44px;background:#142c32c9}
    .control-heading #mode[aria-pressed=true]{background:#476344dd}
    .control-heading #help{position:absolute;right:calc(16px + env(safe-area-inset-right));top:calc(64px + env(safe-area-inset-top));width:44px;height:44px;background:#142c32c9}
    .thumb-controls .pad{position:absolute;width:102px;height:102px;bottom:calc(74px + env(safe-area-inset-bottom));background:#142c328c;border-color:#d4e9dd80;color:#e3f0e7}
    #move{left:calc(16px + env(safe-area-inset-left))}
    #look{right:calc(16px + env(safe-area-inset-right))}
    .pad i{left:30px;top:30px;width:40px;height:40px}
    .flight{position:absolute;right:calc(130px + env(safe-area-inset-right));bottom:calc(78px + env(safe-area-inset-bottom));flex-direction:column;gap:8px}
    .flight button{width:44px;height:44px;background:#142c32c9;font-size:26px;touch-action:none}
    .actions{position:absolute;left:calc(130px + env(safe-area-inset-left));bottom:calc(78px + env(safe-area-inset-bottom));width:44px;flex-direction:column;gap:8px;margin:0}
    .actions button{flex:none;min-height:44px;height:44px;padding:0;background:#253e44d9;box-shadow:none}
    .actions #place{flex:none;background:#b8ed91e8;box-shadow:none}
    .actions svg{width:23px;height:23px}
    #palette{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));grid-template-columns:repeat(8,44px);gap:4px}
    #palette button{height:44px;background:#142c32bf}
    .palette-heading{position:absolute;bottom:calc(62px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0}
    #selected{padding:3px 8px;border-radius:8px;background:#142c32bf;font-size:10px}
    .world-meta{top:calc(18px + env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;font-size:8px}
    #target{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right));max-width:calc(50% - 56px - env(safe-area-inset-right));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;font-size:9px;line-height:12px;border-radius:6px}
    #toast{top:calc(112px + env(safe-area-inset-top));left:180px;right:180px}
}
@media(orientation:landscape) and (max-height:340px){
    #options-dialog .option-list button{height:44px;min-height:44px;padding-top:5px;padding-bottom:5px}
    .brand{display:none}header{justify-content:flex-end}
    .control-heading #mode{top:calc(10px + env(safe-area-inset-top))}
    .control-heading #help{top:calc(10px + env(safe-area-inset-top));right:calc(120px + env(safe-area-inset-right))}
}
/* Keep the compatibility screen usable without modern layout features. */
.browser-error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: auto;
    background: #07090f;
    color: #f3ecdf;
    text-align: center;
}
.browser-error-table { display: table; width: 100%; height: 100%; }
.browser-error-cell { display: table-cell; vertical-align: middle; padding: 24px; }
.browser-error-card {
    max-width: 540px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid #69523c;
    border-radius: 18px;
    background: #141923;
}
.browser-error-card img { border-radius: 14px; }
.browser-error-card h1 { margin: 20px 0 14px; font-size: 28px; line-height: 1.2; }
.browser-error-card p { margin: 12px 0; color: #c8c0b3; font-size: 17px; line-height: 1.5; }
.browser-error-card a {
    display: inline-block;
    margin-top: 16px;
    padding: 14px 24px;
    border: 2px solid #ffb35c;
    border-radius: 10px;
    background: #ffb35c;
    color: #181109;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}
.browser-error-card a:focus,
.browser-error-card a:hover { outline: 3px solid #ffffff; outline-offset: 3px; }
.browser-unavailable body > header,
.browser-unavailable #world,
.browser-unavailable #controls,
.browser-unavailable dialog { display: none; }
.browser-error { font-family: Arial, sans-serif; }