Add collapsible boss teams and hide attempts in hardcore mode

Boss battle cards now collapse the pokemon team by default with a
chevron toggle. Expanded teams show larger sprites with "Lvl" prefix.
In hardcore mode, the BossDefeatModal hides the attempts field and
lost button since a loss ends the run.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.beans/nuzlocke-tracker-qars--boss-battle-card-collapsible-team-hardcore-mode-cl.md

@@ -0,0 +1,11 @@
+---
+# nuzlocke-tracker-qars
+title: 'Boss battle card: collapsible team + hardcore mode cleanup'
+status: completed
+type: feature
+priority: normal
+created_at: 2026-02-08T11:01:17Z
+updated_at: 2026-02-08T11:02:45Z
+---
+
+Make boss battle cards collapsible (team hidden by default), larger sprites with Lvl prefix, and hide attempts/lost button in hardcore mode

frontend/src/components/BossDefeatModal.tsx

@@ -6,9 +6,10 @@ interface BossDefeatModalProps {
   onSubmit: (data: CreateBossResultInput) => void
   onClose: () => void
   isPending?: boolean
+  hardcoreMode?: boolean
 }
 
-export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefeatModalProps) {
+export function BossDefeatModal({ boss, onSubmit, onClose, isPending, hardcoreMode }: BossDefeatModalProps) {
   const [result, setResult] = useState<'won' | 'lost'>('won')
   const [attempts, setAttempts] = useState('1')
 
@@ -16,8 +17,8 @@ export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefe
     e.preventDefault()
     onSubmit({
       bossBattleId: boss.id,
-      result,
+      result: hardcoreMode ? 'won' : result,
-      attempts: Number(attempts) || 1,
+      attempts: hardcoreMode ? 1 : Number(attempts) || 1,
     })
   }
 
@@ -71,6 +72,7 @@ export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefe
                 >
                   Won
                 </button>
+                {!hardcoreMode && (
                   <button
                     type="button"
                     onClick={() => setResult('lost')}
@@ -82,9 +84,11 @@ export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefe
                   >
                     Lost
                   </button>
+                )}
               </div>
             </div>
 
+            {!hardcoreMode && (
               <div>
                 <label className="block text-sm font-medium mb-1">Attempts</label>
                 <input
@@ -95,6 +99,7 @@ export function BossDefeatModal({ boss, onSubmit, onClose, isPending }: BossDefe
                   className="w-full px-3 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600"
                 />
               </div>
+            )}
           </div>
 
           <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">

frontend/src/pages/RunEncounters.tsx

@@ -337,6 +337,7 @@ export function RunEncounters() {
     useState<EncounterDetail | null>(null)
   const [showEndRun, setShowEndRun] = useState(false)
   const [showShinyModal, setShowShinyModal] = useState(false)
+  const [expandedBosses, setExpandedBosses] = useState<Set<number>>(new Set())
   const [showTeam, setShowTeam] = useState(true)
   const [filter, setFilter] = useState<'all' | RouteStatus>('all')
 
@@ -1021,6 +1022,16 @@ export function RunEncounters() {
                   other: 'border-gray-400 dark:border-gray-500',
                 }
 
+                const isBossExpanded = expandedBosses.has(boss.id)
+                const toggleBoss = () => {
+                  setExpandedBosses((prev) => {
+                    const next = new Set(prev)
+                    if (next.has(boss.id)) next.delete(boss.id)
+                    else next.add(boss.id)
+                    return next
+                  })
+                }
+
                 return (
                   <div
                     key={`boss-${boss.id}`}
@@ -1028,8 +1039,20 @@ export function RunEncounters() {
                       isDefeated ? 'bg-green-50/50 dark:bg-green-900/10' : 'bg-white dark:bg-gray-800'
                     } px-4 py-3`}
                   >
-                    <div className="flex items-start justify-between">
+                    <div
+                      className="flex items-start justify-between cursor-pointer select-none"
+                      onClick={toggleBoss}
+                    >
                       <div className="flex items-center gap-3">
+                        <svg
+                          className={`w-4 h-4 text-gray-400 transition-transform ${isBossExpanded ? 'rotate-90' : ''}`}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                        </svg>
                         {boss.spriteUrl && (
                           <img src={boss.spriteUrl} alt={boss.name} className="w-10 h-10" />
                         )}
@@ -1047,7 +1070,7 @@ export function RunEncounters() {
                           </p>
                         </div>
                       </div>
-                      <div>
+                      <div onClick={(e) => e.stopPropagation()}>
                         {isDefeated ? (
                           <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300">
                             Defeated &#10003;
@@ -1063,19 +1086,19 @@ export function RunEncounters() {
                       </div>
                     </div>
                     {/* Boss pokemon team */}
-                    {boss.pokemon.length > 0 && (
+                    {isBossExpanded && boss.pokemon.length > 0 && (
                       <div className="flex gap-2 mt-2 flex-wrap">
                         {boss.pokemon
                           .sort((a, b) => a.order - b.order)
                           .map((bp) => (
                             <div key={bp.id} className="flex items-center gap-1">
                               {bp.pokemon.spriteUrl ? (
-                                <img src={bp.pokemon.spriteUrl} alt={bp.pokemon.name} className="w-6 h-6" />
+                                <img src={bp.pokemon.spriteUrl} alt={bp.pokemon.name} className="w-10 h-10" />
                               ) : (
-                                <div className="w-6 h-6 bg-gray-200 dark:bg-gray-700 rounded-full" />
+                                <div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full" />
                               )}
                               <span className="text-xs text-gray-500 dark:text-gray-400">
-                                {bp.level}
+                                Lvl {bp.level}
                               </span>
                             </div>
                           ))}
@@ -1141,6 +1164,7 @@ export function RunEncounters() {
           }}
           onClose={() => setSelectedBoss(null)}
           isPending={createBossResult.isPending}
+          hardcoreMode={run?.rules?.hardcoreMode}
         />
       )}