*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--color-bg-deep, #0b0b14);color:var(--color-text-primary, #f2f2f8)}#app{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:8px;padding:8px}#channel-form{display:flex;flex-wrap:wrap;gap:8px;width:100%;min-width:0;padding:8px;background:var(--color-bg-base);border:1px solid var(--color-border);border-radius:12px}#channel-form input{flex:1 1 160px;min-width:0;padding:10px 12px;font-size:15px;border:1px solid var(--color-border);border-radius:8px;background:#0f0f1a;color:var(--color-text-primary)}#channel-form button{flex:0 0 auto;padding:10px 14px;font-size:16px;font-weight:600;background:var(--color-primary, #7c5cff);color:#fff;border:none;border-radius:8px;cursor:pointer}#channel-form button:disabled{opacity:.6;cursor:not-allowed}#status{flex:1 0 100%;min-height:17px;font-size:14px;color:var(--color-text-secondary)}#views-container{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;min-height:0;overflow:hidden}#stream-view{width:100%;flex:1 1 0;min-width:0;min-height:0;background:var(--color-bg-base);border:1px solid var(--color-border);border-radius:12px;overflow:hidden}.stream-placeholder{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:8px}.stream-placeholder input{padding:10px 12px;font-size:14px;border:1px solid var(--color-border);border-radius:6px;background:#0f0f1a;color:var(--color-text-primary)}.stream-placeholder button{padding:10px;font-size:14px;background:var(--color-primary, #7c5cff);color:#fff;border:none;border-radius:6px;cursor:pointer}#streamIframe{width:100%;flex:1 1 0;min-height:0;border:none;background:#000}#resize-handle{flex:0 0 8px;background:var(--color-border);cursor:row-resize;border-radius:4px;transition:background .12s ease}#game-view{flex:1 1 0;min-width:0;min-height:0;overflow:hidden;position:relative}#game-view canvas{display:block;width:100%;height:100%}#resize-handle:hover,#resize-handle:active{background:var(--color-primary, #7c5cff)}#stream-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}#stream-controls .label{font-size:13px;color:var(--color-text-secondary)}#stream-controls button{padding:6px 12px;font-size:13px;background:var(--color-bg-raised, #1e1e2e);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:6px;cursor:pointer}#stream-controls button:hover{background:var(--color-primary, #7c5cff);color:#fff;border-color:var(--color-primary, #7c5cff)}#ranking-banner{width:100%;min-width:0;padding:8px 12px;background:var(--color-bg-base);border:1px solid var(--color-border);border-radius:12px;font-size:14px}#ranking-banner .banner-header{font-weight:600;margin-bottom:4px;color:var(--color-primary, #7c5cff)}#ranking-list{margin:0;padding-left:20px;color:var(--color-text-primary)}#ranking-list li{margin-bottom:2px}@media(max-width:520px){#app{gap:6px;padding:6px}#channel-form,.stream-placeholder{padding:6px}#channel-form input,#channel-form button,.stream-placeholder input,.stream-placeholder button,#stream-controls button{min-height:32px;padding:6px 8px;font-size:12px}#stream-controls .label,#ranking-banner,#status{font-size:12px}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:100;transition:opacity .2s ease}.overlay.hidden{display:none}.overlay-content{background:var(--color-bg-base);border:1px solid var(--color-primary, #7c5cff);border-radius:12px;padding:24px 32px;min-width:280px;text-align:center;color:var(--color-text-primary)}#round-overlay-title{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--color-primary, #7c5cff)}#round-overlay-body{font-size:15px;color:var(--color-text-secondary)}