*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,Monaco,Menlo,monospace;background:#000;color:#0f0;overflow:hidden;width:100vw;height:100vh}#app{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000}#viewport{background:#000;color:#0f0;font-family:Courier New,Monaco,Menlo,monospace;font-size:12px;line-height:1.2;white-space:pre;overflow:visible;border:2px solid #0f0;padding:10px;box-shadow:0 0 20px hsla(var(--level-1-h),var(--level-1-s),var(--level-1-l),.3);letter-spacing:0;word-spacing:0;font-variant-ligatures:none;font-feature-settings:normal;outline:none;transition:color .3s ease,border-color .3s ease,box-shadow .3s ease}#viewport.level-1{color:var(--level-1-color);border-color:var(--level-1-color);box-shadow:0 0 20px hsla(var(--level-1-h),var(--level-1-s),var(--level-1-l),.3)}#viewport.level-2{color:var(--level-2-color);border-color:var(--level-2-color);box-shadow:0 0 20px hsla(var(--level-2-h),var(--level-2-s),var(--level-2-l),.3)}#viewport.level-3{color:var(--level-3-color);border-color:var(--level-3-color);box-shadow:0 0 20px hsla(var(--level-3-h),var(--level-3-s),var(--level-3-l),.3)}#viewport.level-4{color:var(--level-4-color);border-color:var(--level-4-color);box-shadow:0 0 20px hsla(var(--level-4-h),var(--level-4-s),var(--level-4-l),.3)}#viewport.level-5{color:var(--level-5-color);border-color:var(--level-5-color);box-shadow:0 0 20px hsla(var(--level-5-h),var(--level-5-s),var(--level-5-l),.3)}#viewport.level-6{color:var(--level-6-color);border-color:var(--level-6-color);box-shadow:0 0 20px hsla(var(--level-6-h),var(--level-6-s),var(--level-6-l),.3)}#viewport.level-7{color:var(--level-7-color);border-color:var(--level-7-color);box-shadow:0 0 20px hsla(var(--level-7-h),var(--level-7-s),var(--level-7-l),.3)}#viewport.level-8{color:var(--level-8-color);border-color:var(--level-8-color);box-shadow:0 0 20px hsla(var(--level-8-h),var(--level-8-s),var(--level-8-l),.3)}#controls{margin-top:20px;text-align:center;color:#0f0;font-size:14px;text-shadow:0 0 10px hsla(var(--level-1-h),var(--level-1-s),var(--level-1-l),.5);transition:color .3s ease,text-shadow .3s ease}#controls p{margin:0}#controls.level-1{color:var(--level-1-color);text-shadow:0 0 10px hsla(var(--level-1-h),var(--level-1-s),var(--level-1-l),.5)}#controls.level-2{color:var(--level-2-color);text-shadow:0 0 10px hsla(var(--level-2-h),var(--level-2-s),var(--level-2-l),.5)}#controls.level-3{color:var(--level-3-color);text-shadow:0 0 10px hsla(var(--level-3-h),var(--level-3-s),var(--level-3-l),.5)}#controls.level-4{color:var(--level-4-color);text-shadow:0 0 10px hsla(var(--level-4-h),var(--level-4-s),var(--level-4-l),.5)}#controls.level-5{color:var(--level-5-color);text-shadow:0 0 10px hsla(var(--level-5-h),var(--level-5-s),var(--level-5-l),.5)}#controls.level-6{color:var(--level-6-color);text-shadow:0 0 10px hsla(var(--level-6-h),var(--level-6-s),var(--level-6-l),.5)}#controls.level-7{color:var(--level-7-color);text-shadow:0 0 10px hsla(var(--level-7-h),var(--level-7-s),var(--level-7-l),.5)}#controls.level-8{color:var(--level-8-color);text-shadow:0 0 10px hsla(var(--level-8-h),var(--level-8-s),var(--level-8-l),.5)}#level-indicator{margin-bottom:10px;text-align:center;color:#0f0;font-size:16px;font-weight:700;text-shadow:0 0 10px hsla(var(--level-1-h),var(--level-1-s),var(--level-1-l),.5);transition:color .3s ease,text-shadow .3s ease}#level-indicator.level-1{color:var(--level-1-color);text-shadow:0 0 10px hsla(var(--level-1-h),var(--level-1-s),var(--level-1-l),.5)}#level-indicator.level-2{color:var(--level-2-color);text-shadow:0 0 10px hsla(var(--level-2-h),var(--level-2-s),var(--level-2-l),.5)}#level-indicator.level-3{color:var(--level-3-color);text-shadow:0 0 10px hsla(var(--level-3-h),var(--level-3-s),var(--level-3-l),.5)}#level-indicator.level-4{color:var(--level-4-color);text-shadow:0 0 10px hsla(var(--level-4-h),var(--level-4-s),var(--level-4-l),.5)}#level-indicator.level-5{color:var(--level-5-color);text-shadow:0 0 10px hsla(var(--level-5-h),var(--level-5-s),var(--level-5-l),.5)}#level-indicator.level-6{color:var(--level-6-color);text-shadow:0 0 10px hsla(var(--level-6-h),var(--level-6-s),var(--level-6-l),.5)}#level-indicator.level-7{color:var(--level-7-color);text-shadow:0 0 10px hsla(var(--level-7-h),var(--level-7-s),var(--level-7-l),.5)}#level-indicator.level-8{color:var(--level-8-color);text-shadow:0 0 10px hsla(var(--level-8-h),var(--level-8-s),var(--level-8-l),.5)}#touch-controls{display:none}@media (pointer: coarse){#controls{display:none}#touch-controls{display:flex;position:fixed;left:0;right:0;bottom:0;padding:20px 24px calc(20px + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:50}}.touch-cluster{display:grid;gap:8px;pointer-events:auto}.touch-move{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px)}.touch-move .move-forward{grid-column:2;grid-row:1}.touch-move .move-left{grid-column:1;grid-row:2}.touch-move .move-back{grid-column:2;grid-row:2}.touch-move .move-right{grid-column:3;grid-row:2}.touch-turn{grid-template-columns:repeat(2,56px);grid-template-rows:56px}.touch-btn{display:flex;align-items:center;justify-content:center;width:56px;height:56px;font-size:22px;line-height:1;font-weight:700;color:#0f0;background:rgba(0,20,0,.55);border:2px solid #0f0;border-radius:10px;box-shadow:0 0 12px #00ff0059;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;transition:background .1s ease,transform .1s ease}.touch-btn.active{background:rgba(0,255,0,.35);transform:scale(.94)}