.di-game{height:100dvh;width:100%;box-sizing:border-box;padding:var(--space-3);grid-template-columns:var(--panel-w) minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-gap:var(--space-3);overflow:hidden;background:radial-gradient(1200px 700px at 15% 0,color-mix(in srgb,var(--teal-500) 55%,var(--color-bg)) 0,color-mix(in srgb,var(--teal-500) 18%,var(--color-bg)) 45%,var(--color-bg) 100%) fixed}.di-game,.di-rail{display:grid;gap:var(--space-3)}.di-rail{grid-template-rows:minmax(120px,236px) minmax(110px,1fr) minmax(200px,236px);grid-gap:var(--space-3);min-height:0}.di-panel{border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-surface-3) 90%,transparent);border:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;min-height:0}.di-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-2);flex-shrink:0}.di-panel-body{flex:1 1;min-height:0;overflow:auto;padding:0 var(--space-2) var(--space-2);display:flex;flex-direction:column;gap:3px}.di-hint{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-text-subtle);line-height:var(--leading-normal);padding:var(--space-2) var(--space-2) 0}.di-camera{border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-surface-3) 90%,transparent);border:1px solid var(--color-border);flex-direction:column;overflow:hidden}.di-camera,.di-camera-empty{padding:var(--space-3);display:flex;gap:var(--space-2);min-height:0}.di-camera-empty{flex:1 1;border-radius:var(--radius-md);border:1px dashed var(--color-border-strong);background:var(--color-surface-sunken);flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-subtle);text-align:center}@media (min-width:761px){.di-camera{min-height:calc(var(--panel-w) * 9 / 16)}}.di-stage{min-width:0;min-height:0;border-radius:var(--radius-xl);background:var(--color-surface-3);border:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;position:relative}.di-stage-head{height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0 var(--space-3);border-bottom:1px solid var(--color-border)}.di-scrim{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:var(--space-4);background:var(--scrim-solid)}.di-stage>.di-scrim{top:56px}.di-modal-scrim{position:fixed;inset:0;z-index:9;display:grid;place-items:center;padding:var(--space-4);background:var(--scrim-solid)}.di-sheet{width:100%;background:var(--color-surface-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);animation:di-pop var(--dur-base) var(--ease-bounce);max-height:calc(100dvh - var(--space-8));overflow:auto}.di-pressable{cursor:pointer;font-family:var(--font-body);text-align:left;transition:transform var(--dur-fast) var(--ease-bounce),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.di-pressable:hover:not(:disabled){border-color:var(--color-primary);transform:translateY(-2px)}.di-pressable:active:not(:disabled){transform:scale(.98)}.di-pressable:disabled{cursor:not-allowed;opacity:.5}.di-chip{height:38px;min-width:48px;padding:0 var(--space-3);border-radius:var(--radius-pill);font-family:var(--font-numeric);font-weight:var(--weight-semibold);font-size:var(--text-sm);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.di-chip:hover{border-color:var(--color-primary)}.di-chat-line{animation:di-msg var(--dur-fast) var(--ease-out);flex-shrink:0}@keyframes di-msg{0%{transform:translateX(-8px);opacity:0}to{transform:none;opacity:1}}@keyframes di-pulse{0%,to{opacity:1}50%{opacity:.35}}.di-live-dot{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--color-kick);animation:di-pulse 1.6s infinite}@media (max-width:760px){.di-game{grid-template-columns:minmax(0,1fr);height:auto;min-height:100dvh;overflow:visible}.di-game,.di-rail{grid-template-rows:auto}.di-rail{grid-auto-rows:auto}.di-stage{order:1;min-height:58vh}.di-rail{order:2}.di-rail .di-panel{max-height:40vh}.di-camera{order:-1}.di-hide-narrow{display:none!important}}@media (max-height:640px) and (min-width:761px){.di-rail{grid-template-rows:minmax(96px,150px) minmax(80px,1fr) minmax(170px,200px)}}.di-toast{position:fixed;left:50%;bottom:var(--space-4);transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:var(--space-3);max-width:min(560px,calc(100vw - var(--space-8)));padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--color-surface-3);border:1px solid var(--color-danger);box-shadow:var(--shadow-lg);color:var(--color-text);animation:di-rise var(--dur-base) var(--ease-out)}.di-mobile-note{display:none}@media (max-width:760px){.di-toast{bottom:calc(var(--space-3) + 68px);transform:none;max-width:none}.di-mobile-note,.di-toast{left:var(--space-3);right:var(--space-3)}.di-mobile-note{position:fixed;bottom:var(--space-3);z-index:11;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-surface-3);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-lg);color:var(--color-text-muted);animation:di-rise var(--dur-base) var(--ease-out)}}