/* Fill unused space in the framework game pane with the board background. */
#game.thunderstone2-state-3 { background:#302a20; scrollbar-gutter:stable; }
/* Both framework scrollers need stable gutters before card layout changes height. */
#content.thunderstone2-state-4 { background:#302a20; scrollbar-gutter:stable; }
.tsEventNotice .modal-content { background:#203333; color:#f6e7c9; border:1px solid #aa8b54; }
.tsEventNotice .modal-header,.tsEventNotice .modal-footer { border-color:#aa8b5466; }
.tsEventNotice .modal-title { font-family:Georgia,serif; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .modal-content { background:#203333; color:#f6e7c9; border:1px solid #aa8b54; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .modal-header { border-color:#aa8b5466; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .modal-title { font-family:Georgia,serif; }
.tsPolymorphPreview { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.tsRubyBody { text-align:left; }
.tsRubyCards { display:flex; justify-content:center; gap:24px; margin-bottom:16px; }
.tsRubyEffect { white-space:pre-line; border-left:3px solid #aa8b54; padding:8px 12px; background:#152626; }
.tsRubyActions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.tsEffectBody { text-align:left; }
.tsEffectChoices,.tsEffectPicked,.tsEffectAssignments,.tsEffectRevealed { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; margin:12px 0; }
.tsPlannedEffect .tsEffectRevealed .tsCard { width:80px; }
.tsEffectAssignment { display:flex; align-items:center; gap:8px; padding:6px; border:1px solid #aa8b5466; border-radius:5px; }
.tsPlannedEffect .tsEffectAssignment .tsCard,.tsPlannedEffect .tsEffectPicked .tsCard { width:80px; }
.tsEffectPicked>span { flex-basis:100%; }
.tsEffectActions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.tsExperienceChoices { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.tsExperienceChoices button { min-width:34px; padding:6px 10px; border:1px solid #c29a57; border-radius:5px; background:linear-gradient(#4b3a24,#271e15); color:#ffe6ad; font-family:Georgia,serif; font-weight:bold; }
.tsExperienceChoices button:hover,.tsExperienceChoices button:focus-visible { background:linear-gradient(#8a622b,#4b341b); outline:2px solid #ffe4a1; outline-offset:2px; }
.tsEffectRule,.tsEffectReward { white-space:pre-line; padding:8px; border-left:3px solid #aa8b54; background:#152626; }
.tsEffectNote,.tsEffectCardCaption { font-size:12px; }
.tsEffectCardCaption { display:block; text-align:center; }
.tsEffectChoices .tsCardAction:hover,.tsEffectChoices .tsCardAction:focus-visible { outline:2px solid #ffe2a0; outline-offset:2px; }
#Thunderstone2 .tsEffectInline { display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; padding:8px; background:#203333; border:1px solid #aa8b54; border-radius:5px; }
#Thunderstone2 .tsEffectInline>span { flex:1 1 200px; }
.tsPolymorphPreview p { margin:0; text-align:left; font-size:14px; line-height:1.45; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .modal-footer { display:none; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .btn-close { filter:invert(1); }
.tsPolymorphTargets { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:18px; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .tsCard { position:relative; width:130px; flex:none; max-width:100%; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .tsCardAction { display:block; width:100%; padding:0; border:0; border-radius:7px; overflow:hidden; background:transparent; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .tsCardAction img { display:block; width:100%; height:auto; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .tsCardAction:disabled { cursor:default; }
.tsPolymorphTargets .tsCardAction:hover,.tsPolymorphTargets .tsCardAction:focus-visible { outline:2px solid #ffe2a0; outline-offset:3px; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .tsHelp { position:absolute; top:0; left:0; width:100%; height:25px; padding:2px; border:0; background:transparent; color:#fff4d4; text-align:left; }
:is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .tsHelp svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
@media(max-width:600px) { :is(.tsPolymorphChoice,.tsRubyProtection,.tsPlannedEffect) .tsCard { width:90px; } .tsPolymorphPreview { gap:12px; } }
.tsNoticeTraps { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.tsNoticeTraps>div { flex:0 1 220px; }
.tsNoticeTraps img { display:block; width:180px; height:auto; max-width:100%; margin:0 auto 12px; border-radius:5px; }
.tsNoticeTraps p { white-space:pre-line; }
.tsNoticeEvent { margin-top:12px; padding-top:10px; border-top:1px solid #aa8b5466; }
.tsNoticeEvent h3 { font-size:13px; color:#f6dca6; }
.tsNoticeRule { white-space:pre-line; font-size:13px; color:#f6dca6; }
.tsNoticeOutcome { margin-top:10px; }
.tsNoticeEvent .tsLogCard { display:inline-block; width:42px; vertical-align:middle; position:relative; }
.tsNoticeEvent .tsLogCard>img { width:42px; height:auto; }
.tsNoticeEvent .tsHelp { display:none; }
.tsTrainingChoice .modal-content { background:#203333; color:#f6e7c9; border:1px solid #aa8b54; }
.tsTrainingChoice .modal-header { border-color:#aa8b5466; }
.tsTrainingOptions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tsTrainingOptions button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:18px 8px; border:1px solid #aa8b54; border-radius:6px; background:#192c32; color:#fff0cd; font-weight:600; }
.tsTrainingOptions button:focus-visible { outline:2px solid #fff0cd; outline-offset:2px; }
.tsTrainingOptions .tsTrainingFight { background:#633a24; }
.tsTrainingOptions svg { width:48px; height:48px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#Thunderstone2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,34%) 150px; gap:8px; padding:8px 2px 8px 8px; box-sizing:border-box; min-width:0; color:#f6e7c9; background:linear-gradient(135deg,#192c32,#263332 50%,#46321e); }
#Thunderstone2 * { box-sizing:border-box; }
#Thunderstone2 h2 { font-size:clamp(12px,1.1vw,17px); font-weight:600; margin:0; color:inherit; line-height:1.3; }
#Thunderstone2 .tsZone { display:flex; flex-direction:column; min-height:0; min-width:0; border:1px solid #8f795650; border-radius:7px; padding:6px; background:#0b161a55; gap:5px; }
#tsBoard { display:grid; grid-template-rows:1fr 1fr 1fr auto; gap:6px; min-width:0; min-height:0; }
#Thunderstone2 .tsCards { display:flex; flex:1; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; gap:4px; min-width:0; min-height:0; }
#Thunderstone2 .tsSupply { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); place-items:center; gap:4px; }
#Thunderstone2 .tsDungeon { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; align-content:stretch; }
#Thunderstone2 .tsDungeonSlot { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; min-height:0; padding:3px; }
#Thunderstone2 .tsDungeonCage { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; padding:4px; }
#Thunderstone2 .tsSlotNumber { position:absolute; inset:0; display:grid; place-items:center; color:#ffffff24; font-size:clamp(28px,5vw,64px); font-weight:700; pointer-events:none; }
#Thunderstone2 .tsSlotCard { position:relative; display:flex; flex:1; align-items:center; justify-content:center; min-height:0; width:100%; }
#Thunderstone2 .tsSlotStats { display:flex; flex:none; justify-content:center; align-items:center; gap:clamp(2px,.5vw,8px); width:100%; font-size:11px; line-height:20px; }
#Thunderstone2 .tsSlotStats span { display:flex; align-items:center; gap:2px; min-width:0; }
#Thunderstone2 .tsSlotStats img { width:clamp(10px,1.4vw,18px); height:18px; object-fit:contain; }
#Thunderstone2 .tsCard { position:relative; width:var(--ts-card-width,80px); max-width:100%; flex:none; aspect-ratio:0.69; }
#Thunderstone2 .tsEquipment { position:relative; flex:none; width:calc(var(--ts-card-width,80px)*(1 + var(--ts-equipment-count)*.2)); height:auto; padding-top:calc(var(--ts-card-width,80px)/.69*(1 + var(--ts-equipment-count)*.2)); }
#Thunderstone2 .tsEquipment>.tsCard { position:absolute; max-width:none; left:calc(var(--ts-card-width,80px)*var(--ts-stack-offset)*.2); top:calc(var(--ts-card-width,80px)/.69*var(--ts-stack-offset)*.2); }
#Thunderstone2 .tsCardAction { display:block; width:100%; height:100%; padding:0; border:2px solid transparent; border-radius:5px; background:transparent; cursor:default; }
#Thunderstone2 .tsCardAction:not(:disabled) { cursor:pointer; border-color:#edc267; box-shadow:0 0 5px #edc267; }
#Thunderstone2 #tsVillage .tsCardAction:not(:disabled) { border-color:#ffe09a; box-shadow:0 0 0 3px #111a1c; }
#Thunderstone2 #tsVillage .tsCardAction:focus-visible { border-color:white; outline:2px solid #ffe09a; outline-offset:3px; }
#Thunderstone2 .tsCardAction:focus-visible { border-color:white; outline:2px solid #c29444; }
#Thunderstone2 .tsCard button { opacity:1; }
#Thunderstone2 .tsCard img { display:block; width:100%; height:100%; object-fit:contain; border-radius:4px; }
#Thunderstone2 .tsHelp { position:absolute; top:2px; left:2px; width:calc(100% - 4px); height:14%; min-height:14px; border:0; border-radius:3px; background:transparent; color:#fff4d4; cursor:pointer; padding:0; display:flex; align-items:flex-start; }
#Thunderstone2 .tsHelp svg { display:block; width:14px; height:14px; flex:none; padding:1px; border:1px solid #c1ac70; border-radius:50%; background:#172b32ed; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
#Thunderstone2 .tsHelp:focus-visible { outline:2px solid #edc267; outline-offset:1px; }
#Thunderstone2 .tsBadge { position:absolute; bottom:2px; left:2px; max-width:calc(100% - 4px); padding:1px 4px; color:#fff; background:#172b32ed; border-radius:3px; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
#Thunderstone2 .tsHeroFan { position:relative; width:var(--ts-card-width,80px); max-width:100%; aspect-ratio:.5390625; }
#Thunderstone2 .tsHeroFan .tsCard { position:absolute; left:0; top:calc(var(--fan-offset)*var(--ts-fan-step,10.9375%)); height:var(--ts-fan-card-height,78.125%); }
#Thunderstone2 .tsHeroCount,#Thunderstone2 .tsSupplyCount,#Thunderstone2 .tsHandCount { position:absolute; top:2px; right:2px; padding:0 3px; color:white; background:#172b32ed; border-radius:3px; font-size:11px; line-height:13px; pointer-events:none; }
#Thunderstone2 .tsCard>.tsHandCount { right:24px; }
#Thunderstone2 .tsHeroFan>.tsHeroOwnedCounts { right:24px; z-index:4; }
/* Hero combat values follow their printed strength, light and attack areas. */
#Thunderstone2 .tsStatChanges { position:absolute; inset:0; pointer-events:none; z-index:2; }
#Thunderstone2 .tsStatChange { display:flex; align-items:center; justify-content:center; gap:3px; min-height:20px; padding:0 2px; border:1px solid #899898; border-radius:3px; background:#132728f5; color:#f1f3ed; font-size:12px; line-height:18px; pointer-events:auto; cursor:help; }
#Thunderstone2 .tsStatChange.tsStatIncreased { border-color:#e5c578; color:#ffe09a; }
#Thunderstone2 .tsStatChange.tsStatReduced { border-color:#ee9b94; color:#ffd5cf; }
#Thunderstone2 .tsCard .tsStatChange img { width:13px; height:16px; object-fit:contain; border-radius:0; }
#Thunderstone2 .tsCard .tsStatChange[data-stat="5"] img { width:16px; height:18px; }
#Thunderstone2 .tsHandCount svg { width:11px; height:13px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; }
#Thunderstone2 .tsExhausted .tsCardAction { opacity:.4; }
#Thunderstone2 .tsUsed .tsCardAction { filter:brightness(.8); }
#Thunderstone2 .tsDestroyed { filter:grayscale(1); }
#tsPlayers { display:flex; flex-direction:column; gap:6px; min-height:0; }
#Thunderstone2 .tsPlayer { flex:none; min-height:0; padding:5px; background:#ffffff10; border:1px solid #b19a6c55; border-radius:7px; }
#Thunderstone2 .tsPlayer h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#Thunderstone2 .tsPlayerCounts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:2px; margin-top:2px; }
#Thunderstone2 .tsHallLights { display:flex; flex-direction:column; gap:6px; margin-right:8px; }
#Thunderstone2 .tsSlotCard.thunderstone2-state-5 { flex-wrap:wrap; }
#Thunderstone2 .tsSharedLight { display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px; border:1px solid #e6c775; border-radius:8px; background:linear-gradient(#294d55,#13282f); color:#fff0c9; box-shadow:0 0 8px #eed59055; font-size:18px; cursor:help; }
#Thunderstone2 .tsSharedLight img { width:30px; height:30px; object-fit:contain; }
#Thunderstone2 .tsPlayerPile { position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:32px; min-width:0; padding:0; border:0; background:none; color:white; }
#Thunderstone2 button.tsPlayerPile { cursor:pointer; }
#Thunderstone2 button.tsPlayerPile:disabled { cursor:default; }
#Thunderstone2 button.tsPlayerPile:focus-visible { outline:2px solid #edc267; border-radius:3px; }
#Thunderstone2 .tsPileArt { display:block; width:100%; height:30px; object-fit:contain; }
#Thunderstone2 .tsPlayerPile strong { position:absolute; font-size:13px; text-shadow:0 1px 2px black,0 0 3px black; }
#Thunderstone2 .tsPlayerToken { position:relative; display:flex; align-items:flex-end; justify-content:center; width:100%; height:32px; min-width:0; }
#Thunderstone2 .tsTokenLabel { position:absolute; top:0; font-size:8px; line-height:9px; font-weight:bold; }
#Thunderstone2 .tsPlayerToken img { width:100%; max-width:24px; height:24px; object-fit:contain; }
#Thunderstone2 .tsPlayerToken strong { position:absolute; bottom:3px; font-size:12px; text-shadow:0 1px 2px black,0 0 3px black; color:white; }
#Thunderstone2 .tsOnTurn { box-shadow:inset 3px 0 #e7bf6a; }
#Thunderstone2 .tsStart { color:#f0ca70; font-size:.85em; }
#Thunderstone2 .tsZone h2 { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:3px 8px; }
#Thunderstone2 .tsCombatStats,#Thunderstone2 .tsGoldStats { font-size:12px; font-weight:400; }
#Thunderstone2 .tsGoldStats { display:inline-flex; align-items:center; gap:4px; }
#Thunderstone2 .tsGoldStats img { width:20px; height:20px; object-fit:contain; }
#Thunderstone2 .tsMotionPile { display:inline-flex; width:19px; height:25px; align-items:center; justify-content:center; }
#Thunderstone2 .tsMotionPile img,#Thunderstone2 .tsMotionPile svg { width:100%; height:100%; object-fit:contain; }
#Thunderstone2 .tsDestroyedCards svg { fill:none; stroke:currentColor; stroke-width:1.5; }
.tsFlyingCard { pointer-events:none; }
.tsFlyingCard .tsCardAction { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; }
.tsFlyingCard img { display:block; width:100%; height:100%; object-fit:contain; border-radius:4px; }
#Thunderstone2 .tsMotionHero { z-index:1001!important; }
.tsFlyingCard.tsMotionHero { z-index:1001!important; }
.tsMotionTarget { position:absolute; visibility:hidden; pointer-events:none; }
#Thunderstone2 .tsHandTools { display:inline-flex; align-items:center; gap:8px; }
#tsActions { display:flex; flex-wrap:wrap; gap:5px; align-items:center; min-height:31px; }
#tsActions .tsSelection { display:flex; gap:5px; min-width:0; flex:1; }
#tsActions select { min-width:0; }
.tsPopover { --bs-popover-bg:#1c2b2b; --bs-popover-header-bg:#263b3b; --bs-popover-header-color:#f6dca6; --bs-popover-body-color:#f6e7c9; --bs-popover-border-color:#aa8b54; --bs-popover-border-radius:8px; max-width:min(340px,90vw); background:#1c2b2b; border:1px solid #aa8b54; border-radius:8px; box-shadow:0 6px 24px #0009; }
.tsPopover .popover-header { padding:10px 14px; background:linear-gradient(135deg,#304343,#263332); color:#f6dca6; border-bottom:1px solid #aa8b5480; border-radius:7px 7px 0 0; font:600 15px/1.35 Georgia,serif; overflow-wrap:anywhere; }
.tsPopover .popover-body { max-height:75vh; overflow:auto; padding:14px; color:#f6e7c9; scrollbar-color:#aa8b54 #1c2b2b; }
.tsPopover .tsCardInfo img { display:block; width:auto; max-width:100%; height:auto; max-height:min(40vh,320px); margin:auto; border-radius:5px; box-shadow:0 2px 10px #0008; }
.tsPopover .tsCardInfo p { white-space:pre-line; font-size:14px; line-height:1.55; margin:14px 0 0; padding-top:12px; border-top:1px solid #aa8b5455; overflow-wrap:anywhere; }
@media(prefers-reduced-motion:reduce) { #Thunderstone2 * { animation:none!important; transition:none!important; } }
#Thunderstone2 .tsDestroyChoices { position:absolute; bottom:3px; left:3px; right:3px; display:flex; justify-content:center; gap:3px; z-index:4; }
#Thunderstone2 .tsDestroyChoices.tsAlongsideUpgrade { right:50%; }
#Thunderstone2 .tsEquipmentActions { display:grid; gap:4px; margin-top:5px; }
#Thunderstone2 .tsEquipmentActionGroup { padding:4px; border:1px solid #aa8b54; border-radius:4px; background:#172b32; }
#Thunderstone2 .tsEquipmentActionName { font-size:12px; line-height:1.3; margin-bottom:3px; overflow-wrap:anywhere; }
#Thunderstone2 .tsEquipmentActions .tsDestroyChoices { position:static; }
#Thunderstone2 .tsEquipmentActions .tsDestroyChoice { min-height:36px; font-size:12px; }
#Thunderstone2 .tsBorderGuardChoices .tsDestroyIcon svg { width:28px; height:28px; }
#Thunderstone2 .tsBorderGuardChoices .tsDestroyCaption { font-size:11px; line-height:1.2; }
#Thunderstone2 .tsDestroyChoice,#Thunderstone2 .tsDestroyTarget { border:1px solid #edc267; border-radius:5px; background:#192c32f2; color:#fff0cd; cursor:pointer; padding:3px; box-shadow:0 1px 4px #0009; }
#Thunderstone2 .tsDestroyChoice { display:grid; justify-items:center; flex:1; min-width:0; font-size:clamp(8px,.8vw,11px); line-height:1.15; }
#Thunderstone2 .tsDestroyIcon { display:block; width:23px; height:25px; }
#Thunderstone2 .tsDestroyIcon .tsAttackSymbol { width:100%; height:100%; object-fit:contain; }
#Thunderstone2 .tsAttackPenaltyChoice { display:flex; align-items:center; justify-content:center; gap:6px; font-size:18px; }
#Thunderstone2 .tsWarHeroChoice { display:flex; align-items:center; justify-content:center; gap:6px; font-size:18px; }
#Thunderstone2 .tsWarHeroChoice>.tsAttackSymbol { width:23px; height:25px; object-fit:contain; }
#Thunderstone2 .tsExperienceGainChoice { display:flex; align-items:center; justify-content:center; gap:6px; font-size:18px; }
#Thunderstone2 .tsExperienceGainChoice>img { width:25px; height:25px; object-fit:contain; }
#Thunderstone2 .tsMilitiaStrengthChoice .tsDestroyIcon { width:auto; }
#Thunderstone2 .tsStrengthBonus { display:flex; align-items:center; gap:4px; height:25px; font-size:18px; }
#Thunderstone2 .tsStrengthBonus img { width:23px; height:23px; object-fit:contain; }
#Thunderstone2 .tsDrawReturnChoice { display:flex; align-items:center; justify-content:center; gap:12px; font-size:16px; }
#Thunderstone2 .tsDrawReturnChoice>span { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
#Thunderstone2 .tsDrawReturnChoice svg { width:21px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#Thunderstone2 .tsAbilityChoice { min-width:0; }
#Thunderstone2 .tsAbilityChoice .tsDestroyCaption,#Thunderstone2 .tsEffectDoneChoice .tsDestroyCaption { white-space:normal; overflow-wrap:anywhere; }
#Thunderstone2 .tsDestroyIcon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#Thunderstone2 .tsDestroyCaption,#Thunderstone2 .tsDestroyReward { display:block; }
#Thunderstone2 .tsDestroyReward { color:#f3cb78; font-weight:600; }
#Thunderstone2 .tsDestroyReward img { display:inline-block; width:13px; height:13px; margin-left:2px; vertical-align:middle; }
#Thunderstone2 .tsDestroyTarget { position:absolute; bottom:4px; right:4px; z-index:4; }
#Thunderstone2 .tsDestroyChoice:focus-visible,#Thunderstone2 .tsDestroyTarget:focus-visible { outline:2px solid #fff0cd; outline-offset:1px; background:#543b22; }
#Thunderstone2 .tsUpgradeControl { position:absolute; bottom:4px; right:4px; z-index:4; width:33px; height:36px; padding:4px; border:1px solid #edc267; border-radius:5px; background:#192c32f2; color:#fff0cd; cursor:pointer; box-shadow:0 1px 4px #0009; }
#Thunderstone2 .tsUpgradeControl svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#Thunderstone2 .tsUpgradeControl:focus-visible { outline:2px solid #fff0cd; outline-offset:1px; background:#543b22; }
#Thunderstone2 .tsResponseSelected .tsCardAction { filter:brightness(.8); border:2px dashed #edc267; }

/* Cards have a readable floor; the framework game pane scrolls vertically. */
#Thunderstone2 { grid-template-columns:minmax(350px,1fr) minmax(430px,1fr) 160px; align-items:start; gap:4px; padding:4px; height:auto; }
#Thunderstone2 #tsBoard { display:flex; flex-direction:column; gap:4px; min-height:0; }
#Thunderstone2 .tsZone { position:relative; padding:4px 4px 4px 25px; gap:3px; min-height:0; }
#Thunderstone2 .tsZone h2 { justify-content:flex-end; min-height:0; font-size:12px; }
#Thunderstone2 .tsZoneTitle { position:absolute; left:4px; top:6px; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-size:11px; letter-spacing:.4px; color:#e8ca91; }
#Thunderstone2 #tsHeroes { min-height:72px; }
#Thunderstone2 .tsCards { flex:none; align-content:start; gap:4px; min-height:0; }
#Thunderstone2 #tsHeroes .tsCards:empty { min-height:38px; }
#Thunderstone2 #tsHand .tsCards:empty { min-height:38px; }
#Thunderstone2 .tsCard { min-width:96px; }
#Thunderstone2 .tsSupply { grid-template-columns:repeat(var(--ts-columns,4),minmax(0,1fr)); grid-template-rows:none; gap:6px 4px; }
#Thunderstone2 .tsDungeon { grid-template-columns:repeat(var(--ts-columns,4),minmax(0,1fr)); gap:3px; }
#Thunderstone2 .tsDungeonSlot { padding:2px; gap:2px; }
#Thunderstone2 .tsDungeonSlot[data-position="0"]:not(.thunderstone2-state-6) { display:none; }
#Thunderstone2 .tsSlotCard { flex:none; min-height:calc(var(--ts-card-width,100px)/.69); }
#Thunderstone2 .tsSlotStats { gap:3px; font-size:11px; }
#Thunderstone2 #tsPlayers { gap:4px; }
#Thunderstone2 .tsPlayer { padding:4px; }
#Thunderstone2 .tsPlayer h2 { display:flex; align-items:center; gap:3px; }
#Thunderstone2 .tsInventoryButton { display:inline-flex; align-items:center; gap:4px; border:1px solid #9c8153; border-radius:4px; background:#17282a; color:#f4dcac; padding:2px 5px; cursor:pointer; font-size:13px; }
#Thunderstone2 .tsPlayer h2 .tsInventoryButton { margin-left:auto; }
#Thunderstone2 .tsDungeonInventory .tsMotionPile,#Thunderstone2 .tsDungeonHallInventory .tsMotionPile { width:15px; height:20px; }
#Thunderstone2.tsCompact { grid-template-columns:minmax(350px,1fr) minmax(430px,1fr); grid-template-rows:max-content auto; }
#Thunderstone2.tsCompact #tsBoard { grid-column:1; grid-row:1; }
#Thunderstone2.tsCompact #tsVillage { grid-column:2; grid-row:1/3; }
#Thunderstone2.tsCompact #tsPlayers { grid-column:1; grid-row:2; flex-direction:row; flex-wrap:wrap; align-self:start; }
#Thunderstone2.tsCompact .tsPlayer { flex:0 1 180px; min-width:145px; }
#Thunderstone2.tsPhone { display:flex; flex-direction:column; min-height:0; }
#Thunderstone2.tsPhone #tsBoard,#Thunderstone2.tsPhone #tsVillage { width:100%; min-height:0; }
#Thunderstone2.tsPhone #tsBoard { order:0; }
#Thunderstone2.tsPhone #tsPlayers { order:1; width:100%; }
#Thunderstone2.tsPhone #tsVillage { order:2; }
#Thunderstone2 .tsModeButton { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border:1px solid #c29a57; border-radius:5px; background:linear-gradient(#4b3a24,#271e15); color:#ffe6ad; box-shadow:inset 0 1px #e7c68440,0 2px 3px #0005; font-family:Georgia,serif; font-weight:bold; }
#Thunderstone2 .tsModeDungeon { background:linear-gradient(#35434c,#182229); }
#Thunderstone2 .tsModeRest { background:linear-gradient(#3c4b30,#202b1c); }
#Thunderstone2 .tsModeButton svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tsInventoryDialog .modal-dialog { width:calc(100% - 24px); max-width:720px; margin:12px auto; min-height:calc(100% - 24px); height:calc(100% - 24px); }
.tsInventoryDialog .modal-content { max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); background:#1c2b2b; color:#f6e7c9; border:1px solid #aa8b54; border-radius:8px; box-shadow:0 6px 24px #0009; }
.tsInventoryDialog .modal-header { flex:none; gap:12px; background:#263b3b; border-color:#aa8b5480; }
.tsInventoryDialog .modal-title { font:600 18px/1.35 Georgia,serif; overflow-wrap:anywhere; }
.tsInventoryDialog .btn-close { flex:none; min-width:44px; min-height:44px; box-sizing:border-box; margin:-6px -6px -6px auto; padding:12px; opacity:1; }
.tsInventoryDialog .modal-body { min-height:0; padding:12px; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; scrollbar-color:#aa8b54 #1c2b2b; }
.tsInventoryDialog .modal-body:focus-visible { outline:2px solid #edc267; outline-offset:-3px; }
.tsDungeonFans { display:grid; grid-template-columns:repeat(auto-fit,160px); justify-content:center; gap:16px 10px; }
.tsDungeonStack h3 { font: bold 12px/1.35 Georgia,serif; color:#f6dca6; min-height:34px; margin:0 0 5px; overflow-wrap:anywhere; }
.tsDungeonFan { position:relative; width:160px; }
.tsDungeonOverviewCard { position:absolute; width:160px; height:230px; }
.tsDungeonOverviewCard>img { display:block; width:160px; height:230px; border-radius:8px; }
.tsDungeonOverviewCard .tsHelp { position:absolute; top:2px; left:2px; width:calc(100% - 4px); height:28px; border:0; border-radius:3px; background:transparent; color:#fff4d4; cursor:pointer; padding:0; display:flex; align-items:flex-start; }
.tsDungeonOverviewCard .tsHelp svg { display:block; width:16px; height:16px; flex:none; padding:1px; border:1px solid #c1ac70; border-radius:50%; background:#172b32; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.tsDungeonOverviewCard .tsHelp:focus-visible { outline:2px solid #edc267; outline-offset:1px; }
.tsDungeonCardCount { position:absolute; top:0; right:0; padding:1px 4px; border-radius:0 3px; background:#172b32; color:#ffe6ad; font:bold 13px Arial,sans-serif; line-height:18px; }
.tsDiseaseCards { display:grid; grid-template-columns:repeat(auto-fit,160px); justify-content:center; gap:8px; }
.tsDiseaseCards .tsDungeonOverviewCard { position:relative; }
#Thunderstone2 .tsDiseaseInventoryButton>svg { width:15px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
#Thunderstone2 .tsDiseaseInventoryButton { margin-left:auto; }
#Thunderstone2 .tsDiseaseSupplyIcon { display:block; position:relative; width:20px; height:20px; overflow:hidden; border-radius:2px; flex:none; }
#Thunderstone2 .tsDiseaseSupplyIcon img { position:absolute; width:31px; height:44px; max-width:none; left:-5px; top:-6px; }

/* Three places: the cavern, the village square and the adventurers' tavern. */
#Thunderstone2,#Thunderstone2.tsCompact { grid-template-columns:minmax(350px,1fr) minmax(430px,1fr); grid-template-rows:auto; background:#302a20; }
#Thunderstone2 #tsBoard { grid-column:1; grid-row:1; gap:6px; }
#Thunderstone2 #tsVillage,#Thunderstone2.tsCompact #tsVillage { grid-column:2; grid-row:1; }
#Thunderstone2 .tsScene { border:1px solid #a58b5b; border-radius:8px; overflow:hidden; background-size:cover; background-position:center; box-shadow:inset 0 0 28px #0004; }
#Thunderstone2 #tsDungeonScene { display:flex; flex-direction:column; gap:0; background-image:linear-gradient(90deg,#293a3440,#0b172a70 55%,#030813b0),url('../images/shared/scenes/dungeon.webp'); }
#Thunderstone2 #tsDungeonScene .tsZone { border:0; border-radius:0; background:transparent; }
#Thunderstone2 #tsHall { padding-top:8px; padding-bottom:8px; }
#Thunderstone2 #tsHeroes { padding-top:7px; padding-bottom:7px; border-top:1px solid #b19a6c66; background:linear-gradient(90deg,#84634448,#131d2b80); }
#Thunderstone2 .tsSlotStats { width:var(--ts-card-width,100px); max-width:100%; border-radius:3px; background:#0b1626c9; color:#fff0c9; }
#Thunderstone2 #tsTavernScene { display:flex; flex-direction:column; gap:6px; padding-bottom:7px; background-image:linear-gradient(#38220d35,#21140775),url('../images/shared/scenes/tavern.webp'); background-position:center bottom; }
#Thunderstone2 #tsHand { border:0; border-radius:0; background:#402a1545; padding-top:8px; padding-bottom:8px; }
#Thunderstone2 #tsActions { padding:0 8px; }
#Thunderstone2 #tsPlayers,#Thunderstone2.tsCompact #tsPlayers { display:flex; flex-direction:row; flex-wrap:wrap; align-self:stretch; gap:5px; padding:2px 8px 0; width:100%; }
#Thunderstone2 .tsPlayer,#Thunderstone2.tsCompact .tsPlayer { flex:0 1 180px; min-width:145px; background:#2d2014e8; border-color:#d0ad6e88; box-shadow:0 1px 4px #0005; }
#Thunderstone2 #tsVillage { background-image:linear-gradient(#f6e1ad25,#a9b77d25),url('../images/shared/scenes/village.webp'); background-position:center top; border-color:#bca16b; padding-top:8px; padding-bottom:8px; }
#Thunderstone2 #tsVillage .tsZoneTitle { color:#fff5d6; text-shadow:0 1px 3px #35240b,0 0 3px #35240b; }
#Thunderstone2 .tsZoneTitle,#Thunderstone2 .tsCombatStats,#Thunderstone2 .tsGoldStats { text-shadow:0 1px 3px #000,0 0 4px #000; }
#Thunderstone2 #tsVillage .tsSupply { gap:4px; padding:5px 3px; border:1px solid #ead4a342; border-radius:5px; background:#15231d62; box-shadow:inset 0 1px 12px #0004; }
#Thunderstone2.tsPhone { display:flex; }
#Thunderstone2.tsPhone #tsVillage { order:1; }

/* Dungeon preparation grows inside the hall only during a dungeon visit. */
#Thunderstone2 #tsHall { padding-left:7px; padding-right:7px; }
#Thunderstone2 #tsHall>h2 { justify-content:space-between; min-height:24px; padding:0 0 4px; }
#Thunderstone2 #tsHall>h2>.tsZoneTitle,#Thunderstone2 #tsHall .tsDungeonTitle>.tsZoneTitle { position:static; writing-mode:horizontal-tb; transform:none; font:600 14px Georgia,serif; }
#Thunderstone2 #tsHall>#tsHeroes { padding:8px 0 0; border:0; background:transparent; min-height:0; }
#Thunderstone2 #tsHeroes>h2 { margin-bottom:4px; }
#Thunderstone2 #tsHeroes .tsCards:empty { min-height:0; }
#Thunderstone2 #tsHand { padding:7px; }
#Thunderstone2 #tsHandHeader { display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; margin-bottom:5px; }
#Thunderstone2 #tsCurrentPlayer { flex:1; min-width:0; }
#Thunderstone2 #tsCurrentPlayer>.tsPlayer { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; padding:4px 6px; }
#Thunderstone2 #tsCurrentPlayer .tsPlayer h2 { flex:1 1 155px; justify-content:flex-start; }
#Thunderstone2 #tsCurrentPlayer .tsPlayerCounts { flex:0 1 180px; width:180px; margin:0; }
#Thunderstone2 #tsHandHeader>h2 { margin-left:auto; }
#Thunderstone2 .tsInventoryTrigger { cursor:pointer; }

#Thunderstone2 .tsModeButton:disabled { opacity:.65; cursor:default; }
#Thunderstone2 .tsModeButton.tsModeSelected { border-color:#ffe4a1; background:linear-gradient(#8a622b,#4b341b); box-shadow:inset 0 0 0 1px #ffdc8d,0 0 5px #e9b74d88; color:#fff7de; opacity:1; }
#Thunderstone2 #tsVillage { padding-left:7px; padding-right:7px; }
#Thunderstone2 #tsVillage>h2 { justify-content:flex-start; min-height:24px; padding:0; }
#Thunderstone2 #tsVillage>h2>.tsZoneTitle { position:static; writing-mode:horizontal-tb; transform:none; font:600 14px Georgia,serif; }

#Thunderstone2 .tsInventoryButton .tsMotionPile svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* Keep the resolved confrontation visible until the turn is confirmed. */
#Thunderstone2 #tsHeroes.tsBattleResolved { display:grid; grid-template-columns:minmax(0,1fr) 64px 120px; gap:6px; align-items:center; }
#Thunderstone2 .tsBattleResolved>h2 { display:none; }
#Thunderstone2 .tsBattleResolved>.tsCards { grid-column:1; grid-row:1; padding:7px; border:1px solid #ad9c7660; border-radius:7px; background:#111c24b0; min-height:90px; }
#Thunderstone2 #tsBattleResult { display:contents; }
#Thunderstone2 .tsBattlePartyResult { grid-column:1; grid-row:2; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 10px; padding:6px; border-radius:5px; background:#121b26df; }
#Thunderstone2 .tsBattleSideName { font:600 12px Georgia,serif; }
#Thunderstone2 .tsBattleFinalAttack,#Thunderstone2 .tsBattleFinalStrength { font:bold 28px/1 Georgia,serif; color:#fff2d2; text-shadow:0 2px 3px #000; }
#Thunderstone2 .tsBattleClash { grid-column:2; grid-row:1/3; color:#e9ce93; align-self:center; }
#Thunderstone2 .tsBattleClash svg { width:100%; fill:#9a794a55; stroke:currentColor; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
#Thunderstone2 .tsBattleSpark { stroke:#fff0b5; }
#Thunderstone2 .tsBattleMonster { grid-column:3; grid-row:1/3; display:flex; flex-direction:column; align-items:center; gap:7px; padding:6px; border:1px solid #a96c6480; border-radius:7px; background:#241c21dc; }
#Thunderstone2 .tsBattleMonsterCard { position:relative; width:104px; }
#Thunderstone2 .tsBattleMonsterCard img { width:100%; height:auto; display:block; border-radius:4px; }
#Thunderstone2 .tsBattleBadge { display:inline-flex; align-items:center; justify-content:center; gap:4px; color:#edb1a4; font:600 12px Georgia,serif; }
#Thunderstone2 .tsBattleBadge svg { width:24px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
#Thunderstone2 .tsBattleVictor { color:#ffe5a3; }
#Thunderstone2 .tsBattleMonster.tsBattleVictor,#Thunderstone2 .tsBattlePartyWon>.tsCards { border-color:#f3d181; box-shadow:inset 0 0 14px #e4b44d25,0 0 7px #e4b44d55; }
#Thunderstone2 .tsBattlePartyWon .tsBattleMonsterCard img,#Thunderstone2 .tsBattlePartyLost>.tsCards .tsCardAction { filter:saturate(.35) brightness(.8); }
#Thunderstone2 .tsBattlePartyLost>.tsCards { border-color:#ab6d62; }
#Thunderstone2 .tsBattleMonsterCard .tsHelp { z-index:1; }
#Thunderstone2.tsPhone #tsHeroes.tsBattleResolved { grid-template-columns:minmax(0,1fr) 38px 112px; gap:4px; }

.tsPopover .tsCardInfoSection { margin-top:12px; padding-top:10px; border-top:1px solid #aa8b5455; }
.tsPopover .tsCardInfoSection summary { cursor:pointer; color:#f6dca6; font:600 15px/1.4 Georgia,serif; overflow-wrap:anywhere; }
.tsPopover .tsCardInfoSection summary:focus-visible { outline:2px solid #edc267; outline-offset:3px; border-radius:2px; }
.tsPopover .tsCardInfoSection p { margin:8px 0 0; padding:0; border:0; }

#Thunderstone2 .tsBattleMonsterCard.tsCard { width:104px; }
.tsFinishConfirm .modal-content { background:#1c2b2b; color:#f6e7c9; border:1px solid #aa8b54; }
.tsFinishConfirm .modal-header,.tsFinishConfirm .modal-footer { border-color:#aa8b5455; }
.tsFinishConfirm .modal-title { color:#f6dca6; font-family:Georgia,serif; }
.tsFinishConfirm .modal-body { max-height:60vh; overflow:auto; overflow-wrap:anywhere; }
.tsFinishConfirm li { margin-bottom:8px; }

#Thunderstone2 .tsPlayerLogin { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#Thunderstone2 .tsPlayerTarget { font:inherit; color:#ffe2a0; padding:3px 7px; border:1px solid #dfba70; border-radius:4px; background:linear-gradient(#68502c,#302315); box-shadow:0 0 5px #e7b44e55; cursor:pointer; }
#Thunderstone2 .tsPlayerTarget:focus-visible { outline:2px solid #fff1bd; outline-offset:2px; }

#Thunderstone2 button.tsPlayerPile:not(:disabled) { border:1px solid #9c8153; border-radius:4px; background:#17282a; color:#f4dcac; }

/* Public opponent cards share the available tavern width with hand-sized artwork. */
#Thunderstone2 #tsPlayers { align-items:flex-start; }
#Thunderstone2 #tsPlayers>.tsPlayer { flex:1 1 var(--ts-opponent-basis,230px); min-width:0; max-width:100%; }
#Thunderstone2 #tsPlayers>.tsOpponentWide { flex-basis:100%; }
#Thunderstone2 #tsPlayers .tsOpponentCards { width:100%; justify-content:flex-start; align-items:flex-start; margin-top:6px; }
#Thunderstone2 #tsPlayers .tsPlayerCounts { display:flex; gap:6px; }
#Thunderstone2 #tsPlayers .tsPlayerCounts>* { flex:0 0 30px; }
#Thunderstone2 #tsPlayers .tsCardAction { cursor:default; }

/* Grow village piles with the available desktop height while preserving room for the hand. */
#Thunderstone2:not(.tsPhone) { grid-template-columns:minmax(350px,1fr) clamp(430px,46%,var(--ts-village-width,592px)); align-items:stretch; }
#Thunderstone2.tsCompact:not(.tsPhone) { grid-template-columns:minmax(350px,1fr) clamp(430px,46%,480px); }
#Thunderstone2:not(.tsPhone) #tsBoard { align-self:stretch; }
#Thunderstone2:not(.tsPhone) #tsTavernScene { flex:1; }
#Thunderstone2 #tsVillage { padding-left:4px; padding-right:4px; }
#Thunderstone2 #tsVillage .tsSupply { column-gap:4px; padding-left:2px; padding-right:2px; }
#Thunderstone2 #tsHand { padding-left:3px; padding-right:3px; }
#Thunderstone2 .tsPlayer .tsPlayerLogin { font-size:14px; font-weight:600; line-height:1.3; }

/* All player summaries share one wrapping header, including their gold display. */
#Thunderstone2 #tsCurrentPlayer>.tsPlayer { display:block; }
#Thunderstone2 .tsPlayerHeader { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; width:100%; }
#Thunderstone2 .tsPlayerHeader>h2 { flex:1 1 130px; min-width:0; }
#Thunderstone2 #tsPlayers .tsPlayerCounts,#Thunderstone2 #tsCurrentPlayer .tsPlayerCounts { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; gap:6px; width:auto; max-width:100%; margin:0; }
#Thunderstone2 .tsPlayerCounts>* { flex:0 0 30px; width:30px; }
#Thunderstone2 .tsPlayerCounts .tsGoldStats { flex:0 0 auto; width:auto; min-width:30px; }
#Thunderstone2 .tsVillageTools { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
#Thunderstone2 .tsTutorialLink { display:inline-flex; align-items:center; gap:4px; padding:3px 7px;
    border:1px solid #c1ac70; border-radius:4px; background:#17282a; color:#fff4d4;
    font:600 12px/1.4 system-ui,sans-serif; text-decoration:none; white-space:nowrap; }
#Thunderstone2 .tsTutorialLink:hover { background:#30474a; color:#fff; }
#Thunderstone2 .tsTutorialLink:focus-visible { outline:2px solid #ffd36b; outline-offset:2px; }
#Thunderstone2 .tsVillageTools .tsDiseaseInventoryButton { margin-left:0; }
#Thunderstone2 .tsVillageTools .tsDestroyedCards { width:20px; height:24px; }

#Thunderstone2 #tsHall .tsDungeonTitle { grid-column:1 / -1; margin:6px 0 0; min-height:24px; padding:0 0 4px; }
#Thunderstone2 .tsDungeonCleared { opacity:.5; }
.tsDungeonPartition .modal-dialog { width:var(--ts-partition-width); max-width:none; height:calc(100% - var(--ts-partition-top) - 12px); margin:var(--ts-partition-top) 0 12px var(--ts-partition-left); }
.tsDungeonPartition .modal-content { background:#1c2b2b; color:#f6e7c9; border:1px solid #aa8b54; border-radius:8px; box-shadow:0 6px 24px #0009; }
.tsCardTypeChoice .modal-content { background:#1c2b2b; color:#f6e7c9; border:1px solid #aa8b54; border-radius:8px; }
.tsCardTypeChoice .modal-header { background:#263b3b; border-bottom:1px solid #aa8b54; }
.tsCardTypeChoice .modal-title { color:#f6dca6; font:600 15px/1.35 Georgia,serif; }
.tsCardTypeChoice .btn-close { filter:invert(1); }
.tsCardTypeOptions { display:flex; justify-content:center; gap:14px; }
.tsCardTypeOptions>button { display:grid; place-items:center; width:68px; height:68px; border:1px solid #aa8b54; border-radius:6px; background:#263b3b; color:#fff0cd; }
.tsCardTypeOptions>button:hover,.tsCardTypeOptions>button:focus-visible { background:#543b22; outline:2px solid #edc267; outline-offset:2px; }
.tsCardTypeOptions img { width:60px; height:60px; object-fit:contain; }
.tsDungeonPartition .modal-header { padding:10px 14px; background:#263b3b; border-bottom:1px solid #aa8b54; border-radius:7px 7px 0 0; }
.tsDungeonPartition .modal-title { color:#f6dca6; font:600 15px/1.35 Georgia,serif; }
.tsDungeonPartition .modal-body { padding:10px; scrollbar-color:#aa8b54 #1c2b2b; }
.tsDungeonPartition .modal-footer { padding:10px 14px; border-top:1px solid #aa8b5480; }
.tsDungeonPartition .modal-footer>.btn { border:1px solid #aa8b54; background:#263b3b; color:#f6e7c9; }
.tsDungeonPartition .modal-footer>.tsConfirmPartition { border-color:#ffe4a1; background:linear-gradient(#8a622b,#4b341b); color:#fff7de; }
.tsDungeonPartition .btn:focus-visible { outline:2px solid #edc267; outline-offset:2px; box-shadow:none; }
.tsDungeonPartition .tsPartitionCards { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:8px; }
.tsDungeonPartition .tsPartitionCard { min-width:0; margin:0; text-align:center; }
.tsDungeonPartition .tsPartitionFace { position:relative; }
.tsDungeonPartition .tsPartitionFace>img { display:block; width:100%; height:auto; border-radius:7px; }
.tsDungeonPartition .tsPartitionButtons { position:absolute; bottom:7px; left:7px; right:7px; display:flex; gap:6px; }
.tsDungeonPartition .tsPartitionButtons>.btn { flex:1; font-weight:700; box-shadow:0 1px 4px #0009; color:#f6e7c9; background:#192c32; border:2px solid #aa8b54; padding:4px; transition:none; }
.tsDungeonPartition .tsPartitionButtons>.tsPartitionSelected { color:#fff7de; background:linear-gradient(#8a622b,#4b341b); border-color:#ffe4a1; box-shadow:inset 0 0 0 1px #ffdc8d,0 0 5px #e9b74d88; }
.tsDungeonPartition .tsHelp { position:absolute; top:2px; left:2px; width:calc(100% - 4px); height:30px; border:0; background:transparent; padding:0; color:#fff4d4; display:flex; align-items:flex-start; cursor:pointer; }
.tsDungeonPartition .tsHelp svg { display:block; width:20px; height:20px; padding:2px; border:1px solid #c1ac70; border-radius:50%; background:#172b32ed; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.tsDungeonPartition .tsHelp:focus-visible { outline:2px solid #edc267; outline-offset:2px; }
#Thunderstone2 #tsHall>h2.tsHasSetting { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,1fr); }
#Thunderstone2 #tsHall>h2.tsHasSetting>.tsDungeonInventory { justify-self:end; }
#Thunderstone2 #tsSetting { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; text-align:center; font-size:14px; font-weight:600; line-height:1.3; }
#Thunderstone2 #tsSetting[hidden] { display:none; }
#Thunderstone2 #tsSetting>.tsHelp { position:static; display:inline-flex; flex:none; width:18px; height:18px; padding:0; }
@media(max-width:600px) {
    #Thunderstone2 #tsHall>h2.tsHasSetting { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    #Thunderstone2 #tsHall>h2.tsHasSetting>.tsDungeonInventory { grid-column:2; grid-row:1; }
    #Thunderstone2 #tsSetting { grid-column:1 / -1; grid-row:2; }
}

#Thunderstone2 .tsFigurinePayload { position:absolute; top:5px; right:5px; width:35%; }
#Thunderstone2 .tsFigurinePayload>img { width:100%; height:auto; }

#Thunderstone2 #tsHall .tsDungeonTitle { display:flex; align-items:center; justify-content:space-between; gap:8px; }


#Thunderstone2 .tsHeroCombatValues .tsStatChange { position:absolute; left:var(--ts-hero-x); min-width:27px; min-height:0; padding:0 2px; transform:translate(-50%,-50%); font-size:clamp(9px,calc(var(--ts-card-width,112px)*.1),12px); line-height:1.1; }
#Thunderstone2 .tsHeroCombatValues .tsStatChange[data-stat] img { width:auto; height:clamp(10px,calc(var(--ts-card-width,112px)*.1),14px); }
#Thunderstone2 .tsHeroCombatValues [data-hero-slot="1"] { top:var(--ts-hero-strength); }
#Thunderstone2 .tsHeroCombatValues [data-hero-slot="2"] { top:var(--ts-hero-attack); }
#Thunderstone2 .tsHeroCombatValues [data-hero-slot="3"] { top:var(--ts-hero-extraAttack); }
#Thunderstone2 .tsHeroCombatValues [data-hero-slot="4"] { top:var(--ts-hero-light); }

/* Trim scanned white edges and round the card face without clipping controls. */
img.tsCardArt { clip-path:inset(.5% round 8% / 5.57%); }

#Thunderstone2 .tsDungeonModeGroup { display:inline-flex; flex:none; }
#Thunderstone2 .tsDungeonModeGroup>.tsModeDungeon { border-radius:5px 0 0 5px; }
#Thunderstone2 .tsDungeonNumberButton { min-width:34px; padding:6px 10px; border-left:0; border-radius:0; background:linear-gradient(#35434c,#182229); }
#Thunderstone2 .tsDungeonNumberButton:last-child { border-radius:0 5px 5px 0; }
#Thunderstone2 .tsGlobalEffects { position:absolute; right:5%; top:48%; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; max-width:95%; z-index:8; pointer-events:none; }
#Thunderstone2 .tsGlobalEffect,#Thunderstone2 .tsGlobalPrice { display:inline-flex; align-items:center; gap:1px; padding:2px 3px; border:1px solid #bfaa75; border-radius:4px; color:#fff3ce; background:#182c2bf2; font-size:clamp(9px,1vw,13px); line-height:1.1; box-shadow:0 1px 3px #000; pointer-events:auto; }
#Thunderstone2 .tsGlobalEffect img,#Thunderstone2 .tsGlobalEffect svg,#Thunderstone2 .tsGlobalPrice img { width:1em; height:1.2em; object-fit:contain; }
#Thunderstone2 .tsGlobalEffect svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
#Thunderstone2 .tsGlobalPrice { position:absolute; bottom:2%; left:5%; z-index:8; }
#Thunderstone2 .tsEffectInfo { cursor:help; }
#Thunderstone2 .tsEffectInfo:focus-visible { outline:2px solid #ffd348; outline-offset:2px; }
#Thunderstone2 .tsEffectSourceHighlight { outline:3px solid #ffd348; outline-offset:2px; }
.tsEffectPopover { max-width:min(420px,95vw); }
.tsEffectSourceRow { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.tsEffectSourceRow>strong { min-width:2em; }
.tsEffectSourceRow>small { flex-basis:100%; white-space:pre-line; }
.tsEffectSourceRow .tsHelp { position:static; display:inline-flex; align-items:center; justify-content:center; flex:none; padding:0; width:20px; height:20px; border:0; border-radius:50%; background:#172b32; color:#fff4d4; }
.tsEffectSourceRow .tsHelp svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.tsEffectSource { color:inherit; text-decoration:underline; background:transparent; border:0; padding:0; }

#Thunderstone2 .tsGlobalEffect { pointer-events:none; }
#Thunderstone2 .tsSlotStats .tsSlotModifier { margin-left:2px; white-space:pre; }
#Thunderstone2 .tsSlotStats .tsSlotHarder { color:#ff8c85; }
#Thunderstone2 .tsSlotStats .tsSlotEasier { color:#82e39b; }

#Thunderstone2 .tsCombatStats { display:inline-flex; align-items:center; gap:10px; font-size:14px; line-height:1.2; }
#Thunderstone2 .tsCombatStat { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
#Thunderstone2 .tsCombatStat img { width:18px; height:20px; object-fit:contain; filter:drop-shadow(0 1px 2px #000); }
#Thunderstone2 .tsCombatStat strong,#Thunderstone2 .tsGoldValue { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }

#Thunderstone2 .tsPlayerCounts .tsPlayerCombatStats { flex:0 0 auto; width:auto; gap:8px; margin-left:2px; }
#Thunderstone2 .tsPlayerCombatStats .tsCombatStat img { width:16px; height:18px; }