{"TotalCount":79,"Files":[{"Ident":"playnplay.10_xplosion","Path":"Game/2D/Gameplay/MilestoneCatalog.cs","FileName":"MilestoneCatalog.cs","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"using System.Collections.Generic;\r\n\r\npublic class WaveMilestone\r\n{\r\n public int Wave { get; set; }\r\n public string Title { get; set; } // i.e : \u0022PRESSURE BEGINS GANG!\u0022\r\n public string Subtitle { get; set; } // i.e : \u0022Wave 25 reached\u0022\r\n public string Description { get; set; } // what actually changes\r\n public string Icon { get; set; } // emoji\r\n public string AccentColor { get; set; } // CSS color for the flash\r\n}\r\n\r\npublic static class MilestoneCatalog\r\n{\r\n public static readonly List\u003CWaveMilestone\u003E All = new()\r\n {\r\n new WaveMilestone {\r\n Wave = 25,\r\n Icon = \u0022\u23F1\uFE0F\u0022,\r\n Title = \u0022PRESSURE BEGINS\u0022,\r\n Subtitle = \u0022Wave 25\u0022,\r\n Description = \u0022The timer shrinks faster from now on buddy. Plan your placements carefully.\u0022,\r\n AccentColor = \u0022rgba(251,191,36,0.90)\u0022\r\n },\r\n new WaveMilestone {\r\n Wave = 50,\r\n Icon = \u0022\uD83D\uDCD0\u0022,\r\n Title = \u0022GRID EXPANDS\u0022,\r\n Subtitle = \u0022Wave 50\u0022,\r\n Description = \u0022The grid grows to 5\u00D76. More chests, more chains \u2014 more chaos incoming!\u0022,\r\n AccentColor = \u0022rgba(96,165,250,0.90)\u0022\r\n },\r\n new WaveMilestone {\r\n Wave = 75,\r\n Icon = \u0022\uD83D\uDD12\u0022,\r\n Title = \u0022IRON CHESTS APPEAR\u0022,\r\n Subtitle = \u0022Wave 75\u0022,\r\n Description = \u0022Locked chests require 3 hits to destroy \u2014 but reward triple score.\u0022,\r\n AccentColor = \u0022rgba(167,139,250,0.90)\u0022\r\n },\r\n new WaveMilestone {\r\n Wave = 100,\r\n Icon = \u0022\uD83D\uDC80\u0022,\r\n Title = \u0022NIGHTMARE BEGINS\u0022,\r\n Subtitle = \u0022Wave 100\u0022,\r\n Description = \u0022Cursed chests now appear. Destroying them costs you 2 timer seconds..\u0022,\r\n AccentColor = \u0022rgba(239,68,68,0.90)\u0022\r\n },\r\n new WaveMilestone {\r\n Wave = 150,\r\n Icon = \u0022\uD83D\uDCD0\u0022,\r\n Title = \u0022GRID EXPANDS\u0022,\r\n Subtitle = \u0022Wave 150\u0022,\r\n Description = \u0022The grid grows to 6\u00D76. The board is getting CROWDED man!\u0022,\r\n AccentColor = \u0022rgba(96,165,250,0.90)\u0022\r\n },\r\n new WaveMilestone {\r\n Wave = 200,\r\n Icon = \u0022\uD83C\uDF11\u0022,\r\n Title = \u0022VOID AWAKENS\u0022,\r\n Subtitle = \u0022Wave 200\u0022,\r\n Description = \u0022Void chests appear. Destroying one REMOVES all chests in a 2\u00D72 area around it.\u0022,\r\n AccentColor = \u0022rgba(88,28,135,0.90)\u0022\r\n },\r\n new WaveMilestone {\r\n Wave = 300,\r\n Icon = \u0022\uD83D\uDC80\u0022,\r\n Title = \u0022NIGHTMARE MODE\u0022,\r\n Subtitle = \u0022Wave 300\u0022,\r\n Description = \u0022Timer floor drops to 3 seconds. Only the best survive from here..!\u0022,\r\n AccentColor = \u0022rgba(239,68,68,0.90)\u0022\r\n },\r\n new WaveMilestone {\r\n Wave = 500,\r\n Icon = \u0022\uD83C\uDF1F\u0022,\r\n Title = \u0022YOU ARE THE STORM\u0022,\r\n Subtitle = \u0022Wave 500\u0022,\r\n Description = \u0022You\u0027ve reached the legend tier. That\u0027s where History is made. \u2014 How far can you go?\u0022,\r\n AccentColor = \u0022rgba(251,191,36,0.90)\u0022\r\n },\r\n };\r\n\r\n public static WaveMilestone GetForWave(int wave) =\u003E\r\n All.Find(m =\u003E m.Wave == wave);\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"Game/2D/UI/SurvivalTutorial.razor","FileName":"SurvivalTutorial.razor","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"@using System;\r\n@using Sandbox;\r\n@using Sandbox.UI;\r\n@inherits PanelComponent\r\n@namespace Sandbox\r\n\r\n\u003Croot\u003E\r\n @if(_active)\r\n {\r\n \u003Cdiv class=\u0022survival-tut-bg\u0022\u003E\u003C/div\u003E\r\n \u003Cdiv class=\u0022survival-tut-card\u0022\u003E\r\n\r\n \u003Cdiv class=\u0022tut-step-count\u0022\u003E@(_step \u002B 1) / @_steps.Length\u003C/div\u003E\r\n \u003Cdiv class=\u0022survival-tut-title\u0022\u003E@_steps[_step].Title\u003C/div\u003E\r\n \u003Cdiv class=\u0022survival-tut-text\u0022\u003E@_steps[_step].Text\u003C/div\u003E\r\n\r\n @if(_steps[_step].ShowGridDemo)\r\n {\r\n \u003Cdiv class=\u0022survival-demo-grid\u0022\u003E\r\n ...\r\n \u003C/div\u003E\r\n \u003Cdiv class=\u0022survival-demo-caption\u0022\u003E@_demoCaption\u003C/div\u003E\r\n }\r\n\r\n \u003Cbutton class=\u0022survival-tut-close\u0022 onclick=@NextStep\u003E\r\n @(_step == _steps.Length - 1 ? \u0022\u25B6 Let\u0027s Survive!\u0022 : \u0022Got it \u2192\u0022)\r\n \u003C/button\u003E\r\n \u003C/div\u003E\r\n }\r\n\u003C/root\u003E\r\n\r\n@code {\r\n public static SurvivalTutorial Instance { get; private set; }\r\n public bool IsActive =\u003E _active;\r\n\r\n bool _active = false;\r\n int _step = 0;\r\n\r\n struct SurvivalTutStep\r\n {\r\n public string Title;\r\n public string Text;\r\n public bool ShowGridDemo;\r\n }\r\n\r\n static readonly SurvivalTutStep[] _steps = new SurvivalTutStep[]\r\n {\r\n new SurvivalTutStep {\r\n Title = \u0022Welcome to Survival! \u26A1\u0022,\r\n Text = \u0022No waves here \u2014 chests spawn continuously and slide downward. Your goal: last as long as possible.\u0022,\r\n ShowGridDemo = false\r\n },\r\n new SurvivalTutStep {\r\n Title = \u0022It Gets Faster... \uD83D\uDD25\u0022,\r\n Text = \u0022Chests spawn every couple seconds at first. After about a minute, spawn rate speeds up and more chests appear at once. Stay sharp \u2014 it never really stops.\u0022,\r\n ShowGridDemo = false\r\n },\r\n new SurvivalTutStep {\r\n Title = \u0022Block the Slide! \uD83D\uDEE1\uFE0F\u0022,\r\n Text = \u0022Here\u0027s the key trick: a placed bomb blocks a chest from sliding into its column. Use this to buy time and set up bigger chain reactions before detonating.\u0022,\r\n ShowGridDemo = true\r\n },\r\n new SurvivalTutStep {\r\n Title = \u0022Survive as Long as You Can \uD83D\uDC80\u0022,\r\n Text = \u0022One chest reaching the bottom row ends your run. Place smart, chain big, and see how long you can hold on!\u0022,\r\n ShowGridDemo = false\r\n },\r\n };\r\n\r\n // \u2500\u2500 Mini grid demo animation state \u2500\u2500\r\n float _demoTimer = 0f;\r\n int _demoPhase = 0; // 0=chest falling, 1=bomb placed blocks it, 2=hold\r\n string _demoCaption = \u0022A chest is about to slide down...\u0022;\r\n\r\n protected override void OnStart()\r\n {\r\n Instance = this;\r\n _active = false;\r\n }\r\n\r\n public void Activate()\r\n {\r\n _step = 0;\r\n _active = true;\r\n _demoPhase = 0;\r\n _demoTimer = 0f;\r\n StateHasChanged();\r\n }\r\n\r\n protected override void OnUpdate()\r\n {\r\n if (!_active || !_steps[_step].ShowGridDemo) return;\r\n\r\n _demoTimer \u002B= Time.Delta;\r\n\r\n // Simple 3-phase loop: chest falls (0-1.2s) -\u003E bomb blocks it (1.2-2.4s) -\u003E hold (2.4-3.6s) -\u003E reset\r\n if (_demoTimer \u003C 1.2f)\r\n {\r\n _demoPhase = 0;\r\n _demoCaption = \u0022A chest slides down each cycle...\u0022;\r\n }\r\n else if (_demoTimer \u003C 2.4f)\r\n {\r\n _demoPhase = 1;\r\n _demoCaption = \u0022...but a placed bomb blocks it from moving further!\u0022;\r\n }\r\n else if (_demoTimer \u003C 3.6f)\r\n {\r\n _demoPhase = 2;\r\n _demoCaption = \u0022Now you have time to plan your chain reaction.\u0022;\r\n }\r\n else\r\n {\r\n _demoTimer = 0f;\r\n }\r\n StateHasChanged();\r\n }\r\n\r\n // Simple fixed layout: chest at (0,1) falling toward bomb at (2,1)\r\n string GetDemoCellClass(int r, int c)\r\n {\r\n if (c != 1) return \u0022empty\u0022;\r\n\r\n if (_demoPhase == 0)\r\n {\r\n // chest animates from row 0 toward row 1\r\n if (r == 0) return \u0022chest\u0022;\r\n if (r == 2) return \u0022bomb\u0022;\r\n return \u0022empty\u0022;\r\n }\r\n else\r\n {\r\n // blocked \u2014 chest sits right above the bomb, doesn\u0027t pass\r\n if (r == 1) return \u0022chest\u0022;\r\n if (r == 2) return \u0022bomb\u0022;\r\n return \u0022empty\u0022;\r\n }\r\n }\r\n\r\n string GetDemoCellIcon(int r, int c)\r\n {\r\n var cls = GetDemoCellClass(r, c);\r\n return cls switch {\r\n \u0022chest\u0022 =\u003E \u0022\uD83C\uDF81\u0022,\r\n \u0022bomb\u0022 =\u003E \u0022\uD83D\uDCA3\u0022,\r\n _ =\u003E \u0022\u0022\r\n };\r\n }\r\n\r\n void NextStep()\r\n {\r\n _step\u002B\u002B;\r\n Sound.Play(\u0022UI_Button\u0022);\r\n\r\n if (_step \u003E= _steps.Length)\r\n\t\t{\r\n\t\t\t_active = false;\r\n\t\t\tChainReactionGame.Instance?.UnfreezeSurvivalSpawn(); // new public method\r\n\t\t\tStateHasChanged();\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n _demoTimer = 0f;\r\n _demoPhase = 0;\r\n StateHasChanged();\r\n }\r\n\r\n protected override int BuildHash() =\u003E\r\n System.HashCode.Combine(_active, _step, _demoPhase);\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"Game/Shop/ShopCatalog.cs","FileName":"ShopCatalog.cs","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"using System.Collections.Generic;\r\n\r\npublic class ShopConsumable\r\n{\r\n public string Id { get; set; }\r\n public string Name { get; set; }\r\n public string Icon { get; set; }\r\n public int Cost { get; set; }\r\n public int Lives { get; set; }\r\n public int StartWave { get; set; }\r\n}\r\n\r\npublic static class ShopCatalog\r\n{\r\n /* Catalog List - Season 1 */\r\n public static readonly List\u003CShopModifier\u003E All = new()\r\n {\r\n // \u2500\u2500 Bomb Slots \u2014 unlock progressively, cheap-to-expensive \u2500\u2500\r\n new ShopModifier {\r\n Id = ModifierId.BombSlot2,\r\n Name = \u0022Twin Loader\u0022,\r\n Description = \u0022Start each wave with 2 bombs instead of 1.\u0022,\r\n Icon = \u0022\uD83D\uDCA3\u0022,\r\n Cost = 100,\r\n Rarity = ModifierRarity.Common,\r\n },\r\n new ShopModifier {\r\n Id = ModifierId.BombSlot3,\r\n Name = \u0022Triple Loader\u0022,\r\n Description = \u0022Start each wave with 3 bombs. Requires Twin Loader.\u0022,\r\n Icon = \u0022\uD83D\uDCA3\uD83D\uDCA3\u0022,\r\n Cost = 500,\r\n Rarity = ModifierRarity.Rare,\r\n },\r\n new ShopModifier {\r\n Id = ModifierId.BombSlot4,\r\n Name = \u0022Quad Payload\u0022,\r\n Description = \u0022Start each wave with 4 bombs \u2014 maximum loadout.\u0022,\r\n Icon = \u0022\uD83D\uDCA3\uD83D\uDCA3\uD83D\uDCA3\u0022,\r\n Cost = 3000,\r\n Rarity = ModifierRarity.Epic,\r\n },\r\n\r\n // \u2500\u2500 Common tier \u2014 basic upgrades \u2500\u2500\r\n new ShopModifier {\r\n Id = ModifierId.TimerBonus,\r\n Name = \u0022Slow Fuse\u0022,\r\n Description = \u0022Extra \u002B5 seconds on wave 1 to plan your opening.\u0022,\r\n Icon = \u0022\u23F1\uFE0F\u0022,\r\n Cost = 500,\r\n Rarity = ModifierRarity.Common,\r\n },\r\n new ShopModifier {\r\n Id = ModifierId.SniperRange,\r\n Name = \u0022Long Shot\u0022,\r\n Description = \u0022Sniper bombs gain \u002B1 range in their direction.\u0022,\r\n Icon = \u0022\uD83C\uDFAF\u0022,\r\n Cost = 800,\r\n Rarity = ModifierRarity.Common,\r\n },\r\n new ShopModifier {\r\n Id = ModifierId.GemsOneHit,\r\n Name = \u0022Gem Cutter\u0022,\r\n Description = \u0022Gem chests break in 1 hit instead of 2.\u0022,\r\n Icon = \u0022\uD83D\uDC8E\u0022,\r\n Cost = 1000,\r\n Rarity = ModifierRarity.Common,\r\n },\r\n new ShopModifier {\r\n Id = ModifierId.FirstChainDouble,\r\n Name = \u0022Overcharged\u0022,\r\n Description = \u0022First chain reaction of each wave gives 2\u00D7 score.\u0022,\r\n Icon = \u0022\u26A1\u0022,\r\n Cost = 1500,\r\n Rarity = ModifierRarity.Common,\r\n },\r\n\r\n // \u2500\u2500 Rare tier \u2014 meaningful changes \u2500\u2500\r\n new ShopModifier {\r\n Id = ModifierId.BombChestsNearChest,\r\n Name = \u0022Magnetized\u0022,\r\n Description = \u0022Bomb chests spawn next to other chests for easier chains.\u0022,\r\n Icon = \u0022\uD83E\uDDF2\u0022,\r\n Cost = 2500,\r\n Rarity = ModifierRarity.Rare,\r\n },\r\n new ShopModifier {\r\n Id = ModifierId.CrossRangeAfterWave5,\r\n Name = \u0022Cross Master\u0022,\r\n Description = \u0022Cross bombs gain \u002B1 range from wave 5 onwards.\u0022,\r\n Icon = \u0022\u271B\u0022,\r\n Cost = 3000,\r\n Rarity = ModifierRarity.Rare,\r\n },\r\n new ShopModifier {\r\n Id = ModifierId.GemScoreBonus,\r\n Name = \u0022Gem Polish\u0022,\r\n Description = \u0022Destroying gem chests gives 2\u00D7 score from that hit.\u0022,\r\n Icon = \u0022\u2728\u0022,\r\n Cost = 3500,\r\n Rarity = ModifierRarity.Rare,\r\n },\r\n };\r\n\r\n /* Consumables \u2014 per-run items (not yet wired into shop UI) */\r\n public static readonly List\u003CShopConsumable\u003E Consumables = new()\r\n {\r\n new ShopConsumable { Id = \u0022extra_life_1\u0022, Name = \u0022Extra Life\u0022, Icon = \u0022\u2764\uFE0F\u0022, Cost = 40, Lives = 1 },\r\n new ShopConsumable { Id = \u0022extra_life_3\u0022, Name = \u0022Life Pack\u0022, Icon = \u0022\uD83D\uDC96\u0022, Cost = 100, Lives = 3 },\r\n new ShopConsumable { Id = \u0022head_start\u0022, Name = \u0022Head Start\u0022, Icon = \u0022\u26A1\u0022, Cost = 60, StartWave = 3 },\r\n };\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"ui/controls/switchcontrol.razor.scss","FileName":"switchcontrol.razor.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"\r\n.switchcontrol\r\n{\r\n flex-direction: row;\r\n width: 100px;\r\n min-height: 24px;\r\n align-items: center;\r\n cursor: pointer;\r\n\r\n .switch-frame\r\n {\r\n flex-grow: 0;\r\n flex-shrink: 1;\r\n width: 48px;\r\n height: 16px;\r\n background-color: #fff1;\r\n margin: 0px 5px;\r\n align-items: center;\r\n border-radius: 100px;\r\n transition: all 0.4s linear;\r\n\r\n .switch-inner\r\n {\r\n position: relative;\r\n flex-grow: 0;\r\n flex-shrink: 1;\r\n background-color: #999;\r\n width: 25px;\r\n height: 25px;\r\n border-radius: 100px;\r\n left: 20%;\r\n transform: translateX( -50% );\r\n transition: all 0.3s ease-out;\r\n }\r\n }\r\n\r\n \u0026.active\r\n {\r\n .switch-frame\r\n {\r\n background-color: #fffa;\r\n }\r\n\r\n .switch-inner\r\n {\r\n left: 80%;\r\n background-color: #fff;\r\n }\r\n }\r\n}\r\n"},{"Ident":"playnplay.10_xplosion","Path":"ui/button.cs.scss","FileName":"button.cs.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":".button\r\n{\r\n\tposition: relative;\r\n\t\r\n\t\u003E .button-right-column\r\n\t{\r\n\t\tflex-direction: column;\r\n\t}\r\n}\r\n\r\n// default menu position is below\r\n.button-hover-menu\r\n{\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tflex-direction: column;\r\n\r\n\t\u0026.hidden\r\n\t{\r\n\t\topacity: 0;\r\n\t\tpointer-events: none;\r\n\t}\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"styles/form/_colorproperty.scss","FileName":"_colorproperty.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"\r\n\r\n.colorproperty\r\n{\r\n\talign-items: center;\r\n\tposition: relative;\r\n\r\n\t.colorsquare\r\n\t{\r\n\t\twidth: 20px;\r\n\t\theight: 20px;\r\n\t\tborder-radius: 4px;\r\n\t\tmargin-right: 8px;\r\n\t\tposition: absolute;\r\n\t\tleft: 7px;\r\n\t\tz-index: 1;\r\n\t\tcursor: pointer;\r\n\t}\r\n\r\n\t\u003E .textentry:not( .a.b.c )\r\n\t{\r\n\t\tpadding-left: 36px;\r\n\t}\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"ui/controlsheet/controlsheet.cs.scss","FileName":"controlsheet.cs.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"ControlSheet\r\n{\r\n\tflex-direction: column;\r\n\tfont-family: Poppins;\r\n\tfont-size: 14px;\r\n}\r\n\r\nControlSheet \u003E .body\r\n{\r\n\tflex-direction: column;\r\n\tflex-grow: 1;\r\n\toverflow: scroll;\r\n\tgap: 1px;\r\n}\r\n\r\nControlSheet \u003E .body \u003E * \r\n{\r\n\tflex-shrink: 0;\r\n}\r\n"},{"Ident":"playnplay.10_xplosion","Path":"styles/rootpanel.scss","FileName":"rootpanel.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"\r\n\r\nRootPanel\r\n{\r\n\tfont-family: Roboto;\r\n\tcolor: white;\r\n}\r\n\r\nIconPanel, i\r\n{\r\n\tfont-family: Material Icons;\r\n\tbackground-position: center;\r\n\tbackground-size: contain;\r\n}\r\n\r\n.tooltip\r\n{\r\n\tbackground-color: rgba( black, 0.8 );\r\n\tborder: 1px solid rgba( #555, 0.1 );\r\n\tpadding: 10px;\r\n\tborder-radius: 4px;\r\n\tcolor: white;\r\n\tfont-family: Inter;\r\n\tfont-weight: bold;\r\n\ttransition: opacity 0.09s ease;\r\n\topacity: 1;\r\n\tmargin: 0px;\r\n\r\n\t\u0026:intro, \u0026:outro\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n.textentry\r\n{\r\n\tcursor: text;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\twhite-space: nowrap;\r\n\toverflow: hidden;\r\n\tflex-direction: row;\r\n\tposition: relative;\r\n\tpadding: 10px;\r\n\r\n\t\u0026.disabled\r\n\t{\r\n\t\tcursor: default;\r\n\t}\r\n\r\n\t\u0026.is-multiline\r\n\t{\r\n\t\talign-items: flex-start;\r\n\t\twhite-space: normal;\r\n\t}\r\n\r\n\t.content-label,\r\n\t.placeholder\r\n\t{\r\n\t\tflex-grow: 1;\r\n\t}\r\n\r\n\t.placeholder\r\n\t{\r\n\t\topacity: 0.2;\r\n\t\tpointer-events: none;\r\n\t}\r\n\r\n\t.iconpanel\r\n\t{\r\n\t\tposition: absolute;\r\n\t\tright: 0;\r\n\t\tpadding-right: 10px;\r\n\t\tpointer-events: none;\r\n\r\n\t\t\u0026.clearbutton\r\n\t\t{\r\n\t\t\tcolor: #fff;\r\n\t\t\tpointer-events: all;\r\n\t\t\tcursor: pointer;\r\n\t\t\topacity: 0.1;\r\n\r\n\t\t\t\u0026:hover\r\n\t\t\t{\r\n\t\t\t\topacity: 0.5;\r\n\t\t\t}\r\n\r\n\t\t\t\u0026:active\r\n\t\t\t{\r\n\t\t\t\topacity: 1;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t\u0026:empty\r\n\t{\r\n\t\t.clearbutton\r\n\t\t{\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t\u0026.has-icon\r\n\t{\r\n\t\tpadding-right: 30px;\r\n\t}\r\n\r\n\t.content-label,\r\n\t.prefix-label,\r\n\t.suffix-label,\r\n\t.placeholder\r\n\t{\r\n\t\toverflow: hidden;\r\n\t}\r\n\r\n\t.content-label\r\n\t{\r\n\t\torder: 1;\r\n\t}\r\n\r\n\t.suffix-label\r\n\t{\r\n\t\torder: 2;\r\n\t}\r\n\r\n\t.prefix-label,\r\n\t.suffix-label\r\n\t{\r\n\t\tflex-shrink: 0;\r\n\t\topacity: 0.5;\r\n\t}\r\n\r\n\t\u0026.invalid\r\n\t{\r\n\t\tbox-shadow: 0px 0px 1px 2px #f8356b;\r\n\t}\r\n}\r\n\r\n.popup-panel\r\n{\r\n\tbackground-color: #1b202c;\r\n\tflex-direction: column;\r\n\tcolor: #8e9ec2;\r\n\ttransition: all 0.1s ease-out;\r\n\tposition: absolute;\r\n\tz-index: 2000;\r\n\tmin-height: 20px;\r\n\tmin-width: 10px;\r\n\toverflow: scroll;\r\n\tpointer-events: all;\r\n\tbox-shadow: 3px 3px 64px #000;\r\n\tborder-radius: 4px;\r\n\r\n\t\u0026.medium\r\n\t{\r\n\t\tmax-width: 300px;\r\n\t}\r\n\r\n\t\u0026.center-horizontal\r\n\t{\r\n\t\ttransform-origin: top center;\r\n\t}\r\n\r\n\t\u0026.below-center\r\n\t{\r\n\t\ttransform: translateX( -50% );\r\n\t\ttransform-origin: 0% 0%;\r\n\t}\r\n\r\n\t\u0026.above-left\r\n\t{\r\n\t\ttransform-origin: 0% 100%;\r\n\t}\r\n\r\n\t\u0026.above-center\r\n\t{\r\n\t\ttransform: translateX( -50% );\r\n\t\ttransform-origin: 0% 100%;\r\n\t}\r\n\r\n\t\u0026.left\r\n\t{\r\n\t\ttransform-origin: 100% 50%;\r\n\t\ttransform: translate( 00% -50% );\r\n\t}\r\n\r\n\t\u0026.right\r\n\t{\r\n\t\ttransform-origin: 0 50%;\r\n\t\ttransform: translate( 0% -50% );\r\n\t}\r\n\r\n\t\u0026:intro\r\n\t{\r\n\t\ttransform: scale( 0 );\r\n\t\tpointer-events: none;\r\n\t\topacity: 0;\r\n\t}\r\n\r\n\t\u0026:outro\r\n\t{\r\n\t\topacity: 0;\r\n\t\ttransition: all 0.1s ease-in;\r\n\t\tmargin-top: 50px;\r\n\t\tpointer-events: none;\r\n\t}\r\n\r\n\t\u0026.below-stretch\r\n\t{\r\n\t\ttransform-origin: 0% 0%;\r\n\r\n\t\t\u0026:intro\r\n\t\t{\r\n\t\t\ttransform: scaleY( 0.1 );\r\n\t\t}\r\n\t}\r\n\r\n\t\u003E .canvas\r\n\t{\r\n\t\tflex-direction: column;\r\n\t}\r\n\r\n\t.information\r\n\t{\r\n\t\tpadding: 16px;\r\n\t\tfont-size: 14px;\r\n\t\topacity: 0.5;\r\n\t}\r\n\r\n\tbutton\r\n\t{\r\n\t\tpadding: 2px 8px;\r\n\t\tcursor: pointer;\r\n\t\tfont-family: Poppins;\r\n\t\tfont-weight: 600;\r\n\t\tflex-shrink: 0;\r\n\r\n\t\t\u0026:hover\r\n\t\t{\r\n\t\t\tbackground-color: #08f;\r\n\t\t\tcolor: #fff;\r\n\t\t}\r\n\t}\r\n}\r\n"},{"Ident":"playnplay.10_xplosion","Path":"game/2d/ui/popuplayer.razor.scss","FileName":"popuplayer.razor.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"root {\r\n position: absolute;\r\n pointer-events: none;\r\n width: 0;\r\n height: 0;\r\n overflow: visible;\r\n}\r\n\r\n"},{"Ident":"playnplay.10_xplosion","Path":"game/2d/gameplay/hypemeter.razor.scss","FileName":"hypemeter.razor.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"root {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n pointer-events: none;\r\n z-index: 20;\r\n}\r\n\r\n.hype-wrap {\r\n position: absolute;\r\n top: 160px;\r\n bottom: 55px;\r\n right: 1650px;\r\n width: 12px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n\r\n.hype-track {\r\n flex: 1;\r\n width: 20px;\r\n background-color: rgba(255,255,255,0.06);\r\n border-radius: 4px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.hype-fill {\r\n width: 100%;\r\n border-radius: 4px;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n\r\n.hype-fill-empty { background-color: rgba(167,139,250,0.40); }\r\n.hype-fill-low { background-color: rgba(96,165,250,0.70); }\r\n.hype-fill-mid { background-color: rgba(52,211,153,0.80); }\r\n\r\n.hype-fill-high {\r\n background-color: rgba(251,191,36,0.90);\r\n animation: hype-high-pulse 0.4s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes hype-high-pulse {\r\n 0% { background-color: rgba(251,191,36,0.70); }\r\n 100% { background-color: rgba(251,191,36,1.00); }\r\n}\r\n\r\n.hype-fill-max {\r\n background-color: rgba(239,68,68,0.90);\r\n animation: hype-max-pulse 0.25s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes hype-max-pulse {\r\n 0% { background-color: rgba(239,68,68,0.80); }\r\n 100% { background-color: rgba(251,191,36,1.00); }\r\n}\r\n\r\n.hype-bubble {\r\n position: absolute;\r\n left: 1px;\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background-color: rgba(255,255,255,0.30);\r\n animation-name: bubble-rise;\r\n animation-timing-function: ease-in;\r\n animation-iteration-count: infinite;\r\n}\r\n\r\n@keyframes bubble-rise {\r\n 0% { transform: translateY(0px); opacity: 0; }\r\n 20% { opacity: 1; }\r\n 100% { transform: translateY(-40px); opacity: 0; }\r\n}\r\n\r\n.hype-mult-label {\r\n position: absolute;\r\n top: -14px;\r\n left: -10px;\r\n font-size: 10px;\r\n font-weight: 900;\r\n color: rgba(255,255,255,0.80);\r\n pointer-events: none;\r\n}\r\n\r\n/* SCREEN SHAKE */\r\n.hype-wrap.shake-small { animation: shake-small 0.25s ease-out; }\r\n.hype-wrap.shake-medium { animation: shake-medium 0.35s ease-out; }\r\n.hype-wrap.shake-strong { animation: shake-strong 0.45s ease-out; }\r\n.hype-wrap.shake-insane { animation: shake-insane 0.55s ease-out; }\r\n\r\n@keyframes shake-small {\r\n 0%,100% { transform: translate(0,0); }\r\n 25% { transform: translate(-2px, 1px); }\r\n 50% { transform: translate(2px, -1px); }\r\n 75% { transform: translate(-1px, 2px); }\r\n}\r\n@keyframes shake-medium {\r\n 0%,100% { transform: translate(0,0); }\r\n 20% { transform: translate(-4px, 2px) rotate(-0.3deg); }\r\n 40% { transform: translate(4px,-3px) rotate(0.3deg); }\r\n 60% { transform: translate(-3px, 3px) rotate(-0.2deg); }\r\n 80% { transform: translate(3px,-2px) rotate(0.2deg); }\r\n}\r\n@keyframes shake-strong {\r\n 0%,100% { transform: translate(0,0); }\r\n 15% { transform: translate(-6px, 3px) rotate(-0.5deg); }\r\n 30% { transform: translate(6px,-4px) rotate(0.5deg); }\r\n 45% { transform: translate(-5px, 5px) rotate(-0.4deg); }\r\n 60% { transform: translate(5px,-4px) rotate(0.4deg); }\r\n 75% { transform: translate(-3px, 2px); }\r\n 90% { transform: translate(2px,-2px); }\r\n}\r\n@keyframes shake-insane {\r\n 0%,100% { transform: translate(0,0); }\r\n 10% { transform: translate(-9px, 5px) rotate(-0.7deg); }\r\n 20% { transform: translate(9px,-6px) rotate(0.7deg); }\r\n 30% { transform: translate(-8px, 7px) rotate(-0.6deg); }\r\n 40% { transform: translate(8px,-6px) rotate(0.6deg); }\r\n 50% { transform: translate(-6px, 5px) rotate(-0.4deg); }\r\n 60% { transform: translate(6px,-5px) rotate(0.4deg); }\r\n 70% { transform: translate(-4px, 3px); }\r\n 80% { transform: translate(3px,-3px); }\r\n 90% { transform: translate(-1px, 1px); }\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"game/menu/mainmenu.razor.scss","FileName":"mainmenu.razor.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"/* \u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\nroot {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n overflow: hidden;\r\n}\r\n\r\n/* \u2500\u2500 Background base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-bg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: #04010d;\r\n pointer-events: none;\r\n overflow: visible;\r\n z-index: 0; \r\n}\r\n\r\n/* \u2500\u2500 Grid animated background container \u2500\u2500 */\r\n/* \u2500\u2500 Grid container \u2500\u2500 */\r\n/* \u2500\u2500 Grid container \u2500\u2500 */\r\n@keyframes mm-grid-breathe {\r\n 0% { transform: scale(1.0); }\r\n 50% { transform: scale(1.12); }\r\n 100% { transform: scale(1.0); }\r\n}\r\n\r\n.mm-grid-bg {\r\n position: absolute;\r\n left: -100px;\r\n top: -100px;\r\n width: 2400px;\r\n height: 1400px;\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 5px;\r\n padding: 5px;\r\n transform-origin: center center;\r\n animation: mm-grid-breathe 20s infinite;\r\n}\r\n\r\n/* \u2500\u2500 Base cell \u2500\u2500 */\r\n.mm-gc {\r\n width: 160px;\r\n height: 160px;\r\n border-radius: 6px;\r\n background-color: #0f0c1c;\r\n border: 2px solid #17122a;\r\n box-shadow: inset 2px 2px 0px #1a1530, inset -1px -1px 0px #07050e;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* \u2500\u2500 Edge vignette \u2014 replaces mm-overlay \u2500\u2500 */\r\n.mm-grid-fade {\r\n position: absolute;\r\n inset: 0px;\r\n pointer-events: none;\r\n background-color: transparent;\r\n border-width: 120px;\r\n border-color: #08060f;\r\n box-shadow: inset 0px 0px 120px 60px #08060f;\r\n}\r\n\r\n/* \u2500\u2500 Keyframes \u2014 one per type \u2500\u2500 */\r\n@keyframes mm-gc-breathe {\r\n 0% { background-color: #0f0c1c; border-color: #17122a; }\r\n 50% { background-color: #131020; border-color: #1c1732; }\r\n 100% { background-color: #0f0c1c; border-color: #17122a; }\r\n}\r\n\r\n@keyframes mm-gc-purp {\r\n 0% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }\r\n 45% { background-color: #1c0a38; border-color: #7035d5; box-shadow: inset 1px 1px 0px #32126a, inset -1px -1px 0px #0a0420; }\r\n 55% { background-color: #1c0a38; border-color: #7035d5; box-shadow: inset 1px 1px 0px #32126a, inset -1px -1px 0px #0a0420; }\r\n 100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }\r\n}\r\n\r\n@keyframes mm-gc-gold {\r\n 0% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }\r\n 45% { background-color: #251000; border-color: #c87215; box-shadow: inset 1px 1px 0px #4a2200, inset -1px -1px 0px #0d0600; }\r\n 55% { background-color: #251000; border-color: #c87215; box-shadow: inset 1px 1px 0px #4a2200, inset -1px -1px 0px #0d0600; }\r\n 100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }\r\n}\r\n\r\n@keyframes mm-gc-red {\r\n 0% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }\r\n 45% { background-color: #220508; border-color: #b82525; box-shadow: inset 1px 1px 0px #451010, inset -1px -1px 0px #0c0304; }\r\n 55% { background-color: #220508; border-color: #b82525; box-shadow: inset 1px 1px 0px #451010, inset -1px -1px 0px #0c0304; }\r\n 100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }\r\n}\r\n\r\n@keyframes mm-gc-chain {\r\n 0% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }\r\n 45% { background-color: #08141e; border-color: #155590; box-shadow: inset 1px 1px 0px #0e2538; }\r\n 55% { background-color: #08141e; border-color: #155590; box-shadow: inset 1px 1px 0px #0e2538; }\r\n 100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530, inset -1px -1px 0px #07050e; }\r\n}\r\n\r\n@keyframes mm-gc-expl {\r\n 0% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }\r\n 78% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }\r\n 80% { background-color: #ff9030; border-color: #ffe060; box-shadow: inset 1px 1px 0px #ffee90; }\r\n 83% { background-color: #ff5c10; border-color: #ff8020; }\r\n 87% { background-color: #c03000; border-color: #ff5010; }\r\n 93% { background-color: #2c1000; border-color: #8a2c08; }\r\n 100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }\r\n}\r\n\r\n@keyframes mm-gc-expl2 {\r\n 0% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }\r\n 60% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }\r\n 62% { background-color: #ff9030; border-color: #ffe060; box-shadow: inset 1px 1px 0px #ffee90; }\r\n 65% { background-color: #ff5c10; border-color: #ff8020; }\r\n 69% { background-color: #c03000; border-color: #ff5010; }\r\n 75% { background-color: #2c1000; border-color: #8a2c08; }\r\n 100% { background-color: #0f0c1c; border-color: #17122a; box-shadow: inset 1px 1px 0px #1a1530; }\r\n}\r\n\r\n/* \u2500\u2500 Animation bindings \u2014 one per class, no stacking \u2500\u2500 */\r\n.mm-gc-idle { animation: mm-gc-breathe 4s infinite; }\r\n.mm-gc-purp { animation: mm-gc-purp 4.5s infinite; }\r\n.mm-gc-gold { animation: mm-gc-gold 5s infinite; }\r\n.mm-gc-red { animation: mm-gc-red 4.2s infinite; }\r\n.mm-gc-chain { animation: mm-gc-chain 3.2s infinite; }\r\n.mm-gc-expl { animation: mm-gc-expl 7s infinite; }\r\n.mm-gc-expl2 { animation: mm-gc-expl2 9s infinite; }\r\n\r\n/* \u2500\u2500 Vignette \u2014 keep your existing mm-overlay, or add this \u2500\u2500 */\r\n.mm-grid-bg-vignette {\r\n position: absolute;\r\n inset: 0px;\r\n background-color: transparent;\r\n pointer-events: none;\r\n box-shadow: inset 0px 0px 160px 100px #0a0812;\r\n}\r\n\r\n/* ---------------------------------------------------------------------- */\r\n\r\n/* \u2500\u2500 Background grid preview \u2014 animated 5x5 game simulation \u2500\u2500\u2500 */\r\n.mm-grid-preview {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n opacity: 0.13;\r\n pointer-events: none;\r\n\topacity: 0.13;\r\n transition: opacity 0.6s ease;\r\n}\r\n\r\n// light up grid when auto farm is active\r\n.mm-grid-preview.active {\r\n opacity: 0.35;\r\n}\r\n\r\n/* Grid row \u2014 one horizontal line of cells */\r\n\r\n.mm-prev-row {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 8px; /* was 12px */ /* horizontal gap between cells \u2014 increase this */\r\n}\r\n\r\n\r\n/* \u2500\u2500 Grid block \u2014 wraps header \u002B grid preview as one unit \u2500\u2500 */\r\n.mm-farm-panel {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center; /* centers children (grid, headers) horizontally within the panel */\r\n justify-content: center; /* centers children vertically */\r\n gap: 16px;\r\n width: 100%; /* fill mm-center horizontally */\r\n}\r\n\r\n.mm-card-farm\r\n{\r\n margin-top: 0px; /* moves it up */\r\n margin-right: 50px;\r\n}\r\n\r\n.mm-center-enter {\r\n animation: center-enter 0.35s cubic-bezier(0.22,1,0.36,1) both;\r\n}\r\n\r\n/* Cards surrounding our _tabs content*/\r\n.mm-content-card {\r\n color: rgba(255,255,255,0.80);\r\n position: relative;\r\n right: 90px;\r\n background-color: rgba(8, 3, 22, 0.92);\r\n border: 2px solid rgba(120,80,220,0.30);\r\n border-radius: 14px;\r\n box-shadow: 6px 6px 0px rgba(0,0,0,0.65), inset 0px 1px 0px rgba(255,255,255,0.04);\r\n padding: 32px 36px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n width: 860px;\r\n max-height: 720px;\r\n overflow-y: auto;\r\n box-sizing: border-box;\r\n}\r\n\r\n.mm-hof-card {\r\n width: 280px;\r\n}\r\n.mm-hof-card .mm-sp-val {\r\n max-width: 130px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n flex-shrink: 1;\r\n}\r\n\r\n@keyframes center-enter {\r\n 0% { opacity: 0; transform: translateY(14px) scale(0.97); }\r\n 100% { opacity: 1; transform: translateY(0px) scale(1.0); }\r\n}\r\n\r\n.mm-grid-header {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 570px;\r\n padding: 10px 16px;\r\n background-color: rgba(129,140,248,0.08);\r\n border: 1px solid rgba(129,140,248,0.18);\r\n border-radius: 12px;\r\n transition: opacity 0.6s ease;\r\n}\r\n\r\n.mm-grid-header.active\r\n{\r\n\topacity: 0.7;\r\n}\r\n\r\n.mm-grid-header-label {\r\n font-size: 18px;\r\n font-weight: 800;\r\n letter-spacing: 0.18em;\r\n color: rgba(129,140,248,0.90);\r\n text-transform: uppercase;\r\n\tflex-shrink: 0;\r\n\twidth: 120px; /* fixed width anchors left side */\r\n}\r\n\r\n.mm-grid-header-val {\r\n font-size: 18px;\r\n font-weight: 900;\r\n color: rgba(129,140,248,0.90);\r\n\tflex: 1;\r\n text-align: center; /* centers the fragment count between the two fixed elements */\r\n}\r\n\r\n.mm-grid-above-header-label\r\n{\r\n\tfont-size: 18px;\r\n font-weight: 800;\r\n letter-spacing: 0.18em;\r\n color: rgba(129,140,248,0.90);\r\n text-transform: uppercase;\r\n\tposition: relative;\r\n\tpadding: 0px 120px;\r\n}\r\n\r\n\r\n\r\n\r\n/* \u2500\u2500 Grid preview \u2014 the actual 5x5 cells \u2500\u2500 */\r\n.mm-grid-preview {\r\n position: relative; /* for popup positioning */\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n opacity: 0.13;\r\n pointer-events: none;\r\n}\r\n\r\n\r\n/* Individual grid cell \u2014 base style */\r\n.mm-prev-cell {\r\n width: 76px; /* was 106px */\r\n height: 76px;\r\n border-radius: 10px;\r\n border: 2px solid rgba(255,255,255,0.05);\r\n background-color: rgba(255,255,255,0.02);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n/* Icon inside each cell */\r\n.mm-prev-icon {\r\n font-size: 26px; /* was 36px */\r\n pointer-events: none;\r\n}\r\n\r\n/* Transition when entering the menu (on grid preview)\r\n* The 0.3s delay lets the left side title and right side buttons start their mm-enter first, \r\n* then the grid fades in behind them \u2014 \r\n* so it feels layered rather than everything appearing simultaneously.\r\n*/\r\n\r\n/*The cubic-bezier(0.22,1,0.36,1) is the same spring curve used on the game over chest pops \r\n\u2014 gives it a slight overshoot feeling of snapping into place.*/\r\n\r\n.mm-grid-enter {\r\n animation: grid-enter 1.0s cubic-bezier(0.22,1,0.36,1) 0.3s both;\r\n}\r\n\r\n@keyframes grid-enter {\r\n 0% { opacity: 0; transform: scale(0.94); }\r\n 100% { opacity: 1; transform: scale(1.0); }\r\n}\r\n\r\n/* \u2500\u2500 Grid cell types \u2014 static states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n\r\n/* Empty cell \u2014 faint visible so full grid is readable */\r\n.ct-empty {\r\n background-color: rgba(255, 255, 255, 0.226);\r\n border-color: rgba(255, 255, 255, 0.212);\r\n}\r\n\r\n/* Normal chest cell */\r\n.ct-chest {\r\n background-color: rgba(206, 154, 76, 0.363);\r\n border-color: rgba(206, 165, 76, 0.281);\r\n}\r\n\r\n/* Gem chest \u2014 green tint */\r\n.ct-gem {\r\n background-color: rgba(30, 160, 110, 0.233);\r\n border-color: rgba(50,200,150,0.40);\r\n}\r\n\r\n/* Bomb chest \u2014 purple tint */\r\n.ct-bomb-chest {\r\n background-color: rgba(100,30,200,0.20);\r\n border-color: rgba(160,130,250,0.40);\r\n}\r\n\r\n/* Placed bomb \u2014 bright purple */\r\n.ct-bomb {\r\n background-color: rgba(100,30,200,0.30);\r\n border-color: rgba(160,130,250,0.50);\r\n}\r\n\r\n/* Detonating bomb \u2014 yellow flash */\r\n.ct-blast {\r\n background-color: rgba(251,191,36,0.80);\r\n border-color: rgba(251,191,36,1.0);\r\n animation: ca-detonate 0.6s ease-out forwards;\r\n}\r\n\r\n/* Destroyed chest \u2014 fades to empty after red flash */\r\n.ct-destroyed {\r\n background-color: rgba(240, 80, 80, 0.712);\r\n border-color: rgba(240,80,80,0.30);\r\n animation: ca-destroy 0.4s ease-out forwards;\r\n}\r\n\r\n/* \u2500\u2500 Grid cell animations \u2014 triggered by state changes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n\r\n/* Bomb detonation \u2014 yellow flash fades to empty */\r\n@keyframes ca-detonate {\r\n 0% { background-color: rgba(251,191,36,0.80); }\r\n 60% { background-color: rgba(251,191,36,0.20); }\r\n 100% { background-color: rgba(255, 255, 255, 0.212); }\r\n}\r\n\r\n/* Chest destroyed \u2014 red flash fades to ghost cell */\r\n@keyframes ca-destroy {\r\n 0% { background-color: rgba(240,80,80,0.70); opacity: 1; }\r\n 100% { background-color: rgb(163, 45, 45); opacity: 0.5; }\r\n}\r\n\r\n/* Blast range on empty cell \u2014 brief yellow tint */\r\n@keyframes ca-blast-empty {\r\n 0% { background-color: rgba(251,191,36,0.25); }\r\n 100% { background-color: rgba(255, 255, 255, 0.212); }\r\n}\r\n\r\n.ca-blast-empty {\r\n animation: ca-blast-empty 0.5s ease-out forwards;\r\n}\r\n\r\n/* \u2500\u2500 Old static keyframe animations \u2014 kept for fallback \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* These ran on hardcoded cells before the C# state system */\r\n\r\n@keyframes bomb-fire {\r\n 0% { background-color: rgba(100,30,200,0.30); }\r\n 30% { background-color: rgba(100,30,200,0.30); }\r\n 36% { background-color: rgba(251,191,36,0.85); }\r\n 48% { background-color: rgba(100,30,200,0.30); }\r\n 100% { background-color: rgba(100,30,200,0.30); }\r\n}\r\n\r\n@keyframes bomb-chain {\r\n 0% { background-color: rgba(100,30,200,0.30); }\r\n 40% { background-color: rgba(100,30,200,0.30); }\r\n 46% { background-color: rgba(196,181,253,0.85); }\r\n 58% { background-color: rgba(100,30,200,0.30); }\r\n 100% { background-color: rgba(100,30,200,0.30); }\r\n}\r\n\r\n@keyframes chest-pop-1 {\r\n 0% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 34% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 39% { background-color: rgba(240,80,80,0.70); }\r\n 47% { background-color: rgba(240,80,80,0.10); opacity: 0.2; }\r\n 57% { opacity: 0; }\r\n 70% { opacity: 1; background-color: rgba(100,115,135,0.10); }\r\n 100% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n}\r\n\r\n@keyframes chest-pop-2 {\r\n 0% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 38% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 43% { background-color: rgba(240,80,80,0.70); }\r\n 51% { background-color: rgba(240,80,80,0.10); opacity: 0.2; }\r\n 60% { opacity: 0; }\r\n 70% { opacity: 1; background-color: rgba(100,115,135,0.10); }\r\n 100% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n}\r\n\r\n@keyframes chest-pop-3 {\r\n 0% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 42% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 47% { background-color: rgba(240,80,80,0.70); }\r\n 55% { background-color: rgba(240,80,80,0.10); opacity: 0.2; }\r\n 63% { opacity: 0; }\r\n 70% { opacity: 1; background-color: rgba(100,115,135,0.10); }\r\n 100% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n}\r\n\r\n@keyframes chest-pop-4 {\r\n 0% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 45% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 50% { background-color: rgba(240,80,80,0.70); }\r\n 58% { background-color: rgba(240,80,80,0.10); opacity: 0.2; }\r\n 66% { opacity: 0; }\r\n 70% { opacity: 1; background-color: rgba(100,115,135,0.10); }\r\n 100% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n}\r\n\r\n@keyframes chest-pop-5 {\r\n 0% { background-color: rgba(30,160,110,0.12); opacity: 1; }\r\n 48% { background-color: rgba(30,160,110,0.12); opacity: 1; }\r\n 53% { background-color: rgba(50,220,160,0.80); }\r\n 61% { background-color: rgba(30,160,110,0.12); opacity: 0.2; }\r\n 68% { opacity: 0; }\r\n 70% { opacity: 1; background-color: rgba(30,160,110,0.12); }\r\n 100% { background-color: rgba(30,160,110,0.12); opacity: 1; }\r\n}\r\n\r\n@keyframes chest-pop-6 {\r\n 0% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 51% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n 56% { background-color: rgba(240,80,80,0.70); }\r\n 64% { background-color: rgba(240,80,80,0.10); opacity: 0.2; }\r\n 69% { opacity: 0; }\r\n 70% { opacity: 1; background-color: rgba(100,115,135,0.10); }\r\n 100% { background-color: rgba(100,115,135,0.10); opacity: 1; }\r\n}\r\n\r\n.ca-bomb { animation: bomb-fire 7s ease-in-out infinite; }\r\n.ca-chain { animation: bomb-chain 7s ease-in-out infinite; }\r\n.ca-c1 { animation: chest-pop-1 7s ease-in-out infinite; }\r\n.ca-c2 { animation: chest-pop-2 7s ease-in-out infinite; }\r\n.ca-c3 { animation: chest-pop-3 7s ease-in-out infinite; }\r\n.ca-c4 { animation: chest-pop-4 7s ease-in-out infinite; }\r\n.ca-c5 { animation: chest-pop-5 7s ease-in-out infinite; }\r\n.ca-c6 { animation: chest-pop-6 7s ease-in-out infinite; }\r\n\r\n/* \u2500\u2500 Dark overlay \u2014 sits above grid, below UI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(4,1,13,0.70);\r\n z-index: 1;\r\n}\r\n\r\n/* \u2500\u2500 Rising particles \u2014 float up from bottom \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-particle {\r\n position: absolute;\r\n bottom: -5px;\r\n opacity: 0;\r\n animation-name: p-rise;\r\n animation-timing-function: ease-in;\r\n animation-iteration-count: infinite;\r\n pointer-events: none;\r\n\tz-index: 3; \r\n}\r\n\r\n@keyframes p-rise {\r\n 0% { opacity: 0; transform: translateY(0px); }\r\n 15% { opacity: 1; }\r\n 80% { opacity: 0.4; transform: translateY(-700px); }\r\n 100% { opacity: 0; transform: translateY(-1000px); }\r\n}\r\n\r\n/* \u2500\u2500 Score popups \u2014 float up from destroyed chest positions \u2500\u2500\u2500\u2500 */\r\n.mm-popup {\r\n position: absolute;\r\n font-weight: 900;\r\n pointer-events: none;\r\n opacity: 0;\r\n transform: translateX(-50%); /* center text on its spawn point */\r\n white-space: nowrap;\r\n z-index: 20;\r\n}\r\n\r\n/* Active state \u2014 triggers the rise animation */\r\n.popup-active {\r\n animation: popup-rise 1.8s ease-out forwards;\r\n}\r\n\r\n@keyframes popup-rise {\r\n 0% { opacity: 0; transform: translateY(0px); }\r\n 15% { opacity: 1; }\r\n 80% { opacity: 0.8; transform: translateY(-60px); }\r\n 100% { opacity: 0; transform: translateY(-80px); }\r\n}\r\n\r\n/* Popup tiers \u2014 size and color by reward magnitude */\r\n.popup-small { font-size: 14px; color: rgba(129,140,248,0.90); }\r\n.popup-nice { font-size: 16px; color: rgba(52,211,153,0.95); }\r\n.popup-chain { font-size: 20px; color: rgba(251,191,36,0.95); }\r\n.popup-mega { font-size: 24px; color: rgba(244,114,182,0.95); }\r\n.popup-hit { font-size: 13px; color: rgba(248,113,113,0.80); }\r\n\r\n/* \u2500\u2500 Daily fragment counter \u2014 absolute above the grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-today-frags {\r\n position: absolute;\r\n /* mm-grid-preview starts at left:150px, right:0 \u2014 so center of that zone */\r\n left: 150px;\r\n right: 0;\r\n /* sits just above where the grid vertically centers \u2014 grid-preview is top:120px,\r\n the grid is ~540px tall and vertically centered in remaining space.\r\n This approximates \u0022above the grid\u0022 without JS measurement */\r\n top: calc(50% - 850px);\r\n\tleft: 830px;\r\n text-align: center;\r\n font-size: 30px;\r\n font-weight: 800;\r\n color: rgba(129,140,248,0.85);\r\n letter-spacing: 0.15em;\r\n z-index: 5; /* above mm-overlay */\r\n pointer-events: none;\r\n}\r\n\r\n/* \u2500\u2500 Main UI layout \u2014 full screen flex row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-ui {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n pointer-events: none;\r\n z-index: 5;\r\n}\r\n\r\n/* \u2500\u2500 Left side \u2014 title and personal stats \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-left {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n padding-left: 90px;\r\n gap: 0px;\r\n}\r\n\r\n/* Small label above title */\r\n.mm-eyebrow {\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 0.5em;\r\n color: rgba(160,130,250,0.40);\r\n text-transform: uppercase;\r\n margin-bottom: 10px;\r\n margin-left: 6px;\r\n animation: mm-enter 0.6s ease-out 0.0s both;\r\n}\r\n\r\n/* Entrance animation \u2014 slides up from below */\r\n@keyframes mm-enter {\r\n 0% { opacity: 0; transform: translateY(20px); }\r\n 100% { opacity: 1; transform: translateY(0px); }\r\n}\r\n\r\n/* CHAIN \u2014 white title line */\r\n.mm-title-chain {\r\n font-size: 112px;\r\n font-weight: 900;\r\n color: #ffffff;\r\n line-height: 1;\r\n margin-bottom: -16px;\r\n animation: mm-enter 0.7s ease-out 0.1s both;\r\n /* hard cel-shaded offset shadow */\r\n text-shadow: 4px 4px 0px #1a0e30, -1px -1px 0px #0e0820;\r\n}\r\n\r\n/* Wrapper for REACTION \u2014 handles entrance separately from glow */\r\n.mm-title-reaction-wrap {\r\n animation: mm-enter 0.7s ease-out 0.2s both;\r\n margin-bottom: 18px;\r\n}\r\n\r\n/* REACTION \u2014 purple, slow color glow loop */\r\n.mm-title-reaction {\r\n font-size: 112px;\r\n font-weight: 900;\r\n line-height: 1;\r\n color: #a78bfa;\r\n text-shadow: 4px 4px 0px #2d0e6e, -1px -1px 0px #0e0820;\r\n animation: reaction-glow 3s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes reaction-glow {\r\n 0% { color: #7c3aed; text-shadow: 4px 4px 0px #1a0640, -1px -1px 0px #0e0820; }\r\n 100% { color: #fdb5b5; text-shadow: 4px 4px 0px #801a1a, -1px -1px 0px #0e0820; }\r\n}\r\n\r\n/* Subtitle tagline */\r\n.mm-tagline {\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 0.32em;\r\n color: rgba(255,255,255,0.18);\r\n text-transform: uppercase;\r\n margin-bottom: 28px;\r\n margin-left: 4px;\r\n animation: mm-enter 0.6s ease-out 0.35s both;\r\n}\r\n\r\n/* Personal best stats card */\r\n.mm-stats-personal {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0px;\r\n margin-bottom: 28px;\r\n animation: mm-enter 0.6s ease-out 0.5s both;\r\n background-color: rgba(10, 4, 28, 0.85);\r\n border: 2px solid rgba(120,80,220,0.35);\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 4px 4px 0px rgba(0,0,0,0.60);\r\n width: 280px;\r\n}\r\n/* Single stat row inside the card */\r\n.mm-sp-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 12px 18px;\r\n border-bottom: 1px solid rgba(120,80,220,0.12);\r\n}\r\n\r\n/* Hover effect per row */\r\n.mm-sp-row:hover {\r\n background-color: rgba(120,80,220,0.08);\r\n}\r\n\r\n.mm-sp-icon {\r\n font-size: 18px;\r\n width: 26px;\r\n text-align: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.mm-sp-val {\r\n font-size: 18px;\r\n font-weight: 900;\r\n color: #ffffff;\r\n letter-spacing: 0.02em;\r\n flex-shrink: 0;\r\n}\r\n\r\n.mm-sp-lbl {\r\n font-size: 10px;\r\n font-weight:900;\r\n bottom: 100px;\r\n color: rgba(160,130,250,0.55);\r\n text-transform: uppercase;\r\n letter-spacing: 0.2em;\r\n align-self: flex-end;\r\n padding-bottom: 2px;\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Version tag bottom-left */\r\n.mm-ver {\r\n font-size: 10px;\r\n font-weight: 600;\r\n color: rgba(255,255,255,0.08);\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n animation: mm-enter 0.5s ease-out 0.7s both;\r\n margin-top: 4px;\r\n margin-left: 4px;\r\n}\r\n\r\n/* SECTION 2 \u2014 RIGHT SIDE : play button \u002B tab buttons */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Right side \u2014 play button and tab panels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-right {\r\n width: 380px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n justify-content: center;\r\n padding-right: 72px;\r\n gap: 8px;\r\n pointer-events: none;\r\n}\r\n\r\n/* Wrapper for play button \u2014 handles entrance animation */\r\n.mm-play-wrap {\r\n animation: mm-enter 0.7s ease-out 0.4s both;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n margin-bottom: 6px;\r\n}\r\n/* Play button \u2014 cel-shaded raised tile */\r\n.mm-play {\r\n position: relative;\r\n overflow: hidden;\r\n background-color: #00ff22;\r\n border: 2px solid #4ade80;\r\n border-radius: 10px;\r\n /* hard offset shadow = raised tile feel */\r\n // box-shadow: 4px 4px 0px #052e16, inset 0px 1px 0px rgba(255,255,255,0.10);\r\n color: white;\r\n font-size: 24px;\r\n font-weight: 900;\r\n letter-spacing: 0.22em;\r\n padding-top: 26px;\r\n padding-bottom: 26px;\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 14px;\r\n pointer-events: all;\r\n animation: play-pulse 2.5s ease-in-out infinite alternate;\r\n transition: box-shadow 0.08s, transform 0.08s;\r\n}\r\n\r\n.mm-play.mm-play-locked {\r\n opacity: 0.35;\r\n cursor: default;\r\n}\r\n\r\n.mm-play.mm-play-locked:hover {\r\n background-color: #7c3aed;\r\n}\r\n\r\n/* Play button \u2014 slow purple pulse */\r\n@keyframes play-glow {\r\n 0% { background-color: #28d937; }\r\n 100% { background-color: #3aed49; }\r\n}\r\n\r\n@keyframes play-pulse {\r\n 0% { border-color: rgba(74,222,128,0.70); }\r\n 100% { border-color: rgba(74,222,128,1.00); }\r\n}\r\n\r\n.mm-play:hover {\r\n background-color: #00ff62;\r\n box-shadow: 6px 6px 0px #052e16, inset 0px 1px 0px rgba(255,255,255,0.12);\r\n}\r\n\r\n.mm-play:active {\r\n transform: translate(3px, 3px);\r\n box-shadow: 1px 1px 0px #196e0e;\r\n}\r\n\r\n/* Shine sweep across play button */\r\n.mm-play-shine {\r\n position: absolute;\r\n top: 0; bottom: 0; left: 0;\r\n width: 35%;\r\n background-color: rgba(255,255,255,0.06);\r\n animation: shine 4s ease-in-out infinite;\r\n pointer-events: none;\r\n}\r\n\r\n@keyframes shine {\r\n 0% { transform: translateX(-180%); }\r\n 35% { transform: translateX(420%); }\r\n 100% { transform: translateX(420%); }\r\n}\r\n/* ------------------ Multiplayer button ------------------- */\r\n/* Wrapper for multiplayer button \u2014 handles entrance animation */\r\n.mm-multiplayer-wrap {\r\n animation: mm-enter 0.7s ease-out 0.45s both;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n}\r\n\r\n/* Multiplayer button \u2014 hero CTA */\r\n.mm-multiplayer {\r\n position: relative;\r\n overflow: hidden;\r\n background-color: #f8050546;\r\n border: 2px solid rgba(250, 139, 139, 0.55);\r\n border-radius: 18px;\r\n color: white;\r\n font-size: 14px;\r\n font-weight: 900;\r\n letter-spacing: 0.18em;\r\n padding-top: 28px;\r\n padding-bottom: 28px;\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1px;\r\n pointer-events: all;\r\n animation: multiplayer-glow 2.3s ease-in-out infinite alternate;\r\n}\r\n\r\n/* Multiplayer button \u2014 slow purple pulse */\r\n// @keyframes multiplayer-glow {\r\n// 0% { background-color: #0583f8; }\r\n// 100% { background-color: #3ad8ed; }\r\n// }\r\n\r\n//.mm-play:hover { opacity: 0.88; }\r\n\r\n/* Shine sweep across play button */\r\n// .mm-multiplayer-shine {\r\n// position: absolute;\r\n// top: 0;\r\n// bottom: 0;\r\n// left: 0;\r\n// width: 35%;\r\n// background-color: rgba(0, 204, 255, 0.07);\r\n// animation: shine 3.5s ease-in-out infinite;\r\n// pointer-events: none;\r\n// }\r\n\r\n@keyframes mm-multiplayer-shine {\r\n 0% { transform: translateX(-180%); }\r\n 40% { transform: translateX(400%); }\r\n 100% { transform: translateX(400%); }\r\n}\r\n\r\n/* \u2500\u2500 Secondary tab buttons \u2014 leaderboard / stats / shop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-tabs {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n animation: mm-enter 0.6s ease-out 0.55s both;\r\n}\r\n\r\n.mm-tab {\r\n background-color: rgba(15, 8, 35, 0.80);\r\n border: 2px solid rgba(80,50,140,0.40);\r\n border-radius: 8px;\r\n box-shadow: 3px 3px 0px rgba(0,0,0,0.50);\r\n color: rgba(200,180,255,0.50);\r\n font-size: 14px;\r\n font-weight: 700;\r\n padding: 13px 16px;\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n pointer-events: all;\r\n transition: background-color 0.08s, border-color 0.08s, box-shadow 0.08s, transform 0.08s;\r\n letter-spacing: 0.04em;\r\n overflow: hidden;\r\n width: 100%;\r\n}\r\n\r\n.mm-tab:hover {\r\n background-color: rgba(80,40,160,0.25);\r\n border-color: rgba(140,100,255,0.55);\r\n color: rgba(220,200,255,0.85);\r\n box-shadow: 4px 4px 0px rgba(0,0,0,0.60);\r\n}\r\n\r\n.mm-tab:active {\r\n transform: translate(2px, 2px);\r\n box-shadow: 1px 1px 0px rgba(0,0,0,0.50);\r\n}\r\n\r\n/* Active tab */\r\n.mm-tab.on {\r\n background-color: rgba(80,30,180,0.30);\r\n border-color: rgba(167,139,250,0.70);\r\n color: #c4b5fd;\r\n box-shadow: 4px 4px 0px #1a0640;\r\n /* left accent bar */\r\n border-left-width: 4px;\r\n}\r\n\r\n/* Fragment count pill inside shop tab */\r\n.mm-frags-pill {\r\n margin-left: auto;\r\n background-color: #6d28d9;\r\n border: 1px solid #a78bfa;\r\n color: white;\r\n font-size: 11px;\r\n font-weight: 900;\r\n border-radius: 6px;\r\n padding: 3px 8px;\r\n box-shadow: 2px 2px 0px #2d0e6e;\r\n}\r\n\r\n/* locked when menu tutorial */\r\n.mm-tab.mm-tab-tut-locked {\r\n opacity: 0.35;\r\n cursor: default;\r\n pointer-events: none;\r\n}\r\n\r\n/* \u2500\u2500 Tab content panels \u2014 leaderboard / stats / shop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-panel {\r\n top: 0;\r\n bottom: 0;\r\n // left: 400px; /* tune this \u2014 pushes right edge of mm-left */\r\n // right: 170px; /* mm-right width */\r\n background-color: transparent;\r\n border: none;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 14px;\r\n pointer-events: all;\r\n padding: 0;\r\n}\r\n\r\n// Add a background (light) when a tab button is opened\r\n// .mm-panel-backdrop {\r\n// position: absolute;\r\n// top: 0;\r\n// left: 0;\r\n// right: 0;\r\n// bottom: 0;\r\n// background-color: rgba(4,1,13,0.82);\r\n// pointer-events: none;\r\n// }\r\n\r\n/* Panel section header */\r\n.mm-panel-hd {\r\n font-size: 11px;\r\n font-weight: 900;\r\n color: rgba(200,180,255,0.60);\r\n letter-spacing: 0.26em;\r\n text-transform: uppercase;\r\n border-bottom: 2px solid rgba(120,80,220,0.20);\r\n padding-bottom: 12px;\r\n margin-bottom: 12px;\r\n flex-shrink: 0;\r\n line-height: 1.6;\r\n}\r\n\r\n/* Empty state message */\r\n.mm-panel-empty {\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.20);\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n}\r\n\r\n\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* SECTION 5 \u2014 LEADERBOARD ROWS */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n\r\n.mm-lb-row {\r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n max-width: 760px;\r\n margin: 0 auto;\r\n box-sizing: border-box;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 14px;\r\n border-radius: 8px;\r\n border: 1px solid rgba(80,50,140,0.12);\r\n background-color: rgba(255,255,255,0.02);\r\n transition: background-color 0.08s, border-color 0.08s;\r\n min-width: 0;\r\n}\r\n\r\n.mm-lb-row:hover {\r\n background-color: rgba(80,40,160,0.10);\r\n border-color: rgba(120,80,220,0.25);\r\n}\r\n\r\n/* Top 3 gold row */\r\n.mm-lb-row:first-child {\r\n background-color: rgba(120,80,10,0.18);\r\n border-color: rgba(251,191,36,0.35);\r\n box-shadow: 3px 3px 0px rgba(60,30,0,0.60);\r\n}\r\n\r\n/* Top 3 silver row */\r\n.mm-lb-row:nth-child(2) {\r\n background-color: rgba(60,70,100,0.18);\r\n border-color: rgba(180,190,210,0.30);\r\n box-shadow: 3px 3px 0px rgba(20,25,40,0.60);\r\n}\r\n\r\n/* Top 3 bronze row */\r\n.mm-lb-row:nth-child(3) {\r\n background-color: rgba(100,50,10,0.15);\r\n border-color: rgba(180,110,50,0.30);\r\n box-shadow: 3px 3px 0px rgba(40,15,0,0.60);\r\n}\r\n\r\n/* Current player row */\r\n.mm-lb-row.me {\r\n background-color: rgba(80,30,180,0.22);\r\n border: 2px solid rgba(167,139,250,0.50);\r\n box-shadow: 3px 3px 0px rgba(20,0,60,0.65);\r\n}\r\n\r\n.mm-lb-rank {\r\n font-size: 16px;\r\n width: 32px;\r\n flex-shrink: 0;\r\n text-align: center;\r\n}\r\n\r\n\r\n/* Rank number for positions 4\u002B */\r\n.mm-lb-rank-num {\r\n font-size: 11px;\r\n font-weight: 900;\r\n color: rgba(160,140,200,0.40);\r\n width: 32px;\r\n text-align: center;\r\n letter-spacing: 0.04em;\r\n}\r\n\r\n.mm-lb-row.me .mm-lb-name {\r\n color: #e9d5ff;\r\n font-weight: 900;\r\n}\r\n\r\n/* Wave badge */\r\n.mm-lb-wave {\r\n font-size: 10px;\r\n font-weight: 700;\r\n color: rgba(160,140,200,0.40);\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n background-color: rgba(255,255,255,0.03);\r\n border: 1px solid rgba(255,255,255,0.06);\r\n border-radius: 4px;\r\n padding: 2px 7px;\r\n}\r\n\r\n.mm-lb-score {\r\n font-size: 15px;\r\n font-weight: 900;\r\n color: #a78bfa;\r\n letter-spacing: 0.04em;\r\n min-width: 60px;\r\n flex-shrink: 0;\r\n text-align: right;\r\n text-shadow: 1px 1px 0px rgba(40,0,80,0.80);\r\n}\r\n\r\n.mm-lb-row:first-child .mm-lb-score { color: #fbbf24; text-shadow: 1px 1px 0px rgba(80,40,0,0.80); }\r\n.mm-lb-row:nth-child(2) .mm-lb-score { color: #cbd5e1; text-shadow: 1px 1px 0px rgba(20,25,40,0.80); }\r\n.mm-lb-row:nth-child(3) .mm-lb-score { color: #d97706; text-shadow: 1px 1px 0px rgba(60,25,0,0.80); }\r\n.mm-lb-row.me .mm-lb-score { color: #c4b5fd; }\r\n\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* SECTION 6 \u2014 STATS ROWS */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n\r\n/** Stats grid \u2014 2 columns */\r\n.mm-stats-grid {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n}\r\n\r\n/* Big hero stat \u2014 spans full width, for best score */\r\n.mm-srow-hero {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n padding: 18px 14px;\r\n border-radius: 10px;\r\n background-color: rgba(80,30,180,0.18);\r\n border: 2px solid rgba(167,139,250,0.35);\r\n box-shadow: 4px 4px 0px rgba(20,0,60,0.65);\r\n gap: 4px;\r\n}\r\n\r\n.mm-srow-hero .mm-slbl {\r\n font-size: 10px;\r\n letter-spacing: 0.22em;\r\n color: rgba(180,160,240,0.50);\r\n text-transform: uppercase;\r\n}\r\n\r\n.mm-srow-hero .mm-sval {\r\n font-size: 36px;\r\n font-weight: 900;\r\n color: #a78bfa;\r\n text-shadow: 2px 2px 0px rgba(40,0,80,0.80);\r\n letter-spacing: 0.04em;\r\n}\r\n\r\n/* Regular stat tile \u2014 half width */\r\n.mm-srow {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 8px;\r\n padding: 10px 14px;\r\n border-radius: 8px;\r\n border: 1px solid rgba(80,50,140,0.20);\r\n background-color: rgba(255,255,255,0.025);\r\n box-shadow: 3px 3px 0px rgba(0,0,0,0.50);\r\n width: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.mm-srow:hover {\r\n background-color: rgba(80,40,160,0.12);\r\n border-color: rgba(120,80,220,0.30);\r\n}\r\n\r\n.mm-slbl {\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 0.08em;\r\n color: rgba(180,160,240,0.55);\r\n text-transform: uppercase;\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.mm-sval {\r\n font-size: 16px;\r\n font-weight: 900;\r\n letter-spacing: 0.04em;\r\n color: #fbbf24;\r\n text-shadow: 1px 1px 0px rgba(100,50,0,0.80);\r\n flex-shrink: 0;\r\n text-align: right;\r\n}\r\n\r\n/* \u2500\u2500 Shop panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.mm-shop-row {\r\n display: flex;\r\n flex-direction: row;\r\n width: 100%; // stretches row\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding-top: 14px;\r\n padding-bottom: 14px;\r\n background-color: rgba(80,80,200,0.07);\r\n border: 1px solid rgba(80,80,200,0.15);\r\n border-radius: 10px;\r\n font-size: 12px;\r\n}\r\n\r\n.mm-shop-balance {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 14px;\r\n background-color: rgba(10,4,28,0.70);\r\n border: 2px solid rgba(80,200,220,0.20);\r\n border-radius: 8px;\r\n box-shadow: 3px 3px 0px rgba(0,0,0,0.50);\r\n}\r\n\r\n.mm-shop-balance-icon { font-size: 18px; }\r\n\r\n.mm-shop-balance-val {\r\n font-size: 22px;\r\n font-weight: 900;\r\n color: #e9d5ff;\r\n letter-spacing: 0.02em;\r\n}\r\n\r\n.mm-shop-balance-lbl {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: rgba(100,220,240,0.70);\r\n text-transform: uppercase;\r\n letter-spacing: 0.14em;\r\n align-self: flex-end;\r\n padding-bottom: 5px;\r\n}\r\n\r\n/* Displays our Grid of shoppable modifiers in the Shop card */\r\n.mm-shop-grid {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n max-height: 540px; /* tune this \u2014 height of scroll area */\r\n overflow-y: scroll; /* enable vertical scroll */\r\n padding-right: 1px; /* space for scrollbar so cards don\u0027t touch it */\r\n}\r\n\r\n/* Scroll bar */\r\n\r\n// .mm-shop-grid::-webkit-scrollbar {\r\n// width: 8px;\r\n// }\r\n\r\n// .mm-shop-grid::-webkit-scrollbar-track {\r\n// background-color: rgba(255,255,255,0.02);\r\n// border-radius: 4px;\r\n// }\r\n\r\n// .mm-shop-grid::-webkit-scrollbar-thumb {\r\n// background-color: rgba(167,139,250,0.30);\r\n// border-radius: 4px;\r\n// }\r\n\r\n// .mm-shop-grid::-webkit-scrollbar-thumb:hover {\r\n// background-color: rgba(167,139,250,0.50);\r\n// }\r\n\r\n/**/\r\n\r\n.mm-mod-card {\r\n pointer-events: all;\r\n width: 195px;\r\n height: 230px;\r\n /* dark base */\r\n background-color: rgba(10, 4, 28, 0.88);\r\n border: 2px solid rgba(80,50,140,0.35);\r\n border-radius: 10px;\r\n /* cel-shaded raised tile */\r\n box-shadow: 4px 4px 0px rgba(0,0,0,0.65), inset 0px 1px 0px rgba(255,255,255,0.04);\r\n padding: 14px 12px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 5px;\r\n transition: border-color 0.1s, background-color 0.1s, box-shadow 0.08s, transform 0.08s;\r\n}\r\n\r\n.mm-mod-card:hover {\r\n border-color: rgba(140,100,255,0.55);\r\n background-color: rgba(40,15,80,0.70);\r\n box-shadow: 6px 6px 0px rgba(0,0,0,0.70), inset 0px 1px 0px rgba(255,255,255,0.06);\r\n transform: translate(-1px, -1px);\r\n}\r\n\r\n/* Rarity borders */\r\n.mm-mod-card.rarity-common { border-color: rgba(80,50,140,0.35); }\r\n.mm-mod-card.rarity-rare {\r\n border-color: rgba(96,165,250,0.45);\r\n box-shadow: 4px 4px 0px rgba(0,0,30,0.70);\r\n}\r\n.mm-mod-card.rarity-epic {\r\n border-color: rgba(167,139,250,0.55);\r\n box-shadow: 4px 4px 0px rgba(20,0,60,0.70);\r\n}\r\n\r\n.mm-mod-icon {\r\n font-size: 30px;\r\n text-align: center;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.mm-mod-name {\r\n font-size: 13px;\r\n font-weight: 900;\r\n color: rgba(240,235,255,0.92);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n letter-spacing: 0.03em;\r\n}\r\n\r\n.mm-mod-desc {\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: rgba(180,165,220,0.45);\r\n text-align: center;\r\n flex: 1;\r\n}\r\n\r\n.mm-mod-footer {\r\n margin-top: auto;\r\n width: 100%;\r\n}\r\n\r\n.mm-mod-btn {\r\n width: 100%;\r\n border-radius: 6px;\r\n font-size: 13px;\r\n font-weight: 800;\r\n padding: 9px 0;\r\n cursor: pointer;\r\n text-align: center;\r\n border: 2px solid transparent;\r\n pointer-events: all;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n letter-spacing: 0.05em;\r\n transition: background-color 0.08s, transform 0.06s, box-shadow 0.06s;\r\n box-shadow: 2px 2px 0px rgba(0,0,0,0.55);\r\n}\r\n\r\n.mm-mod-btn:active {\r\n transform: translate(1px, 1px);\r\n box-shadow: 0px 0px 0px rgba(0,0,0,0.55);\r\n}\r\n\r\n/* Buy */\r\n.mm-mod-btn.btn-buy {\r\n background-color: rgba(80,40,180,0.30);\r\n border-color: rgba(140,100,255,0.55);\r\n color: #c4b5fd;\r\n box-shadow: 2px 2px 0px #1a0640;\r\n}\r\n.mm-mod-btn.btn-buy:hover {\r\n background-color: rgba(100,55,200,0.40);\r\n border-color: rgba(167,139,250,0.80);\r\n}\r\n.mm-mod-btn.btn-buy.cant-afford {\r\n background-color: rgba(255,255,255,0.02);\r\n border-color: rgba(255,255,255,0.08);\r\n color: rgba(255,255,255,0.22);\r\n cursor: default;\r\n box-shadow: 2px 2px 0px rgba(0,0,0,0.40);\r\n}\r\n\r\n/* Active / owned */\r\n.mm-mod-btn.btn-active {\r\n background-color: rgba(20,80,50,0.50);\r\n border-color: rgba(52,211,153,0.65);\r\n color: #34d399;\r\n box-shadow: 2px 2px 0px rgba(0,30,15,0.70);\r\n}\r\n\r\n/* Equip (inactive) */\r\n.mm-mod-btn.btn-inactive {\r\n background-color: rgba(30,15,70,0.50);\r\n border-color: rgba(140,100,255,0.30);\r\n color: rgba(200,180,255,0.65);\r\n}\r\n\r\n.mm-mod-btn.btn-inactive:hover {\r\n background-color: rgba(60,30,140,0.40);\r\n border-color: rgba(167,139,250,0.55);\r\n color: #c4b5fd;\r\n}\r\n\r\n/* Slots full */\r\n.mm-mod-btn.btn-capped {\r\n background-color: rgba(60,10,10,0.40);\r\n border-color: rgba(248,113,113,0.35);\r\n color: rgba(248,113,113,0.55);\r\n cursor: default;\r\n box-shadow: 2px 2px 0px rgba(40,0,0,0.55);\r\n}\r\n\r\n/* Let the player know how many slots are still available */\r\n.mm-shop-slots {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 7px 12px;\r\n background-color: rgba(255,255,255,0.02);\r\n border: 1px solid rgba(255,255,255,0.06);\r\n border-radius: 6px;\r\n}\r\n\r\n.mm-shop-slots-lbl {\r\n color: rgba(255,255,255,0.30);\r\n font-weight: 600;\r\n font-size: 11px;\r\n letter-spacing: 0.06em;\r\n}\r\n\r\n.mm-shop-slots-val {\r\n color: rgba(200,180,255,0.75);\r\n font-weight: 900;\r\n font-size: 12px;\r\n}\r\n\r\n/* 1 \u2014 owned: subtle green border */\r\n.mm-mod-card.owned {\r\n border-color: rgba(52,211,153,0.40);\r\n box-shadow: 4px 4px 0px rgba(0,0,0,0.65);\r\n}\r\n\r\n/* 2 \u2014 capped: red tint for owned but can\u0027t equip */\r\n.mm-mod-card.capped {\r\n border-color: rgba(248,113,113,0.50);\r\n box-shadow: 4px 4px 0px rgba(40,0,0,0.70);\r\n}\r\n\r\n/* 3 \u2014 capped-unowned: dimmed for not owned and slots full */\r\n.mm-mod-card.capped-unowned {\r\n opacity: 0.38;\r\n}\r\n\r\n/* 4 \u2014 active: green tint \u2014 MUST BE LAST to win over everything above */\r\n.mm-mod-card.active {\r\n border-color: rgba(52,211,153,0.75);\r\n background-color: rgba(10,40,25,0.70);\r\n box-shadow: 4px 4px 0px rgba(0,0,0,0.65);\r\n}\r\n\r\n/* \u2500\u2500 Diagonal drifting shapes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n@keyframes shape-drift {\r\n 0% { transform: translate(0px, 0px) rotate(0deg); }\r\n 100% { transform: translate(280px, -280px) rotate(160deg); }\r\n}\r\n\r\n.mm-shape {\r\n position: absolute;\r\n pointer-events: none;\r\n opacity: 0.08; /* always visible \u2014 fixed low opacity */\r\n animation-name: shape-drift;\r\n animation-timing-function: linear;\r\n animation-iteration-count: infinite;\r\n animation-direction: alternate; /* bounces back so no jump-reset */\r\n}\r\n\r\n.mm-shape.tri {\r\n width: 0;\r\n height: 0;\r\n background: transparent !important; /* triangles use border trick */\r\n}\r\n\r\n.mm-shape.sq {\r\n border-radius: 3px;\r\n}\r\n\r\n/* message */\r\n\r\n.mm-grid-preview-wrap {\r\n position: relative;\r\n width: 420px; /* was 578px */\r\n height: 420px; /* was 578px */\r\n}\r\n\r\n\r\n\r\n/* Centered idle grid messages \u2014 same float-up as popups but bigger */\r\n.idle-msg-neutral {\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.40);\r\n}\r\n.idle-msg-small {\r\n font-size: 16px;\r\n color: rgba(129,140,248,0.90);\r\n}\r\n.idle-msg-nice {\r\n font-size: 20px;\r\n color: rgba(52,211,153,0.95);\r\n}\r\n.idle-msg-chain {\r\n font-size: 24px;\r\n color: rgba(251,191,36,0.95);\r\n}\r\n.idle-msg-mega {\r\n font-size: 28px;\r\n color: rgba(244,114,182,0.95);\r\n}\r\n\r\n/* Toggle Button for Grid Farm Idle */\r\n.mm-idle-toggle {\r\n background-color: rgba(255,255,255,0.06);\r\n border: 1px solid rgba(255,255,255,0.12);\r\n border-radius: 8px;\r\n color: rgba(255,255,255,0.50);\r\n font-size: 30px;\r\n padding: 15px 10px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n\tflex-shrink: 0; /* never compress */\r\n width: 120px; /* same as label width \u2014 keeps val truly centered */\r\n justify-content: center; /* button content aligns right */\r\n\tright: 5px;\r\n\tposition: relative; /* \u2190 THIS was missing \u2014 required for ::after to work */\r\n\toverflow: hidden; // required to not show sweep outside the button\r\n\t\r\n}\r\n\r\n\r\n.mm-idle-toggle:hover {\r\n background-color: rgba(255,255,255,0.10);\r\n color: rgba(255,255,255,0.80);\r\n}\r\n\r\n/* on */\r\n.mm-idle-toggle.on {\r\n\tanimation: none;\r\n border-color: rgba(129,140,248,0.35);\r\n color: rgba(129,140,248,0.80);\r\n\tletter-spacing: -0.32em;\r\n}\r\n\r\n.mm-idle-toggle.on::after {\r\n display: none;\r\n}\r\n\r\n/* off */\r\n.mm-idle-toggle.off {\r\n animation: toggle-sleep 2.8s ease-in-out infinite;\r\n\tletter-spacing: -0.32em;\r\n}\r\n\r\n.mm-idle-toggle.off::after {\r\n content: \u0022\u0022;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: -60%;\r\n width: 40%;\r\n background-color: rgba(255,255,255,0.08);\r\n animation: toggle-sweep 3s ease-in-out infinite;\r\n}\r\n\r\n@keyframes toggle-sleep {\r\n 0% { border-color: rgba(255,255,255,0.06); }\r\n 50% { border-color: rgba(255,255,255,0.22); background-color: rgba(255,255,255,0.04); }\r\n 100% { border-color: rgba(255,255,255,0.06); }\r\n}\r\n\r\n@keyframes toggle-sweep {\r\n 0% { transform: translateX(0%); }\r\n 40% { transform: translateX(500%); }\r\n 100% { transform: translateX(500%); }\r\n}\r\n\r\n/* Pannels in the center */\r\n\r\n.mm-center {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 5px;\r\n pointer-events: all;\r\n min-height: 0;\r\n}\r\n\r\n/* Shop tabs (pets, modifiers, ...)*/\r\n.mm-shop-tabs {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 5px;\r\n margin-bottom: 4px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid rgba(120,80,220,0.15);\r\n}\r\n\r\n.mm-shop-tab {\r\n background-color: rgba(15,8,35,0.80);\r\n border: 2px solid rgba(80,50,140,0.35);\r\n border-radius: 7px;\r\n box-shadow: 2px 2px 0px rgba(0,0,0,0.50);\r\n color: rgba(200,180,255,0.45);\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 8px 13px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 5px;\r\n transition: background-color 0.08s, border-color 0.08s, transform 0.08s, box-shadow 0.08s;\r\n}\r\n\r\n.mm-shop-tab:hover {\r\n background-color: rgba(80,40,160,0.20);\r\n border-color: rgba(140,100,255,0.45);\r\n color: rgba(220,200,255,0.80);\r\n}\r\n\r\n.mm-shop-tab:active {\r\n transform: translate(1px, 1px);\r\n box-shadow: 1px 1px 0px rgba(0,0,0,0.50);\r\n}\r\n\r\n.mm-shop-tab.on {\r\n background-color: rgba(80,30,180,0.28);\r\n border-color: rgba(167,139,250,0.65);\r\n border-bottom-width: 3px;\r\n color: #c4b5fd;\r\n box-shadow: 3px 3px 0px #1a0640;\r\n}\r\n\r\n.mm-shop-tab.disabled {\r\n opacity: 0.40;\r\n cursor: default;\r\n pointer-events: none;\r\n}\r\n\r\n.mm-shop-tab-coming {\r\n font-size: 9px;\r\n font-weight: 900;\r\n color: rgba(251,191,36,0.70);\r\n background-color: rgba(251,191,36,0.08);\r\n border-radius: 4px;\r\n padding: 2px 5px;\r\n letter-spacing: 0.05em;\r\n}\r\n\r\n/* pet sleeping */ \r\n.mm-idle-toggle.sleeping {\r\n background-color: rgba(120,80,220,0.08);\r\n border-color: rgba(120,80,220,0.20);\r\n color: rgba(180,150,250,0.60);\r\n cursor: default;\r\n animation: pet-sleep 3s ease-in-out infinite;\r\n}\r\n\r\n.mm-idle-toggle.sleeping::after {\r\n display: none;\r\n}\r\n\r\n@keyframes pet-sleep {\r\n 0%, 100% { opacity: 0.6; transform: scale(1.0); }\r\n 50% { opacity: 0.9; transform: scale(1.03); }\r\n}\r\n\r\n/* Debug Editor */\r\n\r\n.mm-dev-menu {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n margin-top: 12px;\r\n padding: 8px;\r\n background-color: rgba(244,114,182,0.05);\r\n border: 1px dashed rgba(244,114,182,0.30);\r\n border-radius: 6px;\r\n}\r\n\r\n.mm-dev-btn {\r\n background-color: rgba(244,114,182,0.15);\r\n border: 1px solid rgba(244,114,182,0.30);\r\n border-radius: 4px;\r\n color: rgba(244,114,182,0.85);\r\n font-size: 10px;\r\n font-weight: 700;\r\n padding: 4px 8px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n letter-spacing: 0.05em;\r\n}\r\n\r\n.mm-dev-btn:hover {\r\n background-color: rgba(244,114,182,0.25);\r\n}\r\n\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Welcome gift overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n\r\n.mm-welcome-bg {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background-color: rgba(4, 1, 13, 0.85);\r\n z-index: 99;\r\n pointer-events: all;\r\n animation: welcome-bg-fade 0.4s ease-out both;\r\n}\r\n\r\n@keyframes welcome-bg-fade {\r\n 0% { opacity: 0; }\r\n 100% { opacity: 1; }\r\n}\r\n\r\n.mm-welcome-gift {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background-color: rgba(20, 8, 50, 0.98);\r\n border: 2px solid rgba(251, 191, 36, 0.60);\r\n border-radius: 20px;\r\n padding: 40px 60px;\r\n z-index: 100;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 20px;\r\n pointer-events: all;\r\n animation: gift-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;\r\n}\r\n\r\n@keyframes gift-pop {\r\n 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }\r\n 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }\r\n}\r\n\r\n.mm-gift-title {\r\n font-size: 36px;\r\n font-weight: 900;\r\n color: rgba(251, 191, 36, 0.95);\r\n letter-spacing: 0.15em;\r\n animation: title-glow 1.5s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes title-glow {\r\n 0% { color: rgba(251, 191, 36, 0.80); }\r\n 100% { color: rgba(251, 191, 36, 1.00); }\r\n}\r\n\r\n.mm-gift-subtitle {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: rgba(255, 255, 255, 0.60);\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.mm-gift-chests {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 20px;\r\n margin: 12px 0;\r\n}\r\n\r\n/* Single chest container \u2014 closed or opened */\r\n.mm-gift-chest {\r\n position: relative;\r\n width: 180px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.04);\r\n border: 2px solid rgba(255, 255, 255, 0.10);\r\n border-radius: 14px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 16px;\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n}\r\n\r\n/* Active state \u2014 pulsing, inviting to click */\r\n.mm-gift-chest.active {\r\n border-color: rgba(251, 191, 36, 0.80);\r\n background-color: rgba(251, 191, 36, 0.10);\r\n cursor: pointer;\r\n pointer-events: all;\r\n animation: chest-pulse 0.8s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes chest-pulse {\r\n 0% { transform: scale(1.00); border-color: rgba(251, 191, 36, 0.60); }\r\n 100% { transform: scale(1.04); border-color: rgba(251, 191, 36, 1.00); }\r\n}\r\n\r\n.mm-gift-chest.active:hover {\r\n background-color: rgba(251, 191, 36, 0.20);\r\n}\r\n\r\n/* Opened state \u2014 shows the reward inside */\r\n.mm-gift-chest.opened {\r\n border-color: rgba(52, 211, 153, 0.50);\r\n background-color: rgba(52, 211, 153, 0.08);\r\n animation: chest-open 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;\r\n}\r\n\r\n@keyframes chest-open {\r\n 0% { transform: scale(1.0) rotate(0deg); }\r\n 30% { transform: scale(0.85) rotate(-3deg); }\r\n 60% { transform: scale(1.15) rotate(3deg); }\r\n 100% { transform: scale(1.0) rotate(0deg); }\r\n}\r\n\r\n/* Chest icon (closed state) */\r\n.mm-chest-icon {\r\n font-size: 64px;\r\n animation: chest-bounce 1.2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes chest-bounce {\r\n 0%, 100% { transform: translateY(0px); }\r\n 50% { transform: translateY(-6px); }\r\n}\r\n\r\n.mm-chest-label {\r\n font-size: 11px;\r\n font-weight: 900;\r\n color: rgba(251, 191, 36, 0.85);\r\n letter-spacing: 0.2em;\r\n margin-top: 4px;\r\n}\r\n\r\n/* Gift icon (opened state) */\r\n.mm-gift-icon {\r\n font-size: 48px;\r\n animation: gift-reveal 0.6s ease-out both;\r\n}\r\n\r\n@keyframes gift-reveal {\r\n 0% { opacity: 0; transform: scale(0.3); }\r\n 60% { opacity: 1; transform: scale(1.2); }\r\n 100% { opacity: 1; transform: scale(1.0); }\r\n}\r\n\r\n.mm-gift-name {\r\n font-size: 15px;\r\n font-weight: 900;\r\n color: rgba(52, 211, 153, 0.95);\r\n letter-spacing: 0.05em;\r\n text-align: center;\r\n}\r\n\r\n.mm-gift-desc {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: rgba(255, 255, 255, 0.795);\r\n text-align: center;\r\n //line-height: 10.3;\r\n}\r\n\r\n/* \u0022Let\u0027s play\u0022 close button \u2014 appears when all chests opened */\r\n.mm-gift-close {\r\n background-color: rgba(109, 40, 217, 0.50);\r\n border: 1px solid rgba(167, 139, 250, 0.70);\r\n border-radius: 12px;\r\n color: white;\r\n font-size: 16px;\r\n font-weight: 900;\r\n padding: 14px 32px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n letter-spacing: 0.12em;\r\n margin-top: 12px;\r\n animation: close-appear 0.5s ease-out both;\r\n}\r\n\r\n@keyframes close-appear {\r\n 0% { opacity: 0; transform: translateY(10px); }\r\n 100% { opacity: 1; transform: translateY(0px); }\r\n}\r\n\r\n.mm-gift-close:hover {\r\n background-color: rgba(109, 40, 217, 0.70);\r\n}\r\n\r\n/* Confettis overlay (when gifts) */\r\n.mm-confetti-wrap {\r\n position: absolute; /* \u2190 fixed instead of absolute */\r\n top: -20px;\r\n left: 0;\r\n right: 0;\r\n height: 120vh; /* \u2190 taller than screen */\r\n pointer-events: none;\r\n overflow: visible; /* \u2190 allow pieces to fall below card */\r\n z-index: 198; /* \u2190 below the gift card (z-index 100) but above bg (99) */\r\n}\r\n\r\n.mm-confetti-piece {\r\n position: absolute;\r\n top: -10px;\r\n border-radius: 2px;\r\n opacity: 0;\r\n animation-name: confetti-fall;\r\n animation-timing-function: ease-in;\r\n animation-iteration-count: infinite; /* \u2190 loops forever */\r\n pointer-events: none;\r\n}\r\n\r\n@keyframes confetti-fall {\r\n 0% { opacity: 0; transform: translateY(-10px) rotate(0deg); }\r\n 10% { opacity: 1; }\r\n 90% { opacity: 0.6; transform: translateY(600px) rotate(540deg); }\r\n 100% { opacity: 0; transform: translateY(700px) rotate(600deg); }\r\n}\r\n\r\n/* ================================================= */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SHOP CATALOG \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* ================================================= */\r\n\r\n/* Blast pattern hint \u2014 small label below bomb name */\r\n.mm-bomb-hint {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: rgba(167,139,250,0.60);\r\n letter-spacing: 0.08em;\r\n text-align: center;\r\n text-transform: uppercase;\r\n}\r\n\r\n/* Trial badge \u2014 shown when player still has trial runs */\r\n.mm-bomb-trial-badge {\r\n font-size: 11px;\r\n font-weight: 800;\r\n color: rgba(251,191,36,0.85);\r\n background-color: rgba(251,191,36,0.08);\r\n border: 1px solid rgba(251,191,36,0.25);\r\n border-radius: 6px;\r\n padding: 4px 8px;\r\n text-align: center;\r\n flex-shrink: 0;\r\n justify-content: center;\r\n word-spacing: 0.1em; \r\n}\r\n\r\n/* Bomb cards \u2014 taller than modifier cards to fit hint \u002B trial badge */\r\n.mm-bomb-card {\r\n height: auto;\r\n min-height: 200px; /* same as modifier cards \u2014 won\u0027t shrink below this */\r\n}\r\n\r\n// wraps the badge and button, to push them at the bottom\r\n.mm-bomb-footer {\r\n margin-top: 60px; /* pushes to bottom */\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n width: 100%;\r\n}\r\n\r\n/* ================================================= */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 CONSUMABLE TAB \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* ================================================= */\r\n\r\n/* Consumable cards \u2014 same as bomb cards */\r\n.mm-consumable-card {\r\n height: auto;\r\n min-height: 230px;\r\n}\r\n\r\n/* Stock badge \u2014 shows how many you own */\r\n.mm-consumable-stock {\r\n font-size: 11px;\r\n font-weight: 800;\r\n color: rgba(52,211,153,0.85);\r\n background-color: rgba(52,211,153,0.08);\r\n border: 1px solid rgba(52,211,153,0.25);\r\n border-radius: 6px;\r\n padding: 4px 8px;\r\n text-align: center;\r\n}\r\n\r\n/* ================================================= */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Pet display card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* ================================================= */\r\n.mm-pet-display {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 24px;\r\n background-color: rgba(255,255,255,0.03);\r\n border: 1px solid rgba(255,255,255,0.07);\r\n border-radius: 16px;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.mm-pet-emoji {\r\n font-size: 72px;\r\n animation: pet-idle 2s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes pet-idle {\r\n 0% { transform: translateY(0px) scale(1.0); }\r\n 100% { transform: translateY(-8px) scale(1.05); }\r\n}\r\n\r\n.mm-pet-name {\r\n font-size: 20px;\r\n font-weight: 900;\r\n color: white;\r\n}\r\n\r\n.mm-pet-level {\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: rgba(167,139,250,0.70);\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n}\r\n\r\n/* XP progress bar */\r\n.mm-pet-xp-track {\r\n width: 100%;\r\n height: 8px;\r\n background-color: rgba(255,255,255,0.06);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n}\r\n\r\n.mm-pet-xp-fill {\r\n height: 100%;\r\n background-color: #a78bfa;\r\n border-radius: 4px;\r\n transition: width 0.6s ease;\r\n}\r\n\r\n.mm-pet-xp-label {\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: rgba(255,255,255,0.35);\r\n}\r\n\r\n/* Next evolution preview */\r\n.mm-pet-next {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 16px;\r\n background-color: rgba(255,255,255,0.02);\r\n border: 1px dashed rgba(255,255,255,0.08);\r\n border-radius: 12px;\r\n}\r\n\r\n.mm-pet-next-label {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: rgba(255,255,255,0.30);\r\n text-transform: uppercase;\r\n letter-spacing: 0.12em;\r\n}\r\n\r\n.mm-pet-next-emoji {\r\n font-size: 36px;\r\n opacity: 0.35;\r\n filter: grayscale(100%);\r\n}\r\n\r\n.mm-pet-next-hint {\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: rgba(255,255,255,0.25);\r\n}\r\n\r\n/* ----------------------------------------- */\r\n/* ---------- Pet Big In Menu Tab ---------- */\r\n/* ----------------------------------------- */\r\n\r\n.mm-pet-unlock-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(4, 1, 13, 0.88);\r\n z-index: 110;\r\n pointer-events: all;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n animation: welcome-bg-fade 0.4s ease-out both;\r\n}\r\n.mm-pet-unlock-popup {\r\n position: relative;\r\n top: 180px; \r\n left: 340px;\r\n background-color: rgba(20, 8, 50, 0.98);\r\n border: 2px solid rgba(167,139,250,0.55);\r\n border-radius: 20px;\r\n box-shadow: 6px 6px 0px rgba(20,0,60,0.80);\r\n padding: 48px 64px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n pointer-events: all;\r\n animation: gift-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;\r\n}\r\n\r\n/* \u2500\u2500 Pet card \u2014 replaces the entire farm tab content \u2500\u2500 */\r\n\r\n.mm-pet-card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 0px;\r\n width: 100%;\r\n}\r\n\r\n.mm-pet-unlock-eyebrow {\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 0.28em;\r\n color: rgba(167,139,250,0.70);\r\n text-transform: uppercase;\r\n}\r\n\r\n/* \u2500\u2500 Big pet emoji \u2014 hero display \u2500\u2500 */\r\n.mm-pet-hero-emoji {\r\n font-size: 140px;\r\n animation: pet-float 3s ease-in-out infinite alternate;\r\n margin-bottom: 4px;\r\n margin-top: 20px;\r\n}\r\n.mm-pet-emoji image\r\n{\r\n width: 72px;\r\n height: 72px;\r\n}\r\n\r\n.mm-pet-hero-emoji image\r\n{\r\n width: 130px;\r\n height: 130px;\r\n}\r\n\r\n@keyframes pet-float {\r\n 0% { transform: translateY(0px) scale(1.0); }\r\n 100% { transform: translateY(-10px) scale(1.04); }\r\n}\r\n\r\n/* \u2500\u2500 Pet name \u2500\u2500 */\r\n.mm-pet-hero-name {\r\n font-size: 26px;\r\n font-weight: 900;\r\n color: #ffffff;\r\n letter-spacing: 0.04em;\r\n text-shadow: 2px 2px 0px rgba(80,30,180,0.60);\r\n}\r\n\r\n/* \u2500\u2500 Level badge \u2500\u2500 */\r\n.mm-pet-hero-level {\r\n font-size: 11px;\r\n font-weight: 800;\r\n color: rgba(167,139,250,0.65);\r\n text-transform: uppercase;\r\n letter-spacing: 0.22em;\r\n margin-top: 2px;\r\n margin-bottom: 14px;\r\n}\r\n\r\n\r\n.mm-pet-unlock-title {\r\n font-size: 28px;\r\n font-weight: 900;\r\n color: #ffffff;\r\n letter-spacing: 0.04em;\r\n}\r\n\r\n.mm-pet-unlock-desc {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: rgba(200,185,255,0.60);\r\n text-align: center;\r\n letter-spacing: 0.04em;\r\n}\r\n\r\n.mm-pet-unlock-egg {\r\n font-size: 96px;\r\n animation: pet-float 2s ease-in-out infinite alternate;\r\n margin: 8px 0;\r\n}\r\n\r\n/* \u2500\u2500 XP bar track \u2500\u2500 */\r\n.mm-pet-xp-track {\r\n width: 100%;\r\n height: 10px;\r\n background-color: rgba(255,255,255,0.05);\r\n border-radius: 5px;\r\n border: 1px solid rgba(120,80,220,0.20);\r\n overflow: hidden;\r\n margin-bottom: 6px;\r\n}\r\n\r\n.mm-pet-xp-fill {\r\n height: 100%;\r\n background-color: #7c3aed;\r\n border-radius: 5px;\r\n transition: width 0.8s ease;\r\n box-shadow: 2px 0px 0px rgba(167,139,250,0.40);\r\n}\r\n\r\n.mm-pet-xp-label {\r\n font-size: 10px;\r\n font-weight: 600;\r\n color: rgba(180,160,240,0.40);\r\n letter-spacing: 0.08em;\r\n margin-bottom: 20px;\r\n align-self: flex-end;\r\n}\r\n\r\n/* \u2500\u2500 Stat bonuses grid \u2500\u2500 */\r\n.mm-pet-stats {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0px;\r\n width: 100%;\r\n border: 2px solid rgba(120,80,220,0.25);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: 4px 4px 0px rgba(0,0,0,0.55);\r\n}\r\n\r\n.mm-pet-stat-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 10px 16px;\r\n border-bottom: 1px solid rgba(120,80,220,0.10);\r\n background-color: rgba(10,4,28,0.70);\r\n gap: 10px;\r\n}\r\n\r\n.mm-pet-stat-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.mm-pet-stat-row:hover {\r\n background-color: rgba(80,40,160,0.12);\r\n}\r\n\r\n.mm-pet-stat-icon {\r\n font-size: 15px;\r\n width: 22px;\r\n text-align: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.mm-pet-stat-lbl {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: rgba(180,160,240,0.55);\r\n text-transform: uppercase;\r\n letter-spacing: 0.10em;\r\n flex: 1;\r\n}\r\n\r\n.mm-pet-stat-val {\r\n font-size: 13px;\r\n font-weight: 900;\r\n color: #4ade80;\r\n text-shadow: 1px 1px 0px rgba(0,40,15,0.80);\r\n letter-spacing: 0.04em;\r\n}\r\n\r\n/* Locked stat \u2014 not yet unlocked at current level */\r\n.mm-pet-stat-val.locked {\r\n color: rgba(255,255,255,0.15);\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 0.06em;\r\n}\r\n\r\n/* \u2500\u2500 Next evolution teaser \u2500\u2500 */\r\n.mm-pet-next-hint {\r\n margin-top: 14px;\r\n font-size: 10px;\r\n font-weight: 700;\r\n color: rgba(160,130,250,0.30);\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n align-self: center;\r\n}\r\n\r\n/* Name pet */\r\n.mm-pet-name-edit {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 6px;\r\n pointer-events: all;\r\n}\r\n\r\n.mm-pet-name-prompt {\r\n font-size: 10px;\r\n font-weight: 700;\r\n color: rgba(167,139,250,0.60);\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n}\r\n\r\n.mm-pet-name-field {\r\n background-color: rgba(10,4,28,0.95);\r\n border: 2px solid rgba(167,139,250,0.70);\r\n border-radius: 8px;\r\n padding: 10px 18px;\r\n min-width: 240px;\r\n box-shadow: 3px 3px 0px rgba(0,0,0,0.55), inset 0px 1px 0px rgba(167,139,250,0.10);\r\n animation: name-field-pulse 1.5s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes name-field-pulse {\r\n 0% { border-color: rgba(167,139,250,0.50); }\r\n 100% { border-color: rgba(167,139,250,1.00); }\r\n}\r\n\r\n.mm-pet-name-cursor {\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: #ffffff;\r\n letter-spacing: 0.04em;\r\n min-height: 28px;\r\n}\r\n\r\n.mm-pet-name-hint {\r\n font-size: 9px;\r\n font-weight: 600;\r\n color: rgba(167,139,250,0.35);\r\n letter-spacing: 0.10em;\r\n text-align: center;\r\n}\r\n\r\n.mm-pet-name-buttons {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 8px;\r\n margin-top: 4px;\r\n}\r\n\r\n.mm-pet-name-confirm {\r\n background-color: rgba(20,80,50,0.60);\r\n border: 2px solid rgba(52,211,153,0.60);\r\n border-radius: 6px;\r\n box-shadow: 2px 2px 0px rgba(0,30,15,0.60);\r\n color: #4ade80;\r\n font-size: 14px;\r\n font-weight: 900;\r\n padding: 8px 16px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n}\r\n\r\n.mm-pet-name-cancel {\r\n background-color: rgba(60,10,10,0.50);\r\n border: 2px solid rgba(248,113,113,0.40);\r\n border-radius: 6px;\r\n box-shadow: 2px 2px 0px rgba(40,0,0,0.55);\r\n color: rgba(248,113,113,0.80);\r\n font-size: 14px;\r\n font-weight: 900;\r\n padding: 8px 16px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n}\r\n\r\n.mm-pet-name-preview {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #ffffff;\r\n background-color: rgba(10,4,28,0.95);\r\n border: 2px solid rgba(167,139,250,0.70);\r\n border-radius: 8px;\r\n padding: 10px 18px;\r\n min-width: 240px;\r\n min-height: 46px;\r\n letter-spacing: 0.04em;\r\n animation: name-field-pulse 1.2s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes name-field-pulse {\r\n 0% { border-color: rgba(167,139,250,0.40); }\r\n 100% { border-color: rgba(167,139,250,1.00); }\r\n}\r\n\r\n/* hide the actual TextEntry so it doesn\u0027t show as a floating box */\r\n.mm-pet-name-input {\r\n width: 240px;\r\n height: 48px;\r\n background-color: rgba(10,4,28,0.95);\r\n border: 2px solid rgba(167,139,250,0.70);\r\n border-radius: 8px;\r\n padding: 10px 18px;\r\n color: #ffffff;\r\n font-size: 20px;\r\n font-weight: 700;\r\n letter-spacing: 0.04em;\r\n pointer-events: all;\r\n animation: name-field-pulse 1.2s ease-in-out infinite alternate;\r\n box-shadow: 3px 3px 0px rgba(0,0,0,0.55);\r\n}\r\n\r\n.mm-pet-name-input-wrap {\r\n width: 240px;\r\n height: 48px;\r\n pointer-events: all;\r\n}\r\n\r\n/* Evolution pet */\r\n.mm-evo-bg {\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n z-index: 200;\r\n pointer-events: all;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 16px;\r\n background-color: #04010d;\r\n}\r\n\r\n.mm-evo-pet {\r\n font-size: 260px;\r\n}\r\n.mm-evo-pet image {\r\n width: 220px;\r\n height: 220px;\r\n}\r\n\r\n.cat-sprite {\r\n width: 64px;\r\n height: 64px;\r\n background-image: url(\u0022ui/icons/cat/cat_normal_spritesheet.png\u0022);\r\n background-repeat: no-repeat;\r\n background-size: auto 100%; // adjust if needed\r\n animation: cat-walk 0.8s steps(4) infinite; // steps(N) = N frames\r\n}\r\n\r\n@keyframes cat-walk {\r\n from { background-position: 0 0; }\r\n to { background-position: -256px 0; } // frame_width_px \u00D7 total_frames\r\n}\r\n.mm-evo-egg-icon\r\n{\r\n width: 200px;\r\n height: 200px;\r\n}\r\n\r\n.mm-evo-pet.evo-start { animation: evo-wobble 0.6s ease-in-out infinite; }\r\n.mm-evo-pet.evo-shake { animation: evo-shake 0.2s ease-in-out infinite; }\r\n.mm-evo-pet.evo-flash { font-size: 200px; }\r\n.mm-evo-pet.evo-reveal { animation: evo-appear 0.6s ease-out both; }\r\n\r\n@keyframes evo-wobble {\r\n 0% { margin-left: 0px; }\r\n 25% { margin-left: -10px; }\r\n 75% { margin-left: 10px; }\r\n 100% { margin-left: 0px; }\r\n}\r\n\r\n@keyframes evo-shake {\r\n 0% { margin-left: 0px; }\r\n 20% { margin-left: -14px; }\r\n 40% { margin-left: 14px; }\r\n 60% { margin-left: -8px; }\r\n 80% { margin-left: 8px; }\r\n 100% { margin-left: 0px; }\r\n}\r\n\r\n@keyframes evo-appear {\r\n 0% { opacity: 0; margin-top: 30px; }\r\n 100% { opacity: 1; margin-top: 0px; }\r\n}\r\n\r\n.mm-evo-flash {\r\n position: absolute;\r\n top: 0px; left: 0px; right: 0px; bottom: 0px;\r\n background-color: #ffffff;\r\n animation: evo-flash-fade 0.8s ease-out forwards;\r\n pointer-events: none;\r\n}\r\n\r\n@keyframes evo-flash-fade {\r\n 0% { opacity: 1; }\r\n 100% { opacity: 0; }\r\n}\r\n\r\n.mm-evo-name {\r\n font-size: 36px;\r\n font-weight: 900;\r\n color: #ffffff;\r\n letter-spacing: 0.06em;\r\n animation: evo-appear 0.6s ease-out both;\r\n}\r\n\r\n.mm-evo-level {\r\n font-size: 12px;\r\n font-weight: 800;\r\n letter-spacing: 0.28em;\r\n color: rgba(167,139,250,0.65);\r\n text-transform: uppercase;\r\n animation: evo-appear 0.6s ease-out 0.15s both;\r\n}\r\n\r\n@keyframes evo-text-appear {\r\n 0% { opacity: 0; margin-top: 20px; }\r\n 100% { opacity: 1; margin-top: 0px; }\r\n}\r\n\r\n.mm-evo-text {\r\n font-size: 28px;\r\n font-weight: 900;\r\n color: #ffffff;\r\n letter-spacing: 0.06em;\r\n text-align: center;\r\n text-shadow: 2px 2px 0px rgba(0,0,0,0.80);\r\n animation: evo-text-appear 0.4s ease-out both;\r\n margin-bottom: 20px;\r\n}\r\n\r\n/* Pulse the text during shake phase */\r\n.mm-evo-text.evo-shake {\r\n animation: evo-text-pulse 0.6s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes evo-text-pulse {\r\n 0% { opacity: 0.7; }\r\n 100% { opacity: 1.0; }\r\n}\r\n\r\n/* Revealed text gets a gold color */\r\n.mm-evo-text.evo-reveal {\r\n color: #fbbf24;\r\n font-size: 32px;\r\n text-shadow: 2px 2px 0px rgba(100,50,0,0.80);\r\n animation: evo-text-appear 0.5s ease-out both;\r\n}\r\n\r\n/* Edit Pet Name Button */\r\n.mm-pet-name-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n\r\n// .mm-pet-name-row:hover {\r\n// background-color: rgba(167,139,250,0.18);\r\n// border-color: rgba(167,139,250,0.55);\r\n// }\r\n\r\n.mm-pet-rename-btn:hover {\r\n background-color: rgba(167,139,250,0.15);\r\n}\r\n\r\n.mm-pet-rename-btn {\r\n font-size: 14px;\r\n background-color: rgba(20,20,50,.80);\r\n border: none;\r\n cursor: pointer;\r\n pointer-events: all;\r\n padding: 4px 4px;\r\n border-radius: 4px;\r\n transition: background-color 0.1s;\r\n}\r\n\r\n/* LEADERBOARD */ \r\n.mm-lb-mode-tabs {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n align-items: stretch;\r\n justify-content: center;\r\n gap: 6px;\r\n margin-bottom: 16px;\r\n flex-shrink: 0;\r\n position: relative;\r\n z-index: 2;\r\n}\r\n.mm-lb-mode-btn {\r\n background-color: rgba(15,8,35,0.80);\r\n border: 2px solid rgba(80,50,140,0.35);\r\n border-radius: 7px;\r\n color: rgba(200,180,255,0.45);\r\n font-size: 12px;\r\n font-weight: 700;\r\n padding: 10px 16px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n transition: background-color 0.08s, border-color 0.08s;\r\n flex: 0 0 auto;\r\n box-sizing: border-box;\r\n min-height: 36px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n white-space: nowrap;\r\n}\r\n\r\n.mm-lb-mode-btn:hover {\r\n background-color: rgba(80,40,160,0.20);\r\n border-color: rgba(140,100,255,0.45);\r\n color: rgba(220,200,255,0.80);\r\n}\r\n\r\n.mm-lb-mode-btn.on {\r\n background-color: rgba(80,30,180,0.28);\r\n border-color: rgba(167,139,250,0.65);\r\n color: #c4b5fd;\r\n box-shadow: 3px 3px 0px #1a0640;\r\n}\r\n\r\n.mm-lb-pet-badge {\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: rgba(167,139,250,0.70);\r\n background-color: rgba(167,139,250,0.08);\r\n border: 1px solid rgba(167,139,250,0.20);\r\n border-radius: 5px;\r\n padding: 2px 7px;\r\n flex: 0 0 auto;\r\n max-width: 90px;\r\n box-sizing: border-box;\r\n text-align: center;\r\n}\r\n\r\n.mm-lb-pet-badge-img {\r\n width: 14px;\r\n height: 14px;\r\n vertical-align: middle;\r\n}\r\n\r\n.mm-lb-name {\r\n flex-grow: 1;\r\n flex-shrink: 1;\r\n flex-basis: 200px;\r\n min-width: 140px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: rgba(220,210,255,0.70);\r\n letter-spacing: 0.04em;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* The top best Chain Reaction Sequences (\u002Bscore) */\r\n.mm-lb-name-col {\r\n flex-grow: 1;\r\n flex-shrink: 1;\r\n flex-basis: 200px;\r\n min-width: 140px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n overflow: hidden;\r\n}\r\n\r\n.mm-lb-chain-title {\r\n font-size: 10px;\r\n font-weight: 700;\r\n color: rgba(251,191,36,0.65);\r\n letter-spacing: 0.08em;\r\n}\r\n\r\n.mm-lb-chain-badge {\r\n font-size: 12px;\r\n font-weight: 900;\r\n color: rgba(196,181,253,0.90);\r\n background-color: rgba(139,92,246,0.12);\r\n border: 1px solid rgba(139,92,246,0.25);\r\n border-radius: 5px;\r\n padding: 2px 8px;\r\n flex: 0 0 auto;\r\n min-width: 54px;\r\n max-width: 70px;\r\n text-align: center;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* TOP 100 CONTRIBUTORS FORCE PANEL PROGRESS BAR (left side) */\r\n/* \u2500\u2500 Force panel on left side \u2500\u2500 */\r\n.mm-force-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n width: 280px;\r\n padding: 12px 16px;\r\n background-color: rgba(10,4,28,0.85);\r\n border: 2px solid rgba(251,191,36,0.25);\r\n border-radius: 12px;\r\n box-shadow: 4px 4px 0px rgba(0,0,0,0.60);\r\n margin-top: 8px;\r\n animation: mm-enter 0.6s ease-out 0.6s both;\r\n}\r\n\r\n.mm-force-panel-lbl {\r\n font-size: 10px;\r\n font-weight: 800;\r\n color: rgba(251,191,36,0.70);\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n}\r\n\r\n.mm-force-panel-sub {\r\n font-size: 10px;\r\n font-weight: 600;\r\n color: rgba(255,255,255,0.25);\r\n letter-spacing: 0.06em;\r\n}\r\n\r\n.mm-force-bar-track {\r\n width: 100%;\r\n height: 8px;\r\n background-color: rgba(255,255,255,0.06);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n}\r\n\r\n.mm-force-bar-fill {\r\n height: 100%;\r\n background-color: rgba(251,191,36,0.85);\r\n border-radius: 4px;\r\n transition: width 0.8s ease;\r\n}\r\n\r\n/* \u2500\u2500 Force summary inside leaderboard tab \u2500\u2500 */\r\n.mm-force-summary {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n padding: 10px 14px;\r\n background-color: rgba(251,191,36,0.06);\r\n border: 1px solid rgba(251,191,36,0.20);\r\n border-radius: 8px;\r\n margin-top: 8px;\r\n margin-bottom: 14px;\r\n position: relative;\r\n z-index: 1;\r\n flex-shrink: 0;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.mm-force-summary-lbl {\r\n font-size: 10px;\r\n font-weight: 800;\r\n color: rgba(251,191,36,0.70);\r\n letter-spacing: 0.16em;\r\n text-transform: uppercase;\r\n}\r\n\r\n.mm-force-summary-pct {\r\n font-size: 12px;\r\n font-weight: 900;\r\n color: rgba(251,191,36,0.90);\r\n align-self: flex-end;\r\n}\r\n\r\n/* \u2500\u2500 Mini contribution bar per row \u2500\u2500 */\r\n.mm-force-bar-mini-wrap {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 6px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n width: 110px;\r\n}\r\n\r\n.mm-force-bar-mini {\r\n flex: 1;\r\n height: 6px;\r\n background-color: rgba(255,255,255,0.06);\r\n border-radius: 3px;\r\n overflow: hidden;\r\n}\r\n\r\n.mm-force-bar-mini-fill {\r\n height: 100%;\r\n background-color: rgba(251,191,36,0.70);\r\n border-radius: 3px;\r\n}\r\n\r\n.mm-force-pct {\r\n font-size: 10px;\r\n font-weight: 700;\r\n color: rgba(251,191,36,0.70);\r\n width: 36px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n text-align: right;\r\n}\r\n\r\n\r\n/* HALL OF FAME (TOP 3 PLAYERS) left side */\r\n.mm-hall-of-fame {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0px;\r\n width: 280px;\r\n background-color: rgba(10,4,28,0.85);\r\n border: 2px solid rgba(251,191,36,0.25);\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 4px 4px 0px rgba(0,0,0,0.60);\r\n margin-top: 8px;\r\n animation: mm-enter 0.6s ease-out 0.55s both;\r\n}\r\n\r\n.mm-hof-title {\r\n font-size: 10px;\r\n font-weight: 800;\r\n color: rgba(251,191,36,0.70);\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n padding: 10px 16px 8px;\r\n border-bottom: 1px solid rgba(251,191,36,0.12);\r\n}\r\n\r\n.mm-hof-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 9px 16px;\r\n border-bottom: 1px solid rgba(255,255,255,0.04);\r\n}\r\n\r\n.mm-hof-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.mm-hof-medal {\r\n font-size: 16px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.mm-hof-name {\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: rgba(220,210,255,0.75);\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.mm-hof-score {\r\n font-size: 12px;\r\n font-weight: 900;\r\n color: rgba(251,191,36,0.85);\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Pet unlocked visual (tab) */\r\n.mm-tab-locked {\r\n position: relative;\r\n border-color: rgba(251,191,36,0.30);\r\n background-color: rgba(251,191,36,0.06);\r\n}\r\n\r\n.mm-tab-lock-hint {\r\n display: contents;\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: rgba(251,191,36,0.55);\r\n letter-spacing: 0.08em;\r\n margin-top: 2px;\r\n}\r\n\r\n.mm-pet-locked-card {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 40px 30px;\r\n}\r\n\r\n.mm-pet-locked-chest {\r\n font-size: 80px;\r\n animation: chest-card-idle 2s ease-in-out infinite alternate;\r\n}\r\n\r\n.mm-pet-locked-title {\r\n font-size: 28px;\r\n font-weight: 900;\r\n color: rgba(255,255,255,0.20);\r\n letter-spacing: 0.3em;\r\n}\r\n\r\n.mm-pet-locked-desc {\r\n word-spacing: 1px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: rgba(255,255,255,0.40);\r\n}\r\n\r\n.mm-pet-locked-count {\r\n color: #fbbf24;\r\n font-weight: 900;\r\n padding: 0px 6px;\r\n margin-top: -2px;\r\n}\r\n\r\n.mm-pet-locked-progress {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n width: 100%;\r\n}\r\n\r\n.mm-pet-locked-bar {\r\n width: 100%;\r\n height: 6px;\r\n background-color: rgba(255,255,255,0.06);\r\n border-radius: 3px;\r\n position: relative;\r\n}\r\n\r\n.mm-pet-locked-fill {\r\n position: absolute;\r\n top: 0; left: 0; bottom: 0;\r\n background-color: #fbbf24;\r\n border-radius: 3px;\r\n min-width: 0px;\r\n}\r\n\r\n.mm-pet-locked-pips {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 12px;\r\n}\r\n\r\n.mm-pet-locked-pip {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n border: 2px rgba(255,255,255,0.12);\r\n background-color: rgba(255,255,255,0.04);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n font-weight: 800;\r\n color: rgba(255,255,255,0.25);\r\n}\r\n\r\n.mm-pet-locked-pip.done {\r\n border-color: rgba(251,191,36,0.60);\r\n background-color: rgba(251,191,36,0.12);\r\n color: #fbbf24;\r\n}\r\n\r\n/* ------------------------------------*/\r\n/* ---------- Community Tab ---------- */\r\n/* ------------------------------------*/\r\n\r\n.mm-comm-from {\r\n font-size: 9px;\r\n font-weight: 900;\r\n letter-spacing: 0.28em;\r\n color: rgba(251,191,36,0.50);\r\n text-transform: uppercase;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.mm-comm-greeting {\r\n font-size: 22px;\r\n font-weight: 900;\r\n color: rgba(255,255,255,0.92);\r\n margin-bottom: 10px;\r\n}\r\n\r\n.mm-comm-body {\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.55);\r\n margin-bottom: 16px;\r\n font-style: italic;\r\n}\r\n\r\n.mm-comm-devnote {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n background-color: rgba(251,191,36,0.05);\r\n border: 1px solid rgba(251,191,36,0.20);\r\n border-left-width: 3px;\r\n border-left-color: rgba(251,191,36,0.60);\r\n border-radius: 8px;\r\n padding: 10px 14px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.mm-comm-devnote-label {\r\n font-size: 9px;\r\n font-weight: 900;\r\n color: rgba(251,191,36,0.70);\r\n letter-spacing: 0.22em;\r\n}\r\n\r\n.mm-comm-devnote-text {\r\n font-size: 13px;\r\n color: rgba(255,255,255,0.65);\r\n font-style: italic;\r\n}\r\n\r\n.mm-letter-divider {\r\n height: 1px;\r\n background-color: rgba(255,255,255,0.06);\r\n margin: 14px 0;\r\n}\r\n\r\n.mm-letter-section-title {\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: rgba(255,255,255,0.30);\r\n letter-spacing: 0.12em;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.mm-community-event-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 8px;\r\n padding-bottom: 8px;\r\n border-bottom: 1px solid rgba(255,255,255,0.04);\r\n}\r\n\r\n.mm-event-badge {\r\n font-size: 9px;\r\n font-weight: 800;\r\n padding: 3px 8px;\r\n border-radius: 4px;\r\n min-width: 54px;\r\n text-align: center;\r\n}\r\n\r\n.mm-badge-green { background-color: rgba(52,211,153,0.12); color: rgba(52,211,153,0.95); border: 1px solid rgba(52,211,153,0.25); }\r\n.mm-badge-purple { background-color: rgba(167,139,250,0.12); color: rgba(167,139,250,0.95); border: 1px solid rgba(167,139,250,0.25); }\r\n.mm-badge-yellow { background-color: rgba(251,191,36,0.12); color: rgba(251,191,36,0.95); border: 1px solid rgba(251,191,36,0.25); }\r\n.mm-badge-gray { background-color: rgba(255,255,255,0.04); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }\r\n\r\n.mm-event-text {\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.55);\r\n}\r\n\r\n.mm-comm-discord-row {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n}\r\n\r\n.mm-comm-discord-text {\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.35);\r\n font-style: italic;\r\n}\r\n\r\n.mm-discord-btn {\r\n background-color: rgba(88,101,242,0.85);\r\n border: 1px solid rgba(120,130,255,0.50);\r\n border-radius: 8px;\r\n color: rgba(255,255,255,0.95);\r\n font-size: 13px;\r\n font-weight: 800;\r\n padding: 11px 22px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n letter-spacing: 0.05em;\r\n box-shadow: 3px 3px 0px rgba(20,25,80,0.70);\r\n}\r\n\r\n.mm-discord-btn:hover {\r\n background-color: rgba(88,101,242,1.0);\r\n}\r\n\r\n.mm-discord-btn.copied {\r\n background-color: rgba(52, 211, 153, 0.20);\r\n border-color: rgba(52, 211, 153, 0.50);\r\n color: rgba(52, 211, 153, 0.90);\r\n}\r\n\r\n/* CREDITS PAGE */\r\n.mm-credits-section {\r\n margin-bottom: 28px;\r\n padding-bottom: 16px;\r\n border-bottom: 1px solid rgba(167,139,250,0.12);\r\n}\r\n\r\n.mm-credits-section.last {\r\n border-bottom: none;\r\n}\r\n\r\n.mm-credits-role {\r\n font-size: 13px;\r\n color: rgba(167,139,250,0.7);\r\n margin-bottom: 10px;\r\n margin-right: 5px;\r\n}\r\n\r\n.mm-credits-name {\r\n font-size: 15px;\r\n color: rgba(255,255,255,0.9);\r\n margin-bottom: 6px;\r\n margin-right: 5px;\r\n}\r\n\r\n.mm-credits-footer {\r\n margin-top: 28px;\r\n font-size: 12px;\r\n color: rgba(255,255,255,0.3);\r\n}\r\n\r\n.mm-musiclink-btn{\r\n background-color:#b82525;\r\n border: 1px solid rgba(120,130,255,0.50);\r\n border-radius: 8px;\r\n color: rgba(255,255,255,0.95);\r\n font-size: 13px;\r\n font-weight: 800;\r\n padding: 5px 10px;\r\n margin-top: -10px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n letter-spacing: 0.05em;\r\n box-shadow: 3px 3px 0px rgba(240, 80, 80, 0.712);\r\n}\r\n\r\n/* CREDITS PAGE */\r\n.mm-multiplayer.mm-mode-locked {\r\n opacity: 0.35;\r\n cursor: default;\r\n animation: none;\r\n}\r\n\r\n.survival-loadout-card {\r\n max-width: 620px;\r\n max-height: 85vh; /* cap relative to viewport */\r\n overflow-y: auto; /* let the whole card scroll if content is tall */\r\n padding: 32px 48px; /* slightly tighter than default mm-welcome-gift padding */\r\n}\r\n\r\n.survival-loadout-hint {\r\n font-size: 12px;\r\n font-weight: 800;\r\n color: rgba(251,191,36,0.75);\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n margin-bottom: 18px;\r\n}\r\n\r\n.survival-bomb-grid {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n justify-content: center;\r\n overflow-y: visible;\r\n}\r\n\r\n.survival-bomb-card {\r\n position: relative;\r\n width: 140px;\r\n background-color: rgba(15, 8, 32, 0.95);\r\n border: 2px solid rgba(140,110,230,0.40);\r\n border-radius: 12px;\r\n padding: 18px 14px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n transition: border-color 0.12s, background-color 0.12s, transform 0.08s;\r\n}\r\n\r\n.survival-bomb-card:hover {\r\n border-color: rgba(180,150,255,0.70);\r\n background-color: rgba(70,30,150,0.30);\r\n transform: translateY(-2px);\r\n}\r\n\r\n.survival-bomb-card.selected {\r\n border-color: rgba(74,222,128,0.90);\r\n background-color: rgba(34,150,90,0.18);\r\n box-shadow: 0px 0px 18px rgba(74,222,128,0.20);\r\n}\r\n\r\n.survival-bomb-check {\r\n position: absolute;\r\n top: 8px;\r\n right: 10px;\r\n font-size: 16px;\r\n font-weight: 900;\r\n color: #4ade80;\r\n text-shadow: 0px 1px 2px rgba(0,0,0,0.6);\r\n}\r\n\r\n.survival-bomb-icon {\r\n font-size: 36px;\r\n line-height: 1;\r\n}\r\n\r\n.survival-bomb-name {\r\n font-size: 16px;\r\n font-weight: 900;\r\n color: #ffffff;\r\n letter-spacing: 0.02em;\r\n}\r\n\r\n.survival-bomb-hint {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: rgba(220,210,255,0.75);\r\n text-align: center;\r\n line-height: 1.4;\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"Game/Shop/PetVisuals.cs","FileName":"PetVisuals.cs","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"using Sandbox;\r\nusing System;\r\npublic static class PetVisuals\r\n{\r\n public static string GetImagePath(int level, bool unlockShown, bool catFrameToggle, string reactionOverride = null)\r\n {\r\n if (!unlockShown) return null;\r\n\r\n if (level \u003E= 2 \u0026\u0026 !string.IsNullOrEmpty(reactionOverride))\r\n return reactionOverride;\r\n\r\n return level switch\r\n {\r\n 1 =\u003E \u0022ui/icons/egg/egg_1.png\u0022,\r\n 2 =\u003E catFrameToggle ? \u0022ui/icons/cat/Cat_Normal_Pose2.png\u0022 : \u0022ui/icons/cat/Cat_Normal_Pose1.png\u0022,\r\n 3 =\u003E catFrameToggle ? \u0022ui/icons/wolf/Wolf_Normal_Pos2.png\u0022 : \u0022ui/icons/wolf/Wolf_Normal_Pos1.png\u0022,\r\n 4 =\u003E catFrameToggle ? \u0022ui/icons/tiger/Tiger_NormalPose_2.png\u0022 : \u0022ui/icons/tiger/Tiger_NormalPose_1.png\u0022,\r\n 5 =\u003E catFrameToggle ? \u0022ui/icons/babydrake/Baby_Drake_Normal_2.png\u0022 : \u0022ui/icons/babydrake/Baby_Drake_Normal_1.png\u0022,\r\n 6 =\u003E catFrameToggle ? \u0022ui/icons/dragon/Dragon_NormalPose_2.png\u0022 : \u0022ui/icons/dragon/Dragon_NormalPose_1.png\u0022,\r\n _ =\u003E null\r\n };\r\n }\r\n\r\n public static string[] GetReactionSprites(int level) =\u003E level switch\r\n {\r\n 2 =\u003E new[] { \u0022ui/icons/cat/Cat_Shocked_Pose1.png\u0022, \u0022ui/icons/cat/Cat_Shocked_Pose2.png\u0022 },\r\n 3 =\u003E new[] { \u0022ui/icons/wolf/Wolf_Shocked_Pos1.png\u0022, \u0022ui/icons/wolf/Wolf_Shocked_Pos2.png\u0022 },\r\n 4 =\u003E new[] { \u0022ui/icons/tiger/Tiger_Shocked_Pos1.png\u0022, \u0022ui/icons/tiger/Tiger_Shocked_Pos2.png\u0022 },\r\n 5 =\u003E new[] { \u0022ui/icons/babydrake/Baby_Drake_Shocked_Pos1.png\u0022, \u0022ui/icons/babydrake/Baby_Drake_Shocked_Pos2.png\u0022 },\r\n 6 =\u003E new[] { \u0022ui/icons/dragon/Dragon_NormalPose_1.png\u0022, \u0022ui/icons/dragon/Dragon_NormalPose_2.png\u0022 },\r\n _ =\u003E Array.Empty\u003Cstring\u003E()\r\n };\r\n\r\n public static string GetEvolutionImage(int level, bool catFrameToggle) =\u003E\r\n GetImagePath(level, true, catFrameToggle); // reuse same table, unlockShown forced true since evo cinematic always shows the pet\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"ui/menupanel.razor.scss","FileName":"menupanel.razor.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"\r\nmenupanel\r\n{\r\n position: absolute;\r\n z-index: 1000;\r\n pointer-events: all;\r\n font-size: 12px;\r\n flex-shrink: 0;\r\n\r\n .background\r\n {\r\n position: absolute;\r\n left: -5000px;\r\n right: -5000px;\r\n top: -5000px;\r\n bottom: -5000px;\r\n }\r\n\r\n \u003E .inner\r\n {\r\n min-width: 200px;\r\n min-height: 20px;\r\n flex-direction: column;\r\n font-family: Poppins;\r\n font-weight: bold;\r\n border-radius: 10px;\r\n box-shadow: 5px 5px 30px #000e;\r\n background-color: #2a2a2a;\r\n flex-shrink: 0;\r\n\r\n .spacer\r\n {\r\n height: 1px;\r\n background-color: #0005;\r\n }\r\n\r\n .option\r\n {\r\n color: #fffa;\r\n padding: 0px 8px;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n height: 32px;\r\n\r\n \u0026:first-child\r\n {\r\n border-top-left-radius: 10px;\r\n border-top-right-radius: 10px;\r\n }\r\n\r\n \u0026:last-child\r\n {\r\n border-bottom-left-radius: 10px;\r\n border-bottom-right-radius: 10px;\r\n }\r\n\r\n .icon\r\n {\r\n padding: 8px;\r\n font-family: Material Icons;\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n .text\r\n {\r\n padding: 8px;\r\n flex-shrink: 0;\r\n }\r\n\r\n \u0026:hover\r\n {\r\n background-color: #3472e6;\r\n color: #f5f8fe;\r\n }\r\n }\r\n }\r\n}\r\n"},{"Ident":"playnplay.10_xplosion","Path":"ui/controls/vectorcontrol.cs.scss","FileName":"vectorcontrol.cs.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"VectorControl\r\n{\r\n\tgap: 2px;\r\n\tflex-grow: 1;\r\n}\r\n\r\nVectorControl NumberEntry\r\n{\r\n\tflex-basis: 50%;\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"ui/controls/color/colorhuecontrol.cs.scss","FileName":"colorhuecontrol.cs.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"ColorHueControl\r\n{\r\n\tgap: 0.5rem;\r\n\tflex-grow: 1;\r\n\tpointer-events: all;\r\n\tbackground: linear-gradient( to right, red, yellow, lime, cyan, blue, magenta, red );\r\n\tborder-radius: 4px;\r\n\tpadding: 2px;\r\n\theight: 12px;\r\n\tposition: relative;\r\n\tcursor: pointer;\r\n\tmargin: 10px 0;\r\n\tborder: 1px solid #333;\r\n\r\n\t\u0026:hover\r\n\t{\r\n\t\tborder: 1px solid #08f;\r\n\t}\r\n\r\n\t\u0026:active\r\n\t{\r\n\t\tborder: 1px solid #fff;\r\n\t}\r\n\r\n\t.handle\r\n\t{\r\n\t\ttop: -5px;\r\n\t\tbottom: -5px;\r\n\t\taspect-ratio: 1;\r\n\t\tborder-radius: 100px;\r\n\t\tborder: 2px solid #444;\r\n\t\tposition: absolute;\r\n\t\tbackground-color: white;\r\n\t\tbox-shadow: 2px 2px 16px #000a;\r\n\t\ttransform: translateX( -50% );\r\n\t\tpointer-events: none;\r\n\t}\r\n}\r\n"},{"Ident":"playnplay.10_xplosion","Path":"ui/controlsheet/controlsheetrow.cs.scss","FileName":"controlsheetrow.cs.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"\r\nControlSheetRow\r\n{\r\n\tflex-direction: row;\r\n\tflex-shrink: 0;\r\n\tmax-height: 32px;\r\n\tborder-radius: 4px;\r\n\r\n\t\u0026.hidden\r\n\t{\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n\r\nControlSheetRow \u003E .left\r\n{\r\n\twidth: 150px;\r\n\tflex-shrink: 0;\r\n\tflex-grow: 0;\r\n\tpadding: 6px;\r\n}\r\n\r\nControlSheetRow \u003E .right\r\n{\r\n\tflex-grow: 1;\r\n}\r\n\r\nControlSheetRow \u003E .left \u003E .title\r\n{\r\n\twidth: 150px;\r\n\tflex-shrink: 0;\r\n\tflex-grow: 0;\r\n\tfont-size: 13px;\r\n\twhite-space: nowrap;\r\n\toverflow: hidden;\r\n}\r\n\r\nControlSheetRow \u003E .right \u003E textentry,\r\nControlSheetRow \u003E .right numberentry\r\n{\r\n\tbackground-color: #000a;\r\n\tflex-grow: 1;\r\n\tpadding: 4px 8px;\r\n\tborder-radius: 2px;\r\n}\r\n\r\n"},{"Ident":"playnplay.10_xplosion","Path":"game/2d/ui/gamehud.razor.scss","FileName":"gamehud.razor.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"root {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n pointer-events: none;\r\n overflow: hidden;\r\n}\r\n\r\n/* TOP HUD */\r\n.topbar {\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 90px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n border-bottom: 1px solid rgba(167,139,250,0.15);\r\n z-index: 10;\r\n background-color: rgba(18,8,42,0.97);\r\n animation: topbar-shift 20s ease-in-out infinite alternate;\r\n overflow: hidden;\r\n z-index: 11;\r\n}\r\n\r\n@keyframes topbar-shift {\r\n 0% { background-color: rgba(18,8,42,0.97); }\r\n 25% { background-color: rgba(8,24,48,0.97); }\r\n 50% { background-color: rgba(24,8,40,0.97); }\r\n 75% { background-color: rgba(8,18,50,0.97); }\r\n 100% { background-color: rgba(20,6,38,0.97); }\r\n}\r\n.hud-block {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n.hud-lbl {\r\n font-size: 22px;\r\n font-weight: 700;\r\n letter-spacing: 0.12em;\r\n color: rgba(255,255,255,0.30);\r\n text-transform: uppercase;\r\n}\r\n.hud-val {\r\n font-size: 32px;\r\n font-weight: 900;\r\n color: white;\r\n}\r\n.hud-block.wave .hud-val { color: #a78bfa; }\r\n.hud-block.score .hud-val { color: #34d399; }\r\n.hud-block.best .hud-val { color: #fbbf24; }\r\n.hud-sep {\r\n width: 1px;\r\n height: 120px;\r\n background-color: rgba(128,95,128,0.07);\r\n}\r\n\r\n/* TIMER */\r\n.timer-track {\r\n position: absolute;\r\n top: 90px; left: 0; right: 0;\r\n height: 14px;\r\n background-color: rgba(255,255,255,0.06);\r\n z-index: 10;\r\n}\r\n.timer-fill {\r\n position: absolute;\r\n top: 0; left: 0; bottom: 0;\r\n background-color: #34d399;\r\n transition: width 0.25s linear, background-color 0.8s ease;\r\n min-width: 4px;\r\n}\r\n\r\n.timer-fill.mid {\r\n background-color: #a78bfa; /* half time: purple */\r\n transition: width 0.25s linear, background-color 0.6s ease;\r\n}\r\n.timer-fill.hurry {\r\n background-color: #f59e0b; /* 30%: amber */\r\n transition: width 0.25s linear, background-color 0.5s ease;\r\n}\r\n.timer-fill.panic {\r\n background-color: #ef4444; /* 15%: red */\r\n transition: width 0.25s linear, background-color 0.3s ease;\r\n animation: pulse-bar 0.55s ease-in-out infinite alternate;\r\n}\r\n@keyframes pulse-bar {\r\n from { opacity: 1.0; }\r\n to { opacity: 0.5; }\r\n}\r\n/* \r\n Three-stage color shift:\r\n full \u2192 hurry : purple \u2192 amber (feels warm, attention-grabbing)\r\n hurry \u2192 panic : amber \u2192 red (urgent)\r\n panic : red \u002B pulse animation\r\n*/\r\n\r\n/* Challenge sentence \u2014 between timer and grid */\r\n\r\n.challenge-bar {\r\n position: absolute;\r\n top: 104px; \r\n left: 0;\r\n right: 0px;\r\n height: 36px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n background-color: rgba(13,8,32,0.80);\r\n border-bottom: 1px solid rgba(167,139,250,0.12);\r\n pointer-events: none;\r\n z-index: 9;\r\n transition: background-color 0.4s ease;\r\n}\r\n.challenge-bar.done {\r\n background-color: rgba(16,42,16,0.85);\r\n border-bottom-color: rgba(52,211,153,0.25);\r\n}\r\n\r\n.ch-icon {\r\n font-size: 16px;\r\n color: rgba(167,139,250,0.70);\r\n}\r\n.challenge-bar.done .ch-icon {\r\n color: #34d399;\r\n}\r\n\r\n.ch-label {\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: rgba(255,255,255,0.55);\r\n letter-spacing: 0.04em;\r\n}\r\n.challenge-bar.done .ch-label {\r\n color: rgba(52,211,153,0.85);\r\n}\r\n\r\n.ch-bonus {\r\n font-size: 13px;\r\n font-weight: 800;\r\n color: rgba(251,191,36,0.60);\r\n background-color: rgba(251,191,36,0.08);\r\n border-radius: 5px;\r\n padding: 2px 7px;\r\n}\r\n.challenge-bar.done .ch-bonus {\r\n color: rgba(52,211,153,0.80);\r\n background-color: rgba(52,211,153,0.10);\r\n}\r\n\r\n/* CHAIN TRACK \u2014 above grid, pointer-events none */\r\n.chain-track {\r\n position: absolute;\r\n top: 146px;\r\n left: 0;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n pointer-events: none;\r\n z-index: 15;\r\n}\r\n.chain-track-inner {\r\n background-color: rgba(13,8,32,0.75);\r\n border-radius: 14px;\r\n padding: 10px 20px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n.step {\r\n background-color: rgba(255,255,255,0.05);\r\n color: rgba(255,255,255,0.25);\r\n border-radius: 10px;\r\n padding: 6px 17px;\r\n font-size: 15px;\r\n border: 1.5px solid rgba(255,255,255,0.06);\r\n transition: all 0.15s;\r\n}\r\n.step.lit {\r\n background-color: rgba(167,139,250,0.2);\r\n color: #c4b5fd;\r\n border-color: #7c3aed;\r\n transform: scale(1.15);\r\n}\r\n.arr { font-size: 15px; color: rgba(255,255,255,0.15); }\r\n\r\n/* SIDEBAR */\r\n.sidebar {\r\n position: absolute;\r\n top: 140px; right: 0; bottom: 0;\r\n width: 260px;\r\n background-color: rgba(18,8,42,0.97);\r\n border-left: 2px solid rgba(167,139,250,0.18);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n padding: 16px;\r\n pointer-events: all;\r\n z-index: 10;\r\n}\r\n.divider {\r\n height: 1px;\r\n background-color: rgba(167,139,250,0.10);\r\n}\r\n.sbl {\r\n font-size: 12px; font-weight: 800;\r\n letter-spacing: 0.2em; text-transform: uppercase;\r\n color: rgba(166,154,219,0.5);\r\n}\r\n\r\n/* Legend */\r\n.legend { display: flex; flex-direction: column; gap: 8px; }\r\n.leg { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,0.38); font-weight: 600; }\r\n.dot { width: 10px; height: 10px; border-radius: 2px; }\r\n.dot.p0 { background-color: #60a5fa; }\r\n.dot.p1 { background-color: #34d399; }\r\n.dot.p2 { background-color: #fb923c; }\r\n.dot.red { background-color: #f87171; }\r\n.dot.chain { background-color: #c4b5fd; }\r\n\r\n/* Controls */\r\n.controls-hint {\r\n display: flex; flex-direction: column; gap: 6px;\r\n font-size: 13px; color: rgba(255,255,255,0.30); font-weight: 500;\r\n}\r\n\r\n.spacer { flex-grow: 1; }\r\n\r\n/* Message bottom bar \u2014 pointer-events none, no text-align */\r\n.msg {\r\n position: absolute;\r\n bottom: 8px;\r\n left: 12px;\r\n background-color: rgba(4,1,12,1.0);\r\n border: 1px solid rgba(167,139,250,0.15);\r\n border-radius: 8px;\r\n padding: 6px 14px;\r\n font-size: 18px;\r\n color: rgba(255,255,255,0.55);\r\n pointer-events: none;\r\n font-weight: 600;\r\n z-index: 5;\r\n}\r\n/* GAME OVER */\r\n/* \u2500\u2500 Three column layout \u2500\u2500 */\r\n.ov-bg {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(4,1,12,1.0);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 24px;\r\n pointer-events: all;\r\n z-index: 50;\r\n overflow: hidden;\r\n}\r\n\r\n.ov-side-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n width: 220px;\r\n pointer-events: none;\r\n z-index: 3;\r\n max-height: 92vh;\r\n overflow-y: auto;\r\n}\r\n\r\n.ov-side-card {\r\n position: relative; /* needed for ::before */\r\n background-color: rgba(8,3,22,0.90);\r\n border: 1px solid rgba(139,92,246,0.18);\r\n border-radius: 16px;\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 5px;\r\n overflow: hidden;\r\n}\r\n\r\n.ov-side-card.journey {\r\n gap: 4px;\r\n}\r\n/* Streak card \u2014 orange glow line */\r\n.ov-side-card.streak::before {\r\n background-color: rgba(251,146,60,0.55);\r\n}\r\n\r\n.ov-side-card::before {\r\n content: \u0022\u0022;\r\n position: absolute;\r\n top: -1px; left: 20%; right: 20%;\r\n height: 1px;\r\n background-color: rgba(139,92,246,0.40);\r\n border-radius: 50%;\r\n}\r\n\r\n.ov-side-card.streak {\r\n border-color: rgba(251,146,60,0.30);\r\n background-color: rgba(251,146,60,0.05);\r\n}\r\n\r\n.ov-side-card-title {\r\n font-size: 14px;\r\n font-weight: 900;\r\n color: rgb(255, 214, 161);\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n width: 100%;\r\n justify-content: center;\r\n margin-bottom: 8px;\r\n gap: 3px;\r\n}\r\n\r\n/* \u2500\u2500 Personal best bar \u2500\u2500 */\r\n.ov-pb-bar-wrap { width: 100%; }\r\n\r\n.ov-pb-bar-track {\r\n width: 100%;\r\n height: 6px;\r\n background-color: rgba(255,255,255,0.06);\r\n border-radius: 3px;\r\n position: relative;\r\n}\r\n\r\n.ov-pb-bar-fill {\r\n position: absolute;\r\n top: 0; left: 0; bottom: 0;\r\n background-color: #a78bfa;\r\n border-radius: 3px;\r\n min-width: 4px;\r\n}\r\n\r\n.ov-pb-marker {\r\n position: absolute;\r\n top: -3px;\r\n width: 2px;\r\n height: 12px;\r\n background-color: rgba(251,191,36,0.80);\r\n border-radius: 1px;\r\n}\r\n\r\n.ov-pb-scores {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 2px;\r\n width: 100%;\r\n}\r\n\r\n.ov-pb-score-current {\r\n font-size: 22px;\r\n font-weight: 900;\r\n color: #a78bfa;\r\n}\r\n\r\n.ov-pb-score-best {\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: rgba(255,255,255,0.30);\r\n}\r\n\r\n.ov-pb-newbest {\r\n font-size: 12px;\r\n font-weight: 900;\r\n color: #fbbf24;\r\n background-color: rgba(251,191,36,0.10);\r\n border: 1px solid rgba(251,191,36,0.25);\r\n border-radius: 8px;\r\n padding: 3px 10px;\r\n}\r\n\r\n/* Game over background Squares */\r\n@keyframes sq-float-1 {\r\n 0% { margin-top: 0px; margin-left: 0px; }\r\n 25% { margin-top: -14px; margin-left: 8px; }\r\n 50% { margin-top: -6px; margin-left: -10px; }\r\n 75% { margin-top: 10px; margin-left: 4px; }\r\n 100% { margin-top: 0px; margin-left: 0px; }\r\n}\r\n\r\n@keyframes sq-float-2 {\r\n 0% { margin-top: 0px; margin-left: 0px; }\r\n 30% { margin-top: 12px; margin-left: -8px; }\r\n 60% { margin-top: -8px; margin-left: 12px; }\r\n 100% { margin-top: 0px; margin-left: 0px; }\r\n}\r\n\r\n@keyframes sq-pulse {\r\n 0%,100% { opacity: 0.4; }\r\n 50% { opacity: 1.0; }\r\n}\r\n\r\n.ov-bg-squares {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 1;\r\n}\r\n\r\n.ov-bg-sq {\r\n position: absolute;\r\n border: 1.5px solid;\r\n}\r\n\r\n@keyframes sq-drift-a {\r\n 0% { margin-top: 0px; margin-left: 0px; opacity: 0.35; }\r\n 20% { margin-top: -12px; margin-left: 8px; opacity: 0.80; }\r\n 40% { margin-top: -20px; margin-left: -6px; opacity: 0.50; }\r\n 60% { margin-top: -8px; margin-left: -14px; opacity: 0.90; }\r\n 80% { margin-top: 6px; margin-left: 4px; opacity: 0.45; }\r\n 100% { margin-top: 0px; margin-left: 0px; opacity: 0.35; }\r\n}\r\n\r\n@keyframes sq-drift-b {\r\n 0% { margin-top: 0px; margin-left: 0px; opacity: 0.25; }\r\n 25% { margin-top: 14px; margin-left: -10px; opacity: 0.70; }\r\n 50% { margin-top: 6px; margin-left: 16px; opacity: 0.90; }\r\n 75% { margin-top: -10px; margin-left: 8px; opacity: 0.40; }\r\n 100% { margin-top: 0px; margin-left: 0px; opacity: 0.25; }\r\n}\r\n\r\n.ov-bg-sq.sq-a {\r\n animation-name: sq-drift-a;\r\n animation-timing-function: ease-in-out;\r\n animation-iteration-count: infinite;\r\n}\r\n\r\n.ov-bg-sq.sq-b {\r\n animation-name: sq-drift-b;\r\n animation-timing-function: ease-in-out;\r\n animation-iteration-count: infinite;\r\n}\r\n\r\n/* Alternate float pattern on even squares */\r\n.ov-bg-sq:nth-child(even) {\r\n animation-name: sq-float-2, sq-pulse;\r\n}\r\n\r\n/* \u2500\u2500 Journey \u2500\u2500 */\r\n.ov-journey-wave {\r\n font-size: 32px;\r\n font-weight: 900;\r\n color: white;\r\n gap: 3px;\r\n}\r\n\r\n.ov-journey-sub {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: rgba(167, 255, 179, 0.719);\r\n word-spacing: 1px;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between; /* \u2190 pushes label left, value right */\r\n}\r\n\r\n.ov-journey-tag {\r\n font-size: 10px;\r\n font-weight: 800;\r\n color: rgba(255, 255, 255, 0.562);\r\n background-color: rgba(255,255,255,0.04);\r\n border-radius: 6px;\r\n padding: 3px 10px;\r\n}\r\n\r\n.ov-journey-tag.good {\r\n color: #34d399;\r\n background-color: rgba(52,211,153,0.08);\r\n}\r\n\r\n/* \u2500\u2500 Streak \u2500\u2500 */\r\n.ov-streak-count {\r\n font-size: 48px;\r\n font-weight: 900;\r\n color: #fb923c;\r\n}\r\n\r\n.ov-streak-label {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: rgba(255, 199, 125, 0.404);\r\n}\r\n\r\n/* \u2500\u2500 Next unlock \u2500\u2500 */\r\n.ov-unlock-icon { font-size: 32px; }\r\n\r\n.ov-unlock-name {\r\n font-size: 13px;\r\n font-weight: 800;\r\n color: rgba(255,255,255,0.75);\r\n width: 100%;\r\n text-align: center;\r\n justify-content: center;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.ov-unlock-cost {\r\n font-size: 12px;\r\n flex-direction: row;\r\n font-weight: 700;\r\n color: rgba(129,140,248,0.70);\r\n width: 100%;\r\n justify-content: center;\r\n text-align: center;\r\n gap: 3px; /* adds space b/w elements */\r\n}\r\n\r\n.ov-unlock-ready {\r\n font-size: 12px;\r\n font-weight: 900;\r\n color: #34d399;\r\n}\r\n\r\n.ov-unlock-bar-track {\r\n width: 100%;\r\n height: 4px;\r\n background-color: rgba(255,255,255,0.06);\r\n border-radius: 2px;\r\n position: relative;\r\n margin-top: 4px;\r\n}\r\n\r\n.ov-unlock-bar-fill {\r\n position: absolute;\r\n top: 0; left: 0; bottom: 0;\r\n background-color: #818cf8;\r\n border-radius: 2px;\r\n min-width: 4px;\r\n}\r\n\r\n.ov-particles {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n pointer-events: none;\r\n overflow: hidden;\r\n z-index: 2;\r\n}\r\n.ov-particle {\r\n position: absolute;\r\n bottom: -20px;\r\n opacity: 0;\r\n animation-name: particle-rise;\r\n animation-timing-function: ease-in;\r\n animation-iteration-count: infinite;\r\n}\r\n@keyframes particle-rise {\r\n 0% { opacity: 0; transform: translateY(0px); }\r\n 15% { opacity: 1; }\r\n 80% { opacity: 0.7; transform: translateY(-65vh); }\r\n 100% { opacity: 0; transform: translateY(-105vh); }\r\n}\r\n\r\n.ov-box {\r\n position: relative;\r\n background-color: rgba(8,3,22,0.98);\r\n border: 1px solid rgba(139,92,246,0.25);\r\n border-radius: 24px;\r\n padding: 2rem 2.2rem 2.2rem 2.2rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 16px;\r\n width: 600px;\r\n max-height: 92vh;\r\n overflow-y: auto;\r\n z-index: 3;\r\n box-shadow: 0px 0px 0px 1px rgba(139,92,246,0.08),\r\n 0px 2px 0px rgba(139,92,246,0.15),\r\n 0px 24px 60px rgba(0s,0,0,0.80),\r\n inset 0px 1px 0px rgba(255,255,255,0.04);\r\n}\r\n\r\n/* Subtle top glow on the box */\r\n.ov-box::before {\r\n content: \u0022\u0022;\r\n position: absolute;\r\n top: -1px; left: 15%; right: 15%;\r\n height: 1px;\r\n background-color: rgba(167,139,250,0.50);\r\n border-radius: 50%;\r\n}\r\n\r\n.ov-wave-big {\r\n font-size: 64px;\r\n font-weight: 900;\r\n color: #a78bfa;\r\n letter-spacing: 0.06em;\r\n animation: ov-section-in 0.6s cubic-bezier(0.22,1,0.36,1) 0.3s both;\r\n}\r\n\r\n.ov-stats {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 8px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n justify-content: center;\r\n}\r\n\r\n.ov-stat {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 5px;\r\n background-color: rgba(255,255,255,0.02);\r\n border-radius: 14px;\r\n padding: 16px 8px 12px 8px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.ov-stat::before {\r\n content: \u0022\u0022;\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 2px;\r\n}\r\n\r\n.ov-stat-icon { font-size: 18px; opacity: 0.70; }\r\n\r\n.ov-stat-val {\r\n font-size: 36px;\r\n font-weight: 900;\r\n letter-spacing: -0.03em;\r\n line-height: 1;\r\n}\r\n\r\n.ov-stat-lbl {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: rgba(255, 255, 255, 0.575);\r\n text-transform: uppercase;\r\n letter-spacing: 0.14em;\r\n}\r\n\r\n.ov-stat:nth-child(1) {\r\n border: 1px solid rgba(52,211,153,0.18);\r\n background-color: rgba(52,211,153,0.06);\r\n}\r\n.ov-stat:nth-child(2) {\r\n border: 1px solid rgba(167,139,250,0.18);\r\n background-color: rgba(167,139,250,0.06);\r\n}\r\n.ov-stat:nth-child(3) {\r\n border: 1px solid rgba(251,191,36,0.18);\r\n background-color: rgba(251,191,36,0.06);\r\n}\r\n\r\n/* Color accent per stat \u2014 target each by position */\r\n.ov-stat:nth-child(1)::before { background-color: #34d399; }\r\n.ov-stat:nth-child(2)::before { background-color: #a78bfa; }\r\n.ov-stat:nth-child(3)::before { background-color: #fbbf24; }\r\n\r\n.ov-stat:nth-child(1) { border: 1px solid rgba(52,211,153,0.12); }\r\n.ov-stat:nth-child(2) { border: 1px solid rgba(167,139,250,0.12); }\r\n.ov-stat:nth-child(3) { border: 1px solid rgba(251,191,36,0.12); }\r\n\r\n/* \u2500\u2500 Stat label colors \u2500\u2500 */\r\n.ov-stat:nth-child(1) .ov-stat-val { color: #6ee7b7; }\r\n.ov-stat:nth-child(2) .ov-stat-val { color: #d8b4fe; }\r\n.ov-stat:nth-child(3) .ov-stat-val { color: #fde68a; }\r\n\r\n\r\n/* Background orbs still game over (ov)*/\r\n@keyframes orb-drift-1 {\r\n 0% { margin-left: 0px; margin-top: 0px; }\r\n 33% { margin-left: 18px; margin-top: -12px; }\r\n 66% { margin-left: -10px; margin-top: 20px; }\r\n 100% { margin-left: 0px; margin-top: 0px; }\r\n}\r\n\r\n@keyframes orb-drift-2 {\r\n 0% { margin-left: 0px; margin-top: 0px; }\r\n 40% { margin-left: -20px; margin-top: 14px; }\r\n 70% { margin-left: 12px; margin-top: -8px; }\r\n 100% { margin-left: 0px; margin-top: 0px; }\r\n}\r\n\r\n@keyframes orb-drift-3 {\r\n 0% { margin-left: 0px; margin-top: 0px; }\r\n 30% { margin-left: 14px; margin-top: 18px; }\r\n 60% { margin-left: -8px; margin-top: -14px; }\r\n 100% { margin-left: 0px; margin-top: 0px; }\r\n}\r\n\r\n.ov-orb {\r\n position: absolute;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.ov-orb-1 {\r\n width: 280px;\r\n height: 280px;\r\n top: -60px;\r\n left: -80px;\r\n background-color: rgba(109,40,217,0.06);\r\n animation: orb-drift-1 12s ease-in-out infinite;\r\n}\r\n\r\n.ov-orb-2 {\r\n width: 200px;\r\n height: 200px;\r\n bottom: 40px;\r\n right: -60px;\r\n background-color: rgba(99,102,241,0.05);\r\n animation: orb-drift-2 16s ease-in-out infinite;\r\n}\r\n\r\n.ov-orb-3 {\r\n width: 150px;\r\n height: 150px;\r\n top: 40%;\r\n left: 30%;\r\n background-color: rgba(244,114,182,0.03);\r\n animation: orb-drift-3 20s ease-in-out infinite;\r\n}\r\n\r\n/* Game over - secret */\r\n.ov-secret-title {\r\n font-size: 13px;\r\n font-weight: 800;\r\n color: rgba(244,114,182,0.70);\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n animation: ov-in 0.5s ease-out 1.6s both;\r\n}\r\n.ov-secrets {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n}\r\n.ov-secret {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 6px;\r\n background-color: rgba(244,114,182,0.08);\r\n border: 1px solid rgba(244,114,182,0.25);\r\n border-radius: 14px;\r\n padding: 14px 18px;\r\n min-width: 80px;\r\n overflow: hidden;\r\n}\r\n.ov-secret.locked {\r\n background-color: rgba(255,255,255,0.03);\r\n border-color: rgba(255,255,255,0.08);\r\n animation: chest-idle 2s ease-in-out infinite;\r\n}\r\n.ov-secret.rare {\r\n background-color: rgba(251,191,36,0.10);\r\n border-color: rgba(251,191,36,0.45);\r\n}\r\n.ov-secret.pop { animation: chest-pop 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }\r\n.ov-secret.rare.pop { animation: chest-pop-rare 1.0s cubic-bezier(0.22,1,0.36,1) forwards; }\r\n.ov-secret-icon { font-size: 28px; color: white; }\r\n.ov-secret-lbl { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.80); }\r\n.ov-secret.rare .ov-secret-lbl { color: #fbbf24; }\r\n.ov-secret-shine {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);\r\n animation: shine-sweep 0.6s ease-out 0.1s forwards;\r\n pointer-events: none;\r\n}\r\n\r\n.ov-section-enter {\r\n animation: ov-section-in 0.45s cubic-bezier(0.22,1,0.36,1) forwards;\r\n}\r\n\r\n@keyframes ov-section-in {\r\n 0% { margin-top: 24px; }\r\n 100% { margin-top: 0px; }\r\n}\r\n\r\n/* Clickable secret chests during Game Over */\r\n.ov-secret.clickable {\r\n cursor: pointer;\r\n border-color: rgba(167,139,250,0.55);\r\n background-color: rgba(167,139,250,0.10);\r\n animation: chest-idle 1.0s ease-in-out infinite;\r\n pointer-events: all;\r\n}\r\n\r\n.ov-secret.clickable:hover {\r\n background-color: rgba(167,139,250,0.20);\r\n border-color: rgba(167,139,250,0.85);\r\n}\r\n\r\n@keyframes chest-idle {\r\n 0%,100% { transform: rotate(0deg); }\r\n 25% { transform: rotate(-2deg) scale(1.02); }\r\n 75% { transform: rotate(2deg) scale(1.02); }\r\n}\r\n@keyframes chest-pop {\r\n 0% { transform: scale(1.0); }\r\n 20% { transform: scale(0.88); }\r\n 55% { transform: scale(1.22); }\r\n 75% { transform: scale(0.96); }\r\n 100% { transform: scale(1.0); }\r\n}\r\n@keyframes chest-pop-rare {\r\n 0% { transform: scale(1.0) rotate(0deg); }\r\n 15% { transform: scale(0.82) rotate(-4deg); }\r\n 45% { transform: scale(1.35) rotate(3deg); }\r\n 65% { transform: scale(0.93) rotate(-1deg); }\r\n 82% { transform: scale(1.06) rotate(0deg); }\r\n 100% { transform: scale(1.0) rotate(0deg); }\r\n}\r\n@keyframes shine-sweep {\r\n 0% { transform: translateX(-200%); }\r\n 100% { transform: translateX(300%); }\r\n}\r\n\r\n/* Secret section - when clickicking */\r\n.ov-secret-section {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n}\r\n\r\n.ov-secret-eyebrow {\r\n font-size: 11px;\r\n font-weight: 800;\r\n color: rgba(244,114,182,0.70);\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n}\r\n\r\n.ov-secret-hint {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: rgba(255,255,255,0.35);\r\n}\r\n\r\n/* \u2500\u2500 Chest cards \u2500\u2500 */\r\n\r\n.ov-chest-cards {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 16px;\r\n justify-content: center;\r\n}\r\n\r\n.ov-chest-card {\r\n width: 130px;\r\n min-height: 150px; /* was height: 150px */\r\n border-radius: 16px;\r\n border: 1.5px solid rgba(167,139,250,0.15);\r\n background-color: rgba(13,6,32,0.90);\r\n position: relative;\r\n overflow: visible;\r\n cursor: default;\r\n box-shadow: 0px 4px 0px rgba(0,0,0,0.40);\r\n}\r\n\r\n.ov-chest-card.ready {\r\n border-color: rgba(167,139,250,0.55);\r\n background-color: rgba(60,20,140,0.25);\r\n cursor: pointer;\r\n pointer-events: all;\r\n animation: chest-card-ready 1.4s ease-in-out infinite alternate;\r\n box-shadow: 0px 4px 0px rgba(0,0,0,0.40),\r\n 0px 0px 20px rgba(167,139,250,0.15);\r\n}\r\n\r\n.ov-chest-card.ready:hover {\r\n border-color: rgba(167,139,250,0.90);\r\n background-color: rgba(109,40,217,0.30);\r\n}\r\n\r\n.ov-chest-card.waiting {\r\n border-color: rgba(255,255,255,0.06);\r\n background-color: rgba(255,255,255,0.02);\r\n box-shadow: none;\r\n}\r\n\r\n.ov-chest-card.revealed {\r\n border-color: rgba(129,140,248,0.35);\r\n background-color: rgba(99,102,241,0.08);\r\n box-shadow: 0px 4px 0px rgba(0,0,0,0.30),\r\n 0px 0px 16px rgba(129,140,248,0.10);\r\n}\r\n\r\n.ov-chest-card.revealed.rare {\r\n border-color: rgba(251,191,36,0.50);\r\n background-color: rgba(251,191,36,0.08);\r\n box-shadow: 0px 4px 0px rgba(0,0,0,0.30),\r\n 0px 0px 24px rgba(251,191,36,0.12);\r\n}\r\n\r\n.ov-chest-card.pop-in {\r\n animation: chest-card-pop 0.7s cubic-bezier(0.22,1,0.36,1) forwards;\r\n}\r\n\r\n.ov-chest-card-inner {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n pointer-events: none;\r\n}\r\n\r\n.ov-chest-emoji {\r\n font-size: 48px;\r\n animation: chest-card-idle 2.2s ease-in-out infinite alternate;\r\n}\r\n\r\n.ov-chest-card.waiting .ov-chest-emoji {\r\n opacity: 0.25;\r\n animation: none;\r\n}\r\n\r\n.ov-chest-tap {\r\n font-size: 10px;\r\n font-weight: 900;\r\n color: white;\r\n background-color: rgba(167,139,250,0.35);\r\n border: 1px solid rgba(167,139,250,0.50);\r\n border-radius: 6px;\r\n padding: 3px 10px;\r\n letter-spacing: 0.12em;\r\n}\r\n\r\n.ov-chest-tap.locked {\r\n background-color: rgba(255,255,255,0.05);\r\n border-color: rgba(255,255,255,0.08);\r\n color: rgba(255,255,255,0.20);\r\n}\r\n\r\n.ov-chest-glow {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n border-radius: 14px;\r\n animation: chest-glow-pulse 1.2s ease-in-out infinite alternate;\r\n pointer-events: none;\r\n}\r\n\r\n.ov-chest-card.ready {\r\n border-color: rgba(167,139,250,0.60);\r\n background-color: rgba(109,40,217,0.18);\r\n cursor: pointer;\r\n pointer-events: all;\r\n animation: chest-card-ready 1.2s ease-in-out infinite alternate;\r\n}\r\n\r\n.ov-chest-reward-icon {\r\n font-size: 40px;\r\n}\r\n\r\n.ov-chest-reward-lbl {\r\n font-size: 11px;\r\n font-weight: 800;\r\n color: rgba(255,255,255,0.75);\r\n padding: 0px 8px;\r\n}\r\n\r\n/* rare badge */\r\n.ov-chest-revealed-icon {\r\n font-size: 40px;\r\n}\r\n\r\n.ov-chest-revealed-info {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n.ov-chest-revealed-lbl {\r\n font-size: 13px;\r\n font-weight: 900;\r\n color: white;\r\n padding: 0px 4px;\r\n}\r\n\r\n.ov-chest-rare-badge {\r\n font-size: 9px;\r\n font-weight: 900;\r\n color: #fbbf24;\r\n background-color: rgba(251,191,36,0.10);\r\n border: 1px solid rgba(251,191,36,0.30);\r\n border-radius: 20px;\r\n padding: 2px 8px;\r\n letter-spacing: 0.10em;\r\n}\r\n\r\n.ov-confetti-bit {\r\n position: absolute;\r\n top: -20px;\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 2px;\r\n animation-name: confetti-fly;\r\n animation-timing-function: ease-out;\r\n animation-fill-mode: forwards;\r\n pointer-events: none;\r\n z-index: 10;\r\n}\r\n\r\n@keyframes confetti-fly {\r\n 0% { opacity: 1; transform: translateY(0px) rotate(0deg) scale(1.2); }\r\n 30% { opacity: 1; }\r\n 100% { opacity: 0; transform: translateY(-140px) rotate(520deg) scale(0.4); }\r\n}\r\n\r\n@keyframes chest-card-ready {\r\n 0% { transform: translateY(0px) scale(1.0); }\r\n 100% { transform: translateY(-5px) scale(1.02); }\r\n}\r\n\r\n@keyframes chest-card-idle {\r\n 0% { transform: translateY(0px) rotate(-1.5deg); }\r\n 100% { transform: translateY(-5px) rotate(1.5deg); }\r\n}\r\n\r\n@keyframes chest-card-pop {\r\n 0% { transform: scale(1.0); }\r\n 20% { transform: scale(0.85); }\r\n 55% { transform: scale(1.25); }\r\n 75% { transform: scale(0.96); }\r\n 100% { transform: scale(1.0); }\r\n}\r\n\r\n@keyframes chest-glow-pulse {\r\n 0% { opacity: 0.4; }\r\n 100% { opacity: 1.0; }\r\n}\r\n\r\n@keyframes chest-shine-sweep {\r\n 0% { transform: translateX(-100%); }\r\n 40% { transform: translateX(250%); }\r\n 100% { transform: translateX(250%); }\r\n}\r\n\r\n@keyframes confetti-fly {\r\n 0% { opacity: 1; transform: translateY(0px) rotate(0deg) scale(1.0); }\r\n 60% { opacity: 1; }\r\n 100% { opacity: 0; transform: translateY(-90px) rotate(380deg) scale(0.6); }\r\n}\r\n\r\n/* Frags section */\r\n.ov-frag-section {\r\n width: 100%;\r\n display: flex;\r\n flex-shrink: 0;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n background-color: rgba(99,102,241,0.05);\r\n border: 1px solid rgba(99,102,241,0.18);\r\n border-radius: 18px;\r\n padding: 20px 22px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n/* Subtle shimmer across the top */\r\n.ov-frag-section::before {\r\n content: \u0022\u0022;\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 1px;\r\n background-color: rgba(129,140,248,0.35);\r\n}\r\n\r\n.ov-frag-breakdown {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n width: 100%;\r\n}\r\n\r\n.ov-frag-line {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 5px 10px;\r\n background-color: rgba(255,255,255,0.025);\r\n border-radius: 8px;\r\n border-left: 2px solid rgba(129,140,248,0.20);\r\n}\r\n\r\n.ov-frag-line-lbl {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: rgba(255,255,255,0.35);\r\n}\r\n\r\n.ov-frag-line-val {\r\n font-size: 13px;\r\n font-weight: 900;\r\n color: #818cf8;\r\n}\r\n\r\n.ov-frag-label {\r\n font-size: 10px;\r\n font-weight: 900;\r\n color: rgba(129,140,248,0.55);\r\n letter-spacing: 0.22em;\r\n text-transform: uppercase;\r\n}\r\n\r\n.ov-frag-val {\r\n font-size: 52px;\r\n font-weight: 900;\r\n color: #818cf8;\r\n letter-spacing: -0.02em;\r\n line-height: 1;\r\n}\r\n\r\n.ov-frag-total {\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: rgba(129,140,248,0.50);\r\n border-top: 1px solid rgba(129,140,248,0.10);\r\n padding-top: 8px;\r\n width: 100%;\r\n text-align: center;\r\n}\r\n\r\n.ov-frag-hint {\r\n font-size: 11px;\r\n color: rgba(255,255,255,0.22);\r\n font-weight: 600;\r\n letter-spacing: 0.04em;\r\n}\r\n\r\n/**/\r\n\r\n.ov-score-section {\r\n display: flex;\r\n flex-shrink: 0;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 6px;\r\n animation: ov-score-appear 0.6s ease-out forwards;\r\n}\r\n\r\n@keyframes ov-score-appear {\r\n 0% { opacity: 0; }\r\n 100% { opacity: 1; }\r\n}\r\n\r\n.ov-score-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.35); letter-spacing: 0.18em; text-transform: uppercase; }\r\n.ov-score { font-size: 62px; font-weight: 900; color: #a78bfa; }\r\n.ov-score.gold { color: #fbbf24; }\r\n.ov-newbest-badge {\r\n font-size: 15px;\r\n font-weight: 900;\r\n color: #fbbf24;\r\n background-color: rgba(251,191,36,0.12);\r\n border: 1.5px solid rgba(251,191,36,0.40);\r\n border-radius: 8px;\r\n padding: 4px 14px;\r\n letter-spacing: 0.12em;\r\n animation: badge-slam 0.5s cubic-bezier(0.22,1,0.36,1) 0.6s both;\r\n}\r\n@keyframes badge-slam {\r\n 0% { opacity: 0; transform: scale(0.3); }\r\n 60% { transform: scale(1.15); }\r\n 100% { opacity: 1; transform: scale(1.0); }\r\n}\r\n.ov-btns {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 12px;\r\n flex-shrink: 0; /* never let the buttons get squeezed */\r\n}\r\n\r\n/* \u2500\u2500 Play Again button sweep \u2500\u2500 */\r\n.ov-btn-wrap {\r\n position: relative;\r\n overflow: hidden;\r\n background-color: #3aed3a;\r\n border: 1.5px solid #8bfa9a;\r\n border-radius: 12px;\r\n color: white;\r\n font-size: 30px;\r\n font-weight: 800;\r\n padding: 15px 40px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n animation: btn-breathe 2.2s ease-in-out infinite alternate;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n@keyframes btn-breathe {\r\n 0% { transform: scale(1.0); }\r\n 100% { transform: scale(1.05); }\r\n}\r\n\r\n.ov-btn-shine {\r\n position: absolute;\r\n top: 0; bottom: 0;\r\n left: -80%;\r\n width: 40%;\r\n background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);\r\n animation: btn-shine-sweep 3.0s ease-in-out infinite;\r\n pointer-events: none;\r\n}\r\n\r\n@keyframes btn-shine-sweep {\r\n 0% { left: -80%; }\r\n 45% { left: 140%; }\r\n 100% { left: 140%; }\r\n}\r\n\r\n@keyframes ov-in {\r\n 0% { opacity: 0; transform: translateY(12px) scale(0.97); }\r\n 100% { opacity: 1; transform: translateY(0) scale(1.0); }\r\n}\r\n\r\n.ov-reveal {\r\n animation: ov-in 0.4s ease-out both;\r\n}\r\n\r\n/* Main Menu Button */\r\n.ov-btn-menu {\r\n background-color: rgba(255,255,255,0.04);\r\n border: 1px solid rgba(255,255,255,0.10);\r\n border-radius: 12px;\r\n color: rgba(255,255,255,0.40);\r\n font-size: 14px;\r\n font-weight: 700;\r\n padding: 15px 20px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.ov-btn-menu:hover {\r\n background-color: rgba(255,255,255,0.08);\r\n color: rgba(255,255,255,0.65);\r\n}\r\n\r\n/* -------------------- Modifier strip -----------------------\r\n* This shows the equipped modifiers as a vertical strip in the sidebar\r\n* Each item has its icon, name, and a tooltip on hover showing the full description. \r\n* The green tint matches the \u0022active\u0022 color language used in the shop, \r\n* creating visual consistency between menu and game.\r\n\r\n* Players can now glance at the sidebar mid-run and see exactly what\u0027s buffing them\r\n* Combined with the boss multiplier suppression warning I added, \r\n* the player always knows what\u0027s affecting their score\r\n*/\r\n.mod-strip {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.mod-strip-item {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 8px 12px;\r\n background-color: rgba(52,211,153,0.06);\r\n border: 1px solid rgba(52,211,153,0.20);\r\n border-radius: 8px;\r\n transition: background-color 0.2s ease;\r\n}\r\n\r\n.mod-strip-item:hover {\r\n background-color: rgba(52,211,153,0.12);\r\n}\r\n\r\n.mod-strip-icon {\r\n font-size: 18px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.mod-strip-name {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: rgba(255,255,255,0.75);\r\n letter-spacing: 0.04em;\r\n}\r\n\r\n/* \u2500\u2500 Game over reason \u2500\u2500 */\r\n.ov-reason {\r\n animation: ov-section-in 0.5s cubic-bezier(0.22,1,0.36,1) 0.5s both;\r\n font-size: 13px;\r\n font-weight: 700;\r\n color: rgba(255,255,255,0.55);\r\n padding: 8px 16px;\r\n background-color: rgba(255,255,255,0.04);\r\n border: 1px solid rgba(255,255,255,0.08);\r\n border-radius: 10px;\r\n width: 100%;\r\n justify-content: center;\r\n}\r\n\r\n/* ---------------- SCREEN SHAKE ---------------- */\r\n.hud-overlay {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n pointer-events: none;\r\n z-index: 5;\r\n}\r\n\r\n.hud-overlay.shake-small { animation: shake-small 0.25s ease-out; }\r\n.hud-overlay.shake-medium { animation: shake-medium 0.35s ease-out; }\r\n.hud-overlay.shake-strong { animation: shake-strong 0.45s ease-out; }\r\n.hud-overlay.shake-insane { animation: shake-insane 0.55s ease-out; }\r\n\r\n.mini-hand.shake-small { animation: shake-small 0.25s ease-out; }\r\n.mini-hand.shake-medium { animation: shake-medium 0.35s ease-out; }\r\n.mini-hand.shake-strong { animation: shake-strong 0.45s ease-out; }\r\n.mini-hand.shake-insane { animation: shake-insane 0.55s ease-out; }\r\n\r\n@keyframes shake-small {\r\n 0%,100% { transform: translate(0,0); }\r\n 25% { transform: translate(-2px, 1px); }\r\n 50% { transform: translate(2px, -1px); }\r\n 75% { transform: translate(-1px, 2px); }\r\n}\r\n@keyframes shake-medium {\r\n 0%,100% { transform: translate(0,0); }\r\n 20% { transform: translate(-4px, 2px) rotate(-0.3deg); }\r\n 40% { transform: translate(4px,-3px) rotate(0.3deg); }\r\n 60% { transform: translate(-3px, 3px) rotate(-0.2deg); }\r\n 80% { transform: translate(3px,-2px) rotate(0.2deg); }\r\n}\r\n@keyframes shake-strong {\r\n 0%,100% { transform: translate(0,0); }\r\n 15% { transform: translate(-6px, 3px) rotate(-0.5deg); }\r\n 30% { transform: translate(6px,-4px) rotate(0.5deg); }\r\n 45% { transform: translate(-5px, 5px) rotate(-0.4deg); }\r\n 60% { transform: translate(5px,-4px) rotate(0.4deg); }\r\n 75% { transform: translate(-3px, 2px); }\r\n 90% { transform: translate(2px,-2px); }\r\n}\r\n@keyframes shake-insane {\r\n 0%,100% { transform: translate(0,0); }\r\n 10% { transform: translate(-9px, 5px) rotate(-0.7deg); }\r\n 20% { transform: translate(9px,-6px) rotate(0.7deg); }\r\n 30% { transform: translate(-8px, 7px) rotate(-0.6deg); }\r\n 40% { transform: translate(8px,-6px) rotate(0.6deg); }\r\n 50% { transform: translate(-6px, 5px) rotate(-0.4deg); }\r\n 60% { transform: translate(6px,-5px) rotate(0.4deg); }\r\n 70% { transform: translate(-4px, 3px); }\r\n 80% { transform: translate(3px,-3px); }\r\n 90% { transform: translate(-1px, 1px); }\r\n}\r\n\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500 Consumable strip \u2014 horizontal bar below challenge bar \u2500\u2500\u2500\u2500\u2500 */\r\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.consumable-strip {\r\n position: absolute;\r\n bottom: 120px; /* sits above the bomb wheel */\r\n left: 0;\r\n right: 150px; /* leave room for sidebar */\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n gap: 8px;\r\n pointer-events: all;\r\n z-index: 20;\r\n}\r\n\r\n.consumable-slot {\r\n position: relative;\r\n left: 70px;\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 10px;\r\n border: 1.5px solid rgba(255,255,255,0.10);\r\n background-color: rgba(255,255,255,0.04);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: default;\r\n position: relative;\r\n}\r\n\r\n.consumable-slot.available {\r\n border-color: rgba(167,139,250,0.50);\r\n background-color: rgba(109,40,217,0.15);\r\n cursor: pointer;\r\n}\r\n\r\n.consumable-slot.available:hover {\r\n background-color: rgba(109,40,217,0.30);\r\n border-color: rgba(167,139,250,0.80);\r\n}\r\n\r\n.consumable-slot.empty {\r\n opacity: 0.25;\r\n cursor: default;\r\n}\r\n\r\n.consumable-icon {\r\n font-size: 22px;\r\n pointer-events: none;\r\n}\r\n\r\n/* Count badge \u2014 bottom right corner of slot */\r\n.consumable-count {\r\n position: absolute;\r\n bottom: 2px;\r\n right: 4px;\r\n font-size: 10px;\r\n font-weight: 900;\r\n color: rgba(167,139,250,0.95);\r\n pointer-events: none;\r\n}\r\n\r\n/* \u2500\u2500 Screen Flash \u2500\u2500 */\r\n.screen-flash {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 2200px;\r\n height: 1400px;\r\n pointer-events: none;\r\n z-index: 100;\r\n}\r\n\r\n.flash-text {\r\n position: absolute;\r\n top: 485px; /* roughly vertical center of 1080p */\r\n left: 1055px; /* roughly horizontal center minus half text width */\r\n font-size: 72px;\r\n font-weight: 900;\r\n color: rgba(255,255,255,0.90);\r\n pointer-events: none;\r\n animation: flash-text-pop 1.2s ease-out forwards;\r\n text-shadow:\r\n -3px -3px 0 #000,\r\n 3px -3px 0 #000,\r\n -3px 3px 0 #000,\r\n 3px 3px 0 #000,\r\n -4px 0 0 #000,\r\n 4px 0 0 #000,\r\n 0 -4px 0 #000,\r\n 0 4px 0 #000;\r\n\tz-index: 10;\r\n}\r\n\r\n@keyframes flash-text-pop {\r\n 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }\r\n 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }\r\n 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }\r\n 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }\r\n}\r\n\r\n@keyframes flash-fade {\r\n 0% { opacity: 0; }\r\n 15% { opacity: 1; }\r\n 100% { opacity: 0; }\r\n}\r\n\r\n@keyframes flash-boss-spawn {\r\n 0% { opacity: 0; }\r\n 15% { opacity: 1; }\r\n 100% { opacity: 0; }\r\n}\r\n\r\n@keyframes flash-wave {\r\n 0% { opacity: 0; }\r\n 10% { opacity: 1; }\r\n 60% { opacity: 1; }\r\n 100% { opacity: 0; }\r\n}\r\n\r\n.screen-flash.flash-boss-spawn {\r\n background-color: rgba(220, 30, 30, 0.50);\r\n animation: flash-boss-spawn 2.5s ease-out forwards;\r\n}\r\n\r\n.screen-flash.flash-boss-death {\r\n background-color: rgba(251,191,36,0.55);\r\n animation: flash-fade 0.6s ease-out forwards;\r\n}\r\n\r\n.screen-flash.flash-wave-start {\r\n background-color: rgba(138, 92, 246, 0.082); /* was 0.18 \u2014 lighter */\r\n animation: flash-wave .9s ease-out forwards; /* was 2.5s \u2014 faster */\r\n}\r\n\r\n.screen-flash.flash-new-best {\r\n background-color: rgba(52,211,153,0.45);\r\n animation: flash-fade 1.0s ease-out forwards;\r\n}\r\n\r\n.screen-flash.flash-game-over {\r\n background-color: rgba(180,20,20,0.60);\r\n animation: flash-fade 0.8s ease-out forwards;\r\n}\r\n\r\n/* ------------------------------------------- */\r\n/* -------------- Pet Companion -------------- */\r\n/* ------------------------------------------- */\r\n\r\n.hud-pet-wrap {\r\n position: absolute;\r\n bottom: 55px;\r\n left: 15px;\r\n width: 220px;\r\n height: 870px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding: 14px 14px 0px 14px;\r\n z-index: 6;\r\n}\r\n\r\n.hud-pet {\r\n font-size: 110px;\r\n animation: hud-pet-idle 2.5s ease-in-out infinite alternate;\r\n opacity: 0.8;\r\n margin-bottom: 10px;\r\n margin-left: 0px;\r\n}\r\n.hud-pet image {\r\n width: 110px;\r\n height: 110px;\r\n}\r\n\r\n.hud-pet-egg-icon\r\n{\r\n width: 110px;\r\n height: 110px;\r\n}\r\n\r\n/* Top section \u2014 modifiers \u002B curse */\r\n.hud-pet-top {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n width: 100%;\r\n}\r\n\r\n/* Bottom section \u2014 pet \u002B hearts, pinned to bottom */\r\n.hud-pet-bottom {\r\n margin-top: auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n width: 100%;\r\n font-size: 64px; \r\n\r\n}\r\n\r\n@keyframes pet-bob {\r\n from { transform: translateY(0px); }\r\n to { transform: translateY(-8px); }\r\n}\r\n\r\n.pet-bob {\r\n animation: pet-bob 1.4s ease-in-out infinite alternate;\r\n}\r\n\r\n.hud-pet-egg {\r\n width: 120px;\r\n height: 120px;\r\n}\r\n\r\n.hud-pet-bottom image {\r\n width: 134px;\r\n height: 134px;\r\n margin-left: -10px;\r\n}\r\n\r\n.pet-sbl {\r\n font-size: 10px;\r\n font-weight: 800;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: rgba(166,154,219,0.5);\r\n}\r\n\r\n.hud-pet-card {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background-color: rgba(18,8,42,0.92);\r\n border: 1px solid rgba(167,139,250,0.18);\r\n border-radius: 14px 14px 0px 0px;\r\n z-index: -1;\r\n}\r\n\r\n@keyframes hud-pet-idle {\r\n 0% { transform: translateY(0px) scale(1.0); }\r\n 100% { transform: translateY(-6px) scale(1.05); }\r\n}\r\n\r\n/* -------------------------------------------------- */\r\n/* -------------- Hearts/Lives Sidebar -------------- */\r\n/* -------------------------------------------------- */\r\n\r\n.hud-pet-lives {\r\n position: absolute;\r\n right: 0px;\r\n left: 150px;\r\n bottom: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.hud-pet-heart {\r\n font-size: 40px;\r\n}\r\n\r\n.hud-pet-heart.empty {\r\n opacity: 0.20;\r\n}\r\n\r\n/* -------------------------------------------------- */\r\n/* -------------- BACKGROUND (grid-like) ------------ */\r\n/* -------------------------------------------------- */\r\n\r\n.game-bg-grid {\r\n position: absolute;\r\n top: 90px; left: 0; right: 0; bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.game-bg-cell {\r\n position: absolute;\r\n width: 232px;\r\n height: 232px;\r\n border-radius: 10px;\r\n border: 2px solid rgba(66, 54, 75, 0.04);\r\n z-index: 0;\r\n}\r\n\r\n.game-bg-cell.gbg-idle { /* inline style from WaveGridColor \u2014 already very dark hex */ }\r\n.game-bg-cell.gbg-expl { background-color: rgba(10,4,24,0.95); border-color: rgba(LoadPetLbLoadPetLb251,146,60,0.22); }\r\n.game-bg-cell.gbg-expl2 { background-color: rgba(10,4,24,0.95); border-color: rgba(251,191,36,0.22); }\r\n.game-bg-cell.gbg-gold { background-color: rgba(10,4,24,0.95); border-color: rgba(251,191,36,0.16); }\r\n.game-bg-cell.gbg-red { background-color: rgba(10,4,24,0.95); border-color: rgba(248,113,113,0.16); }\r\n.game-bg-cell.gbg-chain { background-color: rgba(10,4,24,0.95); border-color: rgba(196,181,253,0.14); }\r\n\r\n/* SIDEBAR BUTTON (info) */\r\n.sidebar-toggle {\r\n position: absolute;\r\n top: 155px;\r\n right: 12px;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50px;\r\n background-color: rgba(180,30,30,0.85);\r\n border: 2px solid rgba(255,100,100,0.60);\r\n color: white;\r\n font-size: 20px;\r\n font-weight: 900;\r\n pointer-events: all;\r\n z-index: 20;\r\n cursor: pointer;\r\n box-shadow: 2px 2px 0px rgba(0,0,0,0.60);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.sidebar-toggle:hover {\r\n background-color: rgba(220,40,40,0.95);\r\n border-color: rgba(255,140,140,0.80);\r\n}\r\n\r\n/**/\r\n.pet-mod-strip {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 6px;\r\n margin-top: 8px;\r\n}\r\n\r\n.pet-mod-item {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 8px;\r\n background-color: rgba(52,211,153,0.10);\r\n border: 1px solid rgba(52,211,153,0.25);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 16px;\r\n}\r\n\r\n.pet-curse-warning {\r\n font-size: 13px;\r\n font-weight: 800;\r\n color: rgba(248,113,113,0.85);\r\n margin-top: 6px;\r\n padding: 4px 8px;\r\n background-color: rgba(239,68,68,0.10);\r\n border: 1px solid rgba(248,113,113,0.20);\r\n border-radius: 6px;\r\n}\r\n\r\n/* Min chest requirement (displayed on left side bar)*/\r\n.hud-min-chests {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 4px 23px;\r\n background-color: rgba(0,0,0,0.35);\r\n border-radius: 6px;\r\n margin-top: 4px;\r\n justify-content: center;\r\n}\r\n\r\n.hud-min-chests-lbl {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: rgba(255,255,255,0.55);\r\n}\r\n\r\n.hud-min-chests-val {\r\n font-size: 18px;\r\n font-weight: 900;\r\n color: rgba(251,191,36,0.90);\r\n}\r\n\r\n/* MUSIC DEBUG */\r\n.mm-dev-music-panel {\r\n position: absolute;\r\n bottom: 20px;\r\n right: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n padding: 8px;\r\n background-color: rgba(4,1,13,0.90);\r\n border: 1px dashed rgba(244,114,182,0.30);\r\n border-radius: 6px;\r\n z-index: 99;\r\n pointer-events: all;\r\n}\r\n\r\n.mm-dev-music-label {\r\n font-size: 9px;\r\n font-weight: 900;\r\n color: rgba(244,114,182,0.60);\r\n letter-spacing: 0.20em;\r\n text-transform: uppercase;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.mm-dev-btn {\r\n background-color: rgba(244,114,182,0.15);\r\n border: 1px solid rgba(244,114,182,0.30);\r\n border-radius: 4px;\r\n color: rgba(244,114,182,0.85);\r\n font-size: 10px;\r\n font-weight: 700;\r\n padding: 4px 8px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n letter-spacing: 0.05em;\r\n}\r\n\r\n.mm-dev-btn:hover {\r\n background-color: rgba(244,114,182,0.25);\r\n}\r\n\r\n.mm-dev-btn-active {\r\n background-color: rgba(52,211,153,0.20);\r\n border-color: rgba(52,211,153,0.50);\r\n color: rgba(52,211,153,0.90);\r\n}\r\n\r\n/* =============== New SURVIVAL mode =============== */\r\n.survival-timer {\r\n position: absolute;\r\n top: 100px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 160px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n padding: 8px 16px;\r\n background-color: rgba(10,4,28,0.80);\r\n border: 2px solid rgba(239,68,68,0.35);\r\n border-radius: 10px;\r\n box-shadow: 3px 3px 0px rgba(0,0,0,0.55);\r\n z-index: 10;\r\n}\r\n\r\n.survival-timer-icon {\r\n font-size: 16px;\r\n}\r\n\r\n.survival-timer-val {\r\n font-size: 20px;\r\n font-weight: 900;\r\n color: rgba(251,191,36,0.90);\r\n letter-spacing: 0.04em;\r\n font-variant-numeric: tabular-nums;\r\n}\r\n\r\n.survival-spawn-track {\r\n position: absolute;\r\n top: 145px; /* just below the timer pill */\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 160px;\r\n height: 6px;\r\n background-color: rgba(255,255,255,0.08);\r\n border-radius: 3px;\r\n overflow: hidden;\r\n z-index: 10;\r\n}\r\n\r\n.survival-spawn-fill {\r\n height: 100%;\r\n background-color: rgba(251,191,36,0.85);\r\n transition: width 0.1s linear;\r\n}\r\n\r\n/* CAT */\r\n.mm-pet-hero-emoji image {\r\n width: 170px; /* bump this up to whatever size you want */\r\n height: 170px;\r\n image-rendering: pixelated; /* keep it crisp if it\u0027s pixel art */\r\n margin-left: -10px;\r\n}\r\n\r\n.mm-pet-hero-emoji {\r\n position: relative;\r\n}\r\n.cat-anchor { position: relative; }\r\n\r\n\r\n\r\n.cat-speech-bubble {\r\n position: absolute;\r\n top: -50px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: rgba(255,255,255,0.95);\r\n color: #1a1030;\r\n font-size: 14px;\r\n font-weight: 800;\r\n padding: 8px 14px;\r\n border-radius: 12px;\r\n white-space: nowrap;\r\n box-shadow: 2px 2px 0px rgba(0,0,0,0.4);\r\n z-index: 10;\r\n animation: bubble-pop 0.2s ease-out both;\r\n}\r\n\r\n.cat-speech-bubble::after {\r\n content: \u0022\u0022;\r\n position: absolute;\r\n bottom: -6px;\r\n left: 50%;\r\n width: 12px;\r\n height: 12px;\r\n background-color: rgba(255,255,255,0.95);\r\n transform: translateX(-50%) rotate(45deg);\r\n}\r\n\r\n@keyframes bubble-pop {\r\n 0% { opacity: 0; transform: translateX(-50%) scale(0.7); }\r\n 100% { opacity: 1; transform: translateX(-50%) scale(1.0); }\r\n}\r\n\r\n/* Back button */\r\n.back-toggle {\r\n top: 211px; /* 155 \u002B 44 \u002B 12 gap */\r\n background-color: rgba(60,60,180,0.85);\r\n border-color: rgba(140,140,255,0.60);\r\n}\r\n\r\n.back-toggle:hover {\r\n background-color: rgba(80,80,220,0.95);\r\n border-color: rgba(160,160,255,0.80);\r\n}\r\n\r\n.back-confirm-overlay {\r\n position: absolute;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background-color: rgba(4,1,13,0.85);\r\n z-index: 90;\r\n pointer-events: all;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.back-confirm-popup {\r\n background-color: rgba(20,8,50,0.98);\r\n border: 2px solid rgba(167,139,250,0.55);\r\n border-radius: 18px;\r\n padding: 32px 40px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 16px;\r\n max-width: 380px;\r\n text-align: center;\r\n box-shadow: 6px 6px 0px rgba(20,0,60,0.80);\r\n}\r\n\r\n.back-confirm-title { font-size: 22px; font-weight: 900; color: white; }\r\n.back-confirm-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; }\r\n.back-confirm-btns { display: flex; flex-direction: row; gap: 12px; margin-top: 8px; }\r\n\r\n.back-confirm-btn {\r\n border-radius: 10px;\r\n font-size: 14px;\r\n font-weight: 800;\r\n padding: 12px 20px;\r\n cursor: pointer;\r\n pointer-events: all;\r\n border: 2px solid transparent;\r\n}\r\n\r\n.back-confirm-btn.cancel { background-color: rgba(52,211,153,0.15); border-color: rgba(52,211,153,0.45); color: #6ee7b7; }\r\n.back-confirm-btn.confirm { background-color: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.45); color: #fca5a5; }\r\n\r\n\r\n/* Survival hype track */\r\n.survival-strip {\r\n position: absolute;\r\n top: 96px;\r\n left: 0;\r\n right: 0;\r\n height: 44px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n z-index: 10;\r\n pointer-events: none;\r\n}\r\n\r\n.survival-timer {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 5px 12px;\r\n background-color: rgba(10,4,28,0.85);\r\n border: 2px solid rgba(239,68,68,0.35);\r\n border-radius: 8px;\r\n flex-shrink: 0;\r\n}\r\n.survival-timer-icon { font-size: 14px; }\r\n.survival-timer-val {\r\n font-size: 18px;\r\n font-weight: 900;\r\n color: rgba(251,191,36,0.9);\r\n}\r\n\r\n.survival-hype-track {\r\n position: relative;\r\n width: 130px;\r\n height: 20px;\r\n background-color: rgba(255,255,255,0.08);\r\n border: 1px solid rgba(251,146,60,0.35);\r\n border-radius: 6px;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n.survival-hype-fill {\r\n position: absolute;\r\n top: 0; left: 0; bottom: 0;\r\n background-color: rgba(251,146,60,0.75);\r\n transition: width 0.12s linear;\r\n}\r\n.survival-hype-track.maxed {\r\n border-color: rgba(251,191,36,0.95);\r\n animation: hype-pulse 0.5s ease-in-out infinite alternate;\r\n}\r\n.survival-hype-track.maxed .survival-hype-fill { background-color: rgba(251,191,36,0.9); }\r\n.survival-hype-lbl {\r\n font-size: 9px;\r\n font-weight: 900;\r\n letter-spacing: 0.12em;\r\n color: rgba(255,255,255,0.9);\r\n z-index: 1;\r\n}\r\n@keyframes hype-pulse {\r\n from { border-color: rgba(251,191,36,0.5); }\r\n to { border-color: rgba(251,191,36,1.0); }\r\n}\r\n\r\n.survival-goal {\r\n position: relative;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 5px 12px;\r\n background-color: rgba(10,4,28,0.85);\r\n border: 1px solid rgba(167,139,250,0.35);\r\n border-radius: 8px;\r\n flex-shrink: 0;\r\n}\r\n.survival-goal-lbl { font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.85); }\r\n.survival-goal-prog { font-size: 12px; font-weight: 900; color: #a78bfa; }\r\n.survival-goal-timer {\r\n position: absolute;\r\n bottom: 0; left: 0; right: 0;\r\n height: 2px;\r\n background-color: rgba(255,255,255,0.06);\r\n}\r\n.survival-goal-timer-fill {\r\n height: 100%;\r\n background-color: rgba(167,139,250,0.7);\r\n transition: width 0.2s linear;\r\n}\r\n\r\n.survival-spawn-track {\r\n width: 90px;\r\n height: 6px;\r\n background-color: rgba(255,255,255,0.08);\r\n border-radius: 3px;\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n}\r\n.survival-spawn-fill {\r\n height: 100%;\r\n background-color: rgba(251,191,36,0.85);\r\n transition: width 0.1s linear;\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"Game/2D/GridRenderer.cs","FileName":"GridRenderer.cs","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"using Sandbox;\r\n\r\n/// \u003Csummary\u003E\r\n/// GridRenderer is now just a stub that handles the fuse-line\r\n/// world-space animation between bombs during detonation.\r\n/// All grid display is handled by GridPanel.razor (ScreenPanel UI).\r\n///\r\n/// Attach to any GameObject in the scene. Wire up Hand in inspector.\r\n/// Can be left empty for now \u2014 fuse lines are a Day 2 polish task.\r\n/// \u003C/summary\u003E\r\npublic sealed class GridRenderer : Component\r\n{\r\n\t[Property] public BombHandSystem Hand { get; set; }\r\n\t[Property] public GridManager Grid { get; set; }\r\n\r\n\t[Property] public SoundEvent ExplosionSound { get; set; }\r\n\t[Property] public SoundEvent ChestOpenSound { get; set; }\r\n\t[Property] public SoundEvent FuseSound { get; set; }\r\n\r\n\tprotected override void OnStart()\r\n\t{\r\n\t\tif ( Hand is null ) return;\r\n\t\tHand.OnChainStep \u002B= HandleChainStep;\r\n\t\tHand.OnDetonationFinished \u002B= ( _, _ ) =\u003E ClearFuseLines();\r\n\t}\r\n\r\n\treadonly System.Collections.Generic.List\u003CGameObject\u003E _fuseLines = new();\r\n\r\n\tvoid HandleChainStep( int stepIdx, int totalSteps, int chestsSoFar, int projectedCleared, float mult )\r\n\t{\r\n\t\tvar sim = Hand?.PreviewChain();\r\n\t\tif ( sim == null || stepIdx \u003E= sim.Sequence.Count ) return;\r\n\t\tvar node = sim.Sequence[stepIdx];\r\n\r\n\t\tif ( FuseSound is not null )\r\n\t\t\tSound.Play( FuseSound, Grid?.CellWorldPos( node.R, node.C ) ?? Vector3.Zero );\r\n\r\n\t\t// Fuse line visual \u2014 Day 2 task, skip for now\r\n\t}\r\n\r\n\tvoid ClearFuseLines()\r\n\t{\r\n\t\tforeach ( var go in _fuseLines )\r\n\t\t\tif ( go.IsValid() ) go.Destroy();\r\n\t\t_fuseLines.Clear();\r\n\t}\r\n}\r\n"},{"Ident":"playnplay.10_xplosion","Path":"Game/Challenge/WaveChallenge.cs","FileName":"WaveChallenge.cs","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"using Sandbox;\r\n\r\npublic enum ChallengeType\r\n{\r\n ClearAtLeast, // clear N\u002B chests this wave\r\n ChainLength, // trigger a chain of N\u002B bombs\r\n ClearGem, // destroy at least 1 gem chest\r\n NoBombType, // clear MinChests without using a specific bomb type\r\n ClearInOneBlast, // all chests cleared by a single bomb (no chain needed)\r\n ClearBombChest, // destroy a BombChest\r\n ClearAll,\r\n ChainDepth3,\r\n NoDamage,\r\n}\r\n\r\npublic class WaveChallenge\r\n{\r\n public ChallengeType Type;\r\n public int Target; // N for numeric challenges\r\n public GridManager.BombType ForbiddenBomb; // for NoBombType\r\n public string Label; // shown in UI\r\n public int BonusCoins; // reward on completion\r\n public bool Completed;\r\n public bool Failed; // for challenges that can be failed mid-wave\r\n}"},{"Ident":"playnplay.10_xplosion","Path":"ui/controls/enumcontrol.cs.scss","FileName":"enumcontrol.cs.scss","PackageType":"game","CodeKind":"Game","AssetVersionId":336099,"Code":"EnumControl\r\n{\r\n\tgap: 2px;\r\n\tflex-grow: 1;\r\n}\r\n\r\nEnumControl DropDown,\r\nEnumControl ButtonGroup\r\n{\r\n\tborder-radius: 8px;\r\n\tbackground-color: #000a;\r\n\tflex-grow: 1;\r\n}\r\n\r\nEnumControl DropDown\r\n{\r\n\tflex-grow: 1;\r\n\tmin-height: 32px;\r\n}\r\n\r\nEnumControl ButtonGroup\r\n{\r\n\tborder-radius: 12px;\r\n\toverflow: hidden;\r\n\tmin-height: 32px;\r\n\r\n\tButton\r\n\t{\r\n\t\tflex-grow: 1;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\tgap: 4px;\r\n\t\tcolor: #aaa;\r\n\t\tfont-size: 1rem;\r\n\t\tcursor: pointer;\r\n\r\n\t\t.icon\r\n\t\t{\r\n\t\t\tcolor: #08f;\r\n\t\t}\r\n\r\n\t\t\u0026:hover\r\n\t\t{\r\n\t\t\tcolor: #ddd;\r\n\r\n\t\t\t.icon\r\n\t\t\t{\r\n\t\t\t\tcolor: #3af;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t\u0026:active\r\n\t\t{\r\n\t\t\tbackground-color: #04a;\r\n\t\t\tcolor: white;\r\n\t\t\ttransform: translateX( 1px ) translateY( 1px );\r\n\r\n\t\t\t.icon\r\n\t\t\t{\r\n\t\t\t\tcolor: #fff;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t\u0026.active\r\n\t\t{\r\n\t\t\tbackground-color: #08f;\r\n\t\t\tcolor: white;\r\n\t\t\tpointer-events: none;\r\n\r\n\t\t\t.icon\r\n\t\t\t{\r\n\t\t\t\tcolor: #fff;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}"}]}