/* ============================================================================ LAYOUT FÖR ANALYSVYN — GÄLLER ALLA SKÄRMBREDDER ============================================================================ Filen hette (och heter fortfarande) mobile.css, men innehållet är inte längre "mobil" i motsats till "desktop". 31 jul 2026 sa Rohan, med en skärmdump av desktopvyn: «remove the hand analyzer etc for the desktop version. keep it the same as the one for mobile.» Det som fanns på desktop och nu är borta: hela högerkolumnen (Tell your hand, Your position / Big blind / My stack / Dead money, ▶ Start hand, chip- och bettbrickan, resultat- och rangepanelerna). Kvar är produkten: KORTLEKEN och BORDET, en enda kolumn, likadant överallt. Namnet står kvar för att filen laddas vid namn från index.html och för att en omdöpning hade blivit en fil att ta bort — den vägen är stängd i vårt leveransflöde. Läs den alltså som "analyze-layout.css". TVÅ SAKER SOM STYR HELA FILEN: 1) INGEN MEDIAFRÅGA runt layoutreglerna. Regler som tidigare låg i @media (max-width:700px) ligger nu i filens rot. Det är det som gör att desktop får mobilens utseende. Filen laddas EFTER main.css i index.html, så vid samma specificitet vinner den här filen på källordning — inklusive över main.css egna @media (min-width:1100px)-block, som fortfarande finns kvar där men nu är överkört rad för rad. Byter någon laddningsordningen i går hela den här filen sönder. 2) INGEN HÖJDLÅSNING. Tidigare låstes analysvyn till exakt en skärm (height:100dvh + overflow:hidden) i BÅDE main.css och den här filen. Det är borttaget, av två skäl som pekar åt samma håll: • Rohan: «mycket deadspace där nere». En höjdlåst vy sträcker sig till skärmens botten även när innehållet (kortlek + bord) tar slut långt innan — det tomma fältet under bordet i skärmdumpen ÄR den låsningen. Med flödeshöjd slutar sidan där innehållet slutar. • Sidan visas numera i en iframe på pebel.app/card-calculator, och den iframen mäter sitt eget innehåll och sätter sin höjd efter det (se app/card-calculator/calc-frame.tsx). Skulle något här inne mäta i vh eller dvh blev det cirkulärt: höjden styr innehållet som styr höjden. DÄRFÖR: använd ALDRIG vh, dvh eller cqb i den här filen. Bredd (%, cqi, px) är alltid säkert; höjd härleds ur bredden via aspect-ratio. ============================================================================ */ /* Rester från en bottenpanel som aldrig byggdes klart (src/mobile.js finns inte). Reglerna för .m-sheet är borttagna; de tre klasserna hålls dolda så att gammal cachad HTML inte kan blinka fram något. */ .m-fab, .m-sheet, .m-sheet-backdrop { display: none; } /* ---------- en kolumn: kortlek + bord, ingenting annat ---------- */ /* Höjdlåsningen från main.css (både :root-regeln och 1100px-blocket) släpps. Samma selektor som main.css använder, alltså identisk specificitet — det är källordningen som avgör, se punkt 1 högst upp. */ body:has(#view-analyze.view-active) { height: auto; overflow: visible; display: block; } #view-analyze.view-active { /* main.css ger .view min-height:calc(100vh - 56px). Den skulle ensam räcka för att återskapa deadspacen i iframen. */ min-height: 0; height: auto; display: block; overflow: visible; } #view-analyze .main { display: flex; flex-direction: column; /* Taket är det som gör desktop till mobil på riktigt. Utan det sträcks kortleken över hela fönsterbredden och 52 kort på en 1600px-rad blir löjligt breda. 460px är strax över en stor telefon (430px) — bordet får alltså sin bekanta storlek, centrerat, oavsett skärm. */ max-width: 460px; margin: 0 auto; width: 100%; box-sizing: border-box; padding: 0 0 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); overflow: visible; min-height: 0; } #view-analyze .col-left { display: flex; flex-direction: column; position: relative; min-height: 0; height: auto; /* reserverad remsa för live-equity-baren så bordet aldrig ändrar storlek när den tänds eller släcks (baren är absolut placerad i den här ytan) */ padding-bottom: 46px; } /* Handanalysatorn. !important står här med flit: det här är den enda regel i filen vars bortfall skulle återinföra precis det Rohan bad oss ta bort, och den ska överleva även om någon senare lägger till ett mediablock efter filen. */ #view-analyze .col-right { display: none !important; } /* ---------- kortleken: ingen ruta, kant till kant, tätt packade rader ------ */ .deck-wrap { flex: 0 0 auto; padding: calc(6px + env(safe-area-inset-top)) 5px 0; max-width: none; } .deck { padding: 0; gap: 3px; max-width: none; width: 100%; background: none; border: none; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .deck-row { gap: 2px; } .strip-card { aspect-ratio: 5 / 7.35; } /* FASTA px-mått, inte clamp(...vw...). main.css skalar kortens text mot FÖNSTRETS bredd, vilket stämde när kortleken var lika bred som fönstret. Nu är kolumnen kapad till 460px medan fönstret kan vara 1600px — en vw-baserad siffra hade ritat ~17px valörer på ~30px breda kort. Måtten nedan är exakt de som telefonen redan använder, alltså det Rohan godkänt. */ .strip-card .r { font-size: .62rem; } .strip-card .s { font-size: .5rem; } .strip-card .pip { display: none; } /* ---------- bordet ---------- */ .table-area { flex: 0 0 auto; min-height: 0; padding: 2px; overflow: visible; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; /* inline-size, INTE size. `container-type:size` kräver en bestämd höjd, och höjden är numera fri (se punkt 2 högst upp) — med size hade bordet blivit 0 högt. Följden är att cqb inte finns här inne; allt nedan mäter i cqi. */ container-type: inline-size; } .table-area.has-live-eq { padding-bottom: 2px; } .poker-table { /* Rent breddstyrt. Höjden faller ur aspect-ratio, och det är den höjden iframen sedan mäter. */ width: calc((100cqi - 8px) * 0.95); max-width: calc((100cqi - 8px) * 0.95); max-height: none; aspect-ratio: 4 / 5; height: auto; margin: 14px auto 12px; /* toppmarginal så översta sätets kort går fria från kortleken */ border-width: 8px; border-radius: 46% / 50%; /* sätena placeras en och en längre ned, så ingen extra spridning */ --seat-spread: 1; --seat-spread-x: 1; overflow: visible; } .poker-table .brand { top: 27%; } /* var clamp(48px, 15cqb, 76px) — cqb finns inte längre, se .table-area ovan. 18cqi ger samma storlek på en telefon (≈70px vid 390px bred vy) och skalar nu med bordets bredd i stället för med en höjd som inte längre är låst. */ .poker-table .brand-mark { height: clamp(48px, 18cqi, 76px); } .board { top: 52%; gap: 3px; } .board .slot { width: 42px; height: 58px; } .pot-chip { top: 66%; } /* motståndarnas kort hålls små nog att alla 8 platser kan vara öppna samtidigt */ .slot { width: 30px; height: 42px; } .hero-seat .slot { width: 46px; height: 64px; } .slot.filled { font-size: .85rem; } .hero-seat .slot.filled { font-size: 1.3rem; } .board .slot.filled { font-size: 1.2rem; } .slot.filled .s { font-size: .7rem; } .hero-seat .slot.filled .s { font-size: 1.05rem; } .board .slot.filled .s { font-size: 1rem; } .seat { gap: 3px; } .hero-seat { transform: translate(-50%, -50%); } /* handplacerad sätesring för den stående ovalen: varje säte går fritt från sina grannar, från bordet och från hjälten även när alla är öppna */ .seat-p1 { left: 20%; top: 72%; } /* Seat 2 — nere till vänster */ .seat-p2 { left: 12.5%; top: 34.5%; } /* Seat 3 — uppe till vänster */ .seat-p3 { left: 25%; top: 20%; } /* Seat 4 */ .seat-p4 { left: 40.5%; top: 10%; } /* Seat 5 — toppen */ .seat-p5 { left: 59.5%; top: 10%; } /* Seat 6 — toppen */ .seat-p6 { left: 75%; top: 20%; } /* Seat 7 */ .seat-p7 { left: 87.5%; top: 34.5%; } /* Seat 8 — uppe till höger */ /* minimala sätesbrickor: ingen positionsmärkning, ingen stack (namn + equity) */ .seat .tag { white-space: nowrap; max-width: none; font-size: .58rem; padding: 3px 9px; } .seat .tag b { display: none; } .seat .tag br { display: none; } .seat .tag .stk-click, .seat .tag .inv, .hero-seat .tag-stk { display: none; } /* live equity ligger i den reserverade remsan — ingen layoutförskjutning */ .live-eq { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; padding: 0 10px; max-width: none; z-index: 2; } /* Sidfoten i analysvyn. Dold på alla bredder: fristående (subdomänen) finns tillbakalänken .pebel-back i stället, och inbäddad ritar pebel.app sin egen riktiga sidfot runt iframen. En sidfot inne i iframen hade dessutom varit ren deadspace, alltså precis det som skulle bort. */ body:has(#view-analyze.view-active) .foot { display: none; } /* Kalkylatorns egen topbar (logga + Analyze/My Hands/Account) på TELEFON. Oförändrat beteende sedan tidigare: den försvinner så snart analysvyn är aktiv, för att kortlek + bord ska få hela skärmen. På bredare fristående skärmar står den kvar — det är enda vägen till My Hands och Account där. Inbäddad i pebel.app döljs den alltid, av pebel-shell.css: sidan har redan en riktig header. */ @media (max-width: 700px) { body:has(#view-analyze.view-active) .topbar { display: none; } } /* Liggande telefon: TIDIGARE låg här en heltäckande "↻ Rotate your phone"- skärm. Den är borttagen. Motivet var att en höjdlåst vy blev obrukbar i liggande läge — men vyn är inte höjdlåst längre, den scrollar, och en fixed-täckare inuti en iframe vars höjd sätts utifrån hade dessutom täckt fel yta. Vänder man telefonen får man samma sida, bara smalare. */