*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0b1018;font-family:Courier New,monospace;color:#d6dbe0}#app{display:flex;flex-direction:column;width:100%;height:100%}#top-bar{flex-shrink:0}#upper-content{flex:1;display:flex;min-height:0;overflow:hidden}#left-panel{width:240px;flex-shrink:0;overflow-y:auto;border-right:1px solid #181e2c}#right-panel{width:280px;flex-shrink:0;overflow-y:auto;border-left:1px solid #181e2c}#profile-section{flex:1;min-width:0;overflow-y:auto;display:flex;align-items:center;justify-content:center}#canvas-area{flex-shrink:0;height:27%;min-height:154px;max-height:266px;display:flex;flex-direction:row;overflow:hidden;background:#080e18;border-top:1px solid #181e2c}.canvas-wrapper{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;min-width:0}.canvas-wrapper:not(:last-child){border-right:1px solid #1c2838}.canvas-label{position:absolute;top:4px;left:8px;color:#72b3e8;font-size:10px;font-family:Courier New,monospace;letter-spacing:1px;z-index:10;pointer-events:none;opacity:1}.canvas-wrapper canvas{display:block}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#ui-overlay>*{pointer-events:auto}#left-panel::-webkit-scrollbar,#right-panel::-webkit-scrollbar,#profile-section::-webkit-scrollbar{width:4px}#left-panel::-webkit-scrollbar-thumb,#right-panel::-webkit-scrollbar-thumb,#profile-section::-webkit-scrollbar-thumb{background:#283040;border-radius:2px}#left-panel::-webkit-scrollbar-track,#right-panel::-webkit-scrollbar-track,#profile-section::-webkit-scrollbar-track{background:transparent}body.light-mode{background:#f5f0eb;color:#3a3530}body.light-mode #left-panel{border-right-color:#e0d8d0}body.light-mode #right-panel{border-left-color:#e0d8d0}body.light-mode #canvas-area{background:#ece6df;border-top-color:#e0d8d0}body.light-mode .canvas-wrapper:not(:last-child){border-right-color:#d8d0c8}body.light-mode .canvas-label{color:#b07a50}body.light-mode #stats-bar{background:#f5f0ebf2!important;border-bottom-color:#e0d8d0!important;color:#3a3530!important}body.light-mode #profile-card{color:#3a3530}body.light-mode #portrait-frame{border-color:#c8d8e8;background:radial-gradient(circle,#b8d8f0,#a0c8e0,#90b8d8)}@keyframes fishSwimRight{0%{transform:translate(-40px)}to{transform:translate(200px)}}@keyframes fishSwimLeft{0%{transform:translate(200px)}to{transform:translate(-40px)}}@keyframes fishWobble{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}@keyframes fishSwimUp{0%{transform:translateY(200px)}to{transform:translateY(-40px)}}@keyframes fishSwimDown{0%{transform:translateY(-40px)}to{transform:translateY(200px)}}@keyframes fishWobbleX{0%,to{transform:translate(0)}50%{transform:translate(5px)}}@keyframes jellyPulse{0%,to{transform:scaleY(1)}50%{transform:scaleY(.85)}}@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.4}}@media(max-width:1100px){#left-panel{width:180px}#right-panel{width:200px}}@media(max-width:860px){#upper-content{flex-direction:column}#left-panel,#right-panel{width:100%;max-height:160px;border-left:none;border-right:none;border-bottom:1px solid #181e2c}#profile-section{min-height:180px}#canvas-area{height:32%;max-height:336px}}@media(max-width:600px){#top-bar,#left-panel,#right-panel{display:none!important}#upper-content{flex:1;min-height:0;position:relative;z-index:1}#profile-section{flex:1;min-height:0;overflow-y:auto}#canvas-area{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;flex-direction:column;max-height:none;border-top:none;opacity:.3;pointer-events:none}.canvas-wrapper{min-height:0}.canvas-wrapper:not(:last-child){border-right:none;border-bottom:none}.canvas-label{display:none}.alert-banner{display:none!important}}