.tr-shell.casual-shell{flex:1;width:100%;max-width:none;height:100%}.tr-shell .casual-stage{border:none;border-radius:0;flex-direction:column;height:100%;display:flex}.tr-shell .casual-stage-layout{flex:1;height:100%}.tr-shell .casual-stage-body{flex:1;height:100%;min-height:0}.board-tank-ricochet{--tr-accent:#38bdf8;--tr-ink:#1b1726;--tr-shadow:3px 3px 0 var(--tr-ink);--tr-cream:#fffdf8;-webkit-user-select:none;user-select:none;touch-action:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;max-width:none;height:100%;min-height:0;margin:0 auto;padding:0;display:flex;position:relative;overflow:hidden}.tr-canvas-container{height:min(var(--stage-w), var(--stage-h), 720px);width:min(var(--stage-w), var(--stage-h), 720px);aspect-ratio:1;border:3px solid var(--tr-ink);background-color:var(--tr-cream);max-width:100%;max-height:100%;box-shadow:var(--tr-shadow);touch-action:none;border-radius:14px;flex-shrink:0;margin:auto;position:relative;overflow:hidden}.tr-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.tr-hud-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:0 4px;display:flex}.tr-stat-pill{border:2px solid var(--tr-ink);box-shadow:2px 2px 0 var(--tr-ink);color:var(--tr-ink);white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:800;display:flex}.tr-stat-pill.danger{background:#fee2e2}.tr-stat-val{color:#0284c7;font-size:13px;font-weight:900}.tr-stat-pill.danger .tr-stat-val{color:#dc2626}.tr-btn-reset{border:2px solid var(--tr-ink);min-width:44px;min-height:44px;box-shadow:2px 2px 0 var(--tr-ink);cursor:pointer;white-space:nowrap;background:#fff;border-radius:999px;justify-content:center;align-items:center;gap:5px;padding:5px 12px;font-size:12px;font-weight:800;transition:transform 80ms,box-shadow 80ms;display:inline-flex;color:var(--tr-ink)!important}.tr-btn-reset:active{box-shadow:1px 1px 0 var(--tr-ink);transform:translate(1px,1px)}.tr-joystick{pointer-events:none;z-index:30;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-user-select:none;user-select:none;background:#1b172673;border:2.5px solid #38bdf8bf;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 16px #00000059}.tr-joystick-arrow{color:#fff6;-webkit-user-select:none;user-select:none;font-size:11px;font-weight:900;transition:color 80ms,transform 80ms;position:absolute}.tr-joystick-arrow.up{top:5px;left:50%;transform:translate(-50%)}.tr-joystick-arrow.down{bottom:5px;left:50%;transform:translate(-50%)}.tr-joystick-arrow.left{top:50%;left:5px;transform:translateY(-50%)}.tr-joystick-arrow.right{top:50%;right:5px;transform:translateY(-50%)}.tr-joystick-arrow.active{color:#38bdf8;text-shadow:0 0 8px #38bdf8;transform:translate(-50%)scale(1.35)}.tr-joystick-arrow.left.active,.tr-joystick-arrow.right.active{transform:translateY(-50%)scale(1.35)}.tr-joystick-knob{pointer-events:none;background:radial-gradient(circle at 35% 35%,#7dd3fc,#0284c7);border:2px solid #fff;border-radius:50%;width:44px;height:44px;transition:transform 40ms ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000080,inset 0 1px 2px #fffc}.tr-floating-fire{border:3px solid var(--tr-ink);width:66px;height:66px;box-shadow:3px 3px 0 var(--tr-ink);color:#fff;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;z-index:25;background:linear-gradient(135deg,#ef4444,#b91c1c);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition:transform 80ms,box-shadow 80ms;display:flex;position:absolute;bottom:14px;right:14px}.tr-floating-fire:active{box-shadow:1px 1px 0 var(--tr-ink);background:linear-gradient(135deg,#dc2626,#991b1b);transform:translate(2px,2px)}.tr-floating-fire .tr-fire-icon{font-size:20px;line-height:1}.tr-floating-fire .tr-fire-label{letter-spacing:.5px;font-size:10px;font-weight:900}.tr-touch-hint{color:#e2e8f0;pointer-events:none;z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1b1726a6;border:1.5px solid #38bdf873;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:800;animation:2s ease-in-out infinite tr-pulse;display:flex;position:absolute;bottom:14px;left:14px}@keyframes tr-pulse{0%,to{opacity:.85}50%{opacity:.45}}.tr-menu{width:100%;max-width:440px;margin-block:auto;margin-inline:auto}@media (pointer:fine){.tr-floating-fire,.tr-touch-hint,.tr-joystick{display:none!important}}@media (max-width:639px){.tr-hud-row{justify-content:center}}@media (orientation:landscape) and (max-height:520px){:is(.game-player-frame:has(.tr-shell),.game-player-frame:has(.board-tank-ricochet)){z-index:50!important;width:100vw!important;max-width:none!important;height:100dvh!important;box-shadow:none!important;border:none!important;border-radius:0!important;margin:0!important;position:fixed!important;inset:0!important}:is(.game-player-frame:has(.tr-shell)>header,.game-player-frame:has(.board-tank-ricochet)>header){padding-top:env(safe-area-inset-top,0px)!important;border-bottom-width:1.5px!important}:is(.game-player-frame:has(.tr-shell)>header>div,.game-player-frame:has(.board-tank-ricochet)>header>div){height:36px!important}.tr-shell .casual-band{display:none!important}.tr-shell .casual-stage-hud{padding:2px 8px!important}.tr-shell .casual-stage-content{gap:2px!important;padding:2px 8px!important}.board-tank-ricochet{flex-direction:row!important;justify-content:center!important;height:100%!important}.tr-canvas-container{aspect-ratio:1!important;width:auto!important;max-width:100%!important;height:calc(100cqh - 6px)!important;max-height:100%!important;margin:auto!important}.tr-hud-row{flex-wrap:nowrap!important;justify-content:center!important;gap:6px!important;padding:1px 4px!important}.tr-stat-pill{gap:4px!important;padding:2px 8px!important;font-size:11px!important}.tr-stat-val{font-size:12px!important}.tr-btn-reset{min-width:36px!important;min-height:36px!important;padding:2px 8px!important;font-size:11px!important}.tr-floating-fire{right:max(16px, env(safe-area-inset-right,16px))!important;z-index:40!important;width:72px!important;height:72px!important;position:fixed!important;bottom:20px!important}.tr-touch-hint{left:max(16px, env(safe-area-inset-left,16px))!important;z-index:40!important;position:fixed!important;bottom:20px!important}}
