:root{--bg:#07111f;--panel:#0a1726;--line:#2a4c70;--ink:#eef6ff;--muted:#9eb4ca;--orange:#ff8a13;--blue:#4aa3ff}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);touch-action:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#07111fe8;z-index:40;font-weight:900;letter-spacing:.08em}
#window-world{position:fixed;inset:0;z-index:6;perspective:1250px;perspective-origin:50% 46%;pointer-events:none;overflow:hidden}
#window-ring{position:absolute;left:50%;top:43%;width:0;height:0;transform-style:preserve-3d;will-change:transform;transition:opacity .18s ease}
.wpane{--w:310px;--h:225px;position:absolute;left:0;top:0;width:var(--w);height:var(--h);margin-left:calc(var(--w)/-2);margin-top:calc(var(--h)/-2);border:1px solid rgba(76,139,196,.8);border-radius:16px;overflow:hidden;background:linear-gradient(145deg,rgba(14,32,52,.94),rgba(6,15,26,.96));box-shadow:0 22px 58px #000b;backface-visibility:hidden;pointer-events:auto;transition:opacity .2s,filter .2s,box-shadow .2s,border-color .2s}
.wpane.front{border-color:var(--orange);box-shadow:0 24px 70px #000d,0 0 0 2px #ff8a1333}
.wpane.far{opacity:.28;filter:saturate(.55)}
.whead{height:38px;display:flex;align-items:center;gap:7px;padding:0 8px;background:linear-gradient(#132a43,#0d1d30);border-bottom:1px solid #284760}
.whead img{width:24px;height:24px;border-radius:7px;background:#143555}.whead b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.whead button,.whead a{font:inherit;font-size:9px;font-weight:900;color:#d6e7f7;background:#132842;border:1px solid #325577;border-radius:7px;padding:4px 6px;text-decoration:none}
.wbody{height:calc(100% - 38px);position:relative;overflow:hidden;background:#0a1523}
.wbody iframe{width:100%;height:100%;border:0;background:#fff}
.preview{height:100%;display:flex;flex-direction:column;justify-content:center;padding:16px;background:radial-gradient(circle at 70% 15%,#173759,#0a1726 58%);pointer-events:none}
.preview h3{margin:0 0 7px;font-size:19px;letter-spacing:-.03em}.preview p{margin:0;color:#96abc0;font-size:11px;line-height:1.45}.preview span{margin-top:12px;color:#ffad55;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
#hud{position:fixed;z-index:20;left:10px;right:10px;top:max(10px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none;flex-wrap:wrap}
#hud>div{pointer-events:auto;background:#07111fdd;border:1px solid #28537d;border-radius:14px;padding:9px 11px;backdrop-filter:blur(12px)}
#hud b{display:block;color:var(--orange);font-size:13px}#hud span{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.view-tabs{display:flex;gap:5px;padding:5px!important}
.view-tabs a{font-size:10px;font-weight:900;color:#c9d9e9;text-decoration:none;border:1px solid #2c5d88;background:#0d2035;border-radius:8px;padding:8px 10px;white-space:nowrap}
.view-tabs a.active{color:#08111c;background:var(--orange);border-color:var(--orange)}
.buttons{display:flex;gap:6px;flex-wrap:wrap}button{font:inherit;font-size:10px;font-weight:900;color:#fff;background:#10243d;border:1px solid #2c6aa2;border-radius:9px;padding:8px 10px}button.active{border-color:var(--orange);color:#ffbd78}
#hint{position:fixed;z-index:20;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);background:#07111fdd;border:1px solid #28537d;border-radius:999px;padding:8px 12px;color:#b9cde0;font-size:10px;white-space:nowrap;backdrop-filter:blur(10px)}
@media(max-width:650px){#window-world{perspective:760px;perspective-origin:50% 50%}.wpane{--w:260px;--h:190px;border-radius:14px}.whead{height:38px}.whead img{width:24px;height:24px}.wbody{height:calc(100% - 38px)}.preview{padding:14px}.preview h3{font-size:18px}.preview p{font-size:11px}.wpane .whead a{display:none}#hud{align-items:flex-start}.view-tabs{order:3;width:100%;justify-content:center}.buttons{max-width:180px;justify-content:flex-end}#hint{font-size:9px}}

#focus2d{position:fixed;inset:0;z-index:80;background:#07111f;display:flex;flex-direction:column}
#focus2d[hidden]{display:none}
.focusbar{height:58px;display:flex;align-items:center;gap:10px;padding:max(8px,env(safe-area-inset-top)) 10px 8px;background:#0c1929;border-bottom:1px solid #2d547a}
.focusbar strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.focusbar button,.focusbar a{font:inherit;font-size:11px;font-weight:900;color:#fff;background:#122844;border:1px solid #346b9d;border-radius:9px;padding:9px 11px;text-decoration:none}
.focusbar button{background:#ff8a13;color:#07111f;border-color:#ff8a13}
.focusbody{flex:1;min-height:0;background:#fff}
.focusbody iframe{width:100%;height:100%;border:0;background:#fff;display:block}
body.focus-mode #hud,body.focus-mode #hint,body.focus-mode #window-world,body.focus-mode #game{visibility:hidden}
.wpane{cursor:pointer}

@media(max-width:650px) and (orientation:portrait){
  #window-ring{top:47%}
  .wpane{--w:280px;--h:205px}
  .wpane.far{opacity:.18}
  .whead button{font-size:10px;padding:6px 8px}
  #hint{max-width:92vw;white-space:normal;text-align:center;line-height:1.25}
}
@media(max-width:900px) and (orientation:landscape){
  .wpane{--w:300px;--h:210px}
  #window-ring{top:48%}
}

#wall-world{position:fixed;inset:0;z-index:4;perspective:1500px;perspective-origin:50% 46%;pointer-events:none;overflow:hidden}
#wall-board{position:absolute;left:50%;top:47%;width:min(82vw,980px);height:min(46vh,500px);transform-style:preserve-3d;pointer-events:auto;border:1px solid rgba(65,117,164,.26);border-radius:42px;background:linear-gradient(180deg,rgba(8,26,45,.34),rgba(4,13,24,.16));transition:transform .08s linear}
.wallpane{position:absolute;width:30%;height:42%;left:calc(3% + var(--col)*32%);top:calc(5% + var(--row)*46%);padding:3px;border:1px solid rgba(72,145,211,.72);border-radius:15px;overflow:hidden;background:#0a1726;box-shadow:0 18px 45px #0008;pointer-events:auto}
.wallpane .wbody{height:calc(100% - 38px)}
.wallpane:hover{border-color:var(--orange)}
.wpane,.wallpane{padding:3px}
.wpane .whead,.wallpane .whead{border-radius:11px 11px 0 0}
.wpane .wbody,.wallpane .wbody{border-radius:0 0 11px 11px}
.identity-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--ident,#4aa3ff);box-shadow:0 0 9px var(--ident,#4aa3ff)}
.identity-0{--ident:#4aa3ff}.identity-1{--ident:#ff8a13}.identity-2{--ident:#63d6c5}.identity-3{--ident:#b99cff}.identity-4{--ident:#ffd166}.identity-5{--ident:#82d173}
#drag-ghost{position:fixed;left:0;top:0;z-index:120;width:280px;height:190px;padding:3px;border:2px solid var(--orange);border-radius:16px;background:#0a1726;box-shadow:0 30px 80px #000d;pointer-events:none;overflow:hidden;transform-origin:center;opacity:.94}
#drag-ghost[hidden]{display:none}
#drag-ghost.wall-target{box-shadow:0 30px 80px #000d,0 0 0 4px rgba(74,163,255,.28);transform-origin:center}
body.arranging #wall-board{border-color:rgba(255,138,19,.65);background:linear-gradient(180deg,rgba(12,37,63,.5),rgba(5,15,27,.25))}
.lower-ring{filter:brightness(1.06)}
.upper-ring{filter:brightness(.96)}

@media(max-width:650px) and (orientation:portrait){
  #window-world{perspective:820px;perspective-origin:50% 53%}
  #window-ring{top:51%}
  .wpane{--w:250px;--h:175px}
  .wallpane{width:45%;height:31%;left:calc(3% + var(--col)*48%);top:calc(4% + var(--row)*33%)}
  #wall-board{top:48%;width:92vw;height:44vh}
}
@media(max-width:900px) and (orientation:landscape){
  #wall-board{width:76vw;height:58vh;top:49%}
}