@font-face{font-family:"Jittered Ink Cipher";font-weight:400;font-style:normal;font-display:block;src:url("/assets/fonts/JitteredInkCipher-400.woff2") format("woff2");}
@font-face{font-family:"Anton";font-weight:400;font-style:normal;font-display:block;src:url("/assets/fonts/Anton-400.woff2") format("woff2");}
@font-face{font-family:"Barrio";font-weight:400;font-style:normal;font-display:block;src:url("/assets/fonts/Barrio-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:block;src:url("/assets/fonts/IBMPlexMono-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:block;src:url("/assets/fonts/IBMPlexMono-600.woff2") format("woff2");}
html,body{margin:0;padding:0;background:#FAFAF7;height:100%;overflow:hidden;}
#wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top);box-sizing:border-box;}
#game{display:block;margin:0 auto;background:#FAFAF7;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;}
#debugOverlay{display:none;position:fixed;top:6px;right:6px;background:rgba(26,26,26,.85);color:#C3C9BA;font:11px/1.4 "IBM Plex Mono",monospace;padding:6px 8px;white-space:pre;pointer-events:none;}

/* One logical overlay shares the field's scale, including its safe area and review banner. */
#overlay{position:absolute;left:50%;top:50%;width:480px;transform-origin:center;display:flex;align-items:center;justify-content:center;color:#1A1A1A;font:15px/1.4 "IBM Plex Mono",monospace;background:rgba(250,250,247,.72);}
#overlay[hidden]{display:none;}
.popup{box-sizing:border-box;width:452px;max-height:calc(100% - 16px);border:28px solid #B7AAA9;border-image:var(--frame-image,none) var(--frame-slice,42) fill stretch;background:#EEEEEE;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.popup h1{font:44px/1.1 "Jittered Ink Cipher",cursive;margin:0;}
.popup p{margin:0;}
.popup button,.popup a{color:#1A1A1A;}
.popup button{font:23px/1.2 "Jittered Ink Cipher",cursive;padding:8px 18px;cursor:pointer;max-width:100%;}
.popup button.primary{font-size:30px;min-height:62px;width:100%;}
.popup button.small{font-size:18px;padding:5px 12px;}
/* v0.34 (KH, 6 Oct: "writing here seems small"; "back button a bit small"): a lone small button (back, resend code) is at least 120 x 44
   with 22 px lettering, as the welcome's pair; a pair's buttons are 22 px everywhere (below). */
.popup > button.small,.phone .popup > button.small{min-width:120px;min-height:max(44px,var(--tap,44px));font-size:22px;line-height:1;padding:0 14px 4px;}
.popup a{font-size:13px;}
.popup button.art{position:relative;background:transparent var(--button-image) center/contain no-repeat;border:0;width:130px;height:58px;padding:0;flex-shrink:0;}
.popup button.art span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.popup button:focus-visible,.popup a:focus-visible,.popup input:focus-visible{outline:3px solid #A13C8F;outline-offset:3px;}
/* v0.22 (KH, 5 Oct): no ring on a focus that did not come from Tab (page.js sets html.kbd on Tab, clears it on a pointer). Inputs keep theirs. */
html:not(.kbd) .popup button:focus-visible,html:not(.kbd) .popup a:focus-visible,html:not(.kbd) .popup [tabindex="0"]:focus-visible{outline:none;}
.popup nav,.popup .actions{display:flex;gap:14px;align-items:center;justify-content:center;}
.popup form{width:100%;display:flex;flex-direction:column;gap:14px;}
.popup input{box-sizing:border-box;width:100%;font:18px "IBM Plex Mono",monospace;padding:10px;border:2px solid #1A1A1A;}
.assigned-name{font:38px/1.2 "Jittered Ink Cipher",cursive;}
.popup.rules,.popup.board{height:calc(100% - 24px);}
.rules-scroll{overflow:auto;min-height:0;text-align:left;width:100%;overscroll-behavior:contain;}
.rules-scroll:focus-visible{outline:3px solid #A13C8F;outline-offset:3px;}
.rules-scroll:focus:not(:focus-visible){outline:none;}
.rules-copy h2{font:28px/1.2 "Jittered Ink Cipher",cursive;}
.rules-copy p,.rules-copy li{margin:0 0 16px;}
.rules-copy ol{padding-left:2.6em;}
.popup.board h2{font:28px/1.2 "Jittered Ink Cipher",cursive;margin:0;flex-shrink:0;}
.popup.board > p,.popup.board > button{flex-shrink:0;}
.board-scroll{position:relative;flex:1;min-height:0;width:100%;overflow:auto;overscroll-behavior:contain;text-align:left;font:15px/24px "IBM Plex Mono",monospace;}
.board-scroll:focus-visible{outline:3px solid #A13C8F;outline-offset:3px;}
.board-scroll ol{list-style:none;margin:0;padding:0;}
.board-scroll li{display:flex;justify-content:space-between;gap:6px;height:24px;white-space:nowrap;}
.board-scroll li.own{font-weight:600;}
/* The place numbers right-align in four columns, so names line up past 9th; the pinned own row is ruled off from the list. */
.board-scroll .n{display:inline-block;min-width:4ch;text-align:right;font-style:normal;}
.board li .n{font-style:normal;}
/* v0.24: the game over's ten rows line their names up past 9th, as the board screen does. */
.gameover .board .n{display:inline-block;min-width:3ch;text-align:right;}
.board-scroll li.pinned,.board-scroll li.gap{position:sticky;box-sizing:border-box;background:#EEEEEE;}
.board-scroll li.pinned{bottom:0;border-top:1px solid #1A1A1A;}
/* Below 31st the "…" rides with the pinned row (24 px above it) and takes the rule, so the first view never hides it. */
.board-scroll li.gap{bottom:24px;border-top:1px solid #1A1A1A;}
.board-scroll li.gap+li.pinned{border-top:0;}
.popup.board .guest-place{font-size:13px;line-height:18px;}
.notice{font-weight:bold;}
.popup button.google{width:252px;height:56px;padding:0;border:0;background:none;flex-shrink:0;}
.google img{display:block;width:252px;height:56px;}
/* v0.29 (KH, 5 Oct, at 393 px: "vertical height for interaction too small, and more gap between buttons"): a pair's buttons are 24 px
   apart (was 14); on phones every small button is at least 44 real px tall, below. */
.auth-pair{display:flex;gap:24px;justify-content:center;}
.popup .auth-pair button{box-sizing:border-box;width:170px;height:40px;font-size:22px;line-height:1;padding:0 0 3px;}
/* v0.32 (KH, 6 Oct): a phone (page.js: a touch or narrow screen whose short side is under 600 px, so an iPhone SE with Safari's bars
   counts) scales the 480 px page down, so a 40 px box can be under 30 real px. Its small buttons are at least --tap logical px tall,
   44 real px held upright (40 to 64 logical; 54 on a 393 phone, 59 on a 360 one; on its side the 64 cap gives about 33). The labels
   keep their size (KH, 1 Oct: keep them small); only the box grows. Laptops and tablets keep the v0.28 sizes. */
.phone .popup button.small{min-height:var(--tap);}
/* Form fields and buttons too (v0.32 review: the email field and send button were 34 real px on an SE); never a checkbox. */
.phone .popup form button,.phone .popup form input:not([type="checkbox"]){min-height:var(--tap);}
.popup .inapp-note{font-size:13px;line-height:18px;text-wrap:balance;}
.popup .escape-hint{height:36px;flex-shrink:0;font-size:13px;line-height:18px;text-wrap:balance;}
.popup .escape-hint[hidden]{display:block;visibility:hidden;}
.popup.inapp.welcome > button[data-action="guest"]{box-sizing:border-box;width:252px;height:56px;min-height:0;font-size:30px;line-height:1;padding:0 0 3px;}
.popup.inapp.welcome > button[data-action="guest"]{margin-top:6px;}
.popup.inapp.welcome .inapp-note{margin-top:12px;}
.popup.inapp.welcome .escape-hint{margin-top:8px;}
/* Welcome (Sitara's 2 Oct front-page mock): a large title with the handle tucked under its right end, two lines in her
   hand, outlined buttons, the two links spread apart. Margins place the title's baseline, each line and each button where
   the mock has them, measured as fractions of the panel's inner width (396 logical px = her 1183 px). */
.popup.welcome{gap:0;padding:0 12px 18px;}
.welcome .masthead{position:relative;margin-top:36px;}
.welcome h1{font-size:96px;line-height:96px;white-space:nowrap;}
.welcome .handle{position:absolute;right:0;top:56px;padding-top:7px;font:26px/26px "Jittered Ink Cipher","IBM Plex Mono",monospace;text-decoration:none;white-space:nowrap;}
.welcome .pitch{margin-top:9px;font:36px/43px "Jittered Ink Cipher",cursive;}
.welcome .pitch span{display:block;text-wrap:balance;}
.ready .how-to span{display:block;}
/* Her font sits high in its line box (ascent .665 em, descent .692 em) and her g drops .69 em, so padding centres each label's
   ink in its outlined box: "jelly run" from the l to the j, "sign out" from the t to the g. */
.popup.welcome button.primary,.popup.welcome > button.small{padding:0;line-height:1;}
.popup.welcome button.primary{width:122px;min-height:0;height:66px;margin-top:0;padding-top:11px;font-size:37px;}
.popup.welcome > button.small{width:120px;height:36px;margin-top:14px;padding-bottom:6px;font-size:26px;}
.welcome button.google{margin-top:6px;}
/* v0.22 (KH, 5 Oct: "too close together"): 22 px between the Google button and the pair, was 12. */
.welcome .auth-pair{margin-top:22px;}
/* v0.29 (KH, 5 Oct): the signed-in welcome's pair sits further below the jelly run button. */
.welcome button[data-action="ready"]+.auth-pair{margin-top:34px;}
.popup.welcome .auth-pair button{font-size:22px;}
.welcome nav{box-sizing:border-box;width:100%;margin-top:15px;padding:0 26px;justify-content:space-between;line-height:18px;}
/* Game over (Sitara's 2 Oct markup, KH): no frame; the top three beside the map, the player's own line under it. */
/* v0.22 (KH, 5 Oct: "spacing here too tight"; S3) and v0.24 (KH, 5 Oct: share and try again "a bit too low to bottom"): on a laptop
   the frameless panel takes the whole 760 px field, with 22 px under the buttons (was 8; 10 px padding above). The rows sit 6 px apart; the bottom ones
   12, 12 and 18 px (the standing row's and the prize line's margins). The six fixed rows (580 px), the standing row (64 + 6), the
   one-line prize (18 + 18) and seven 6 px gaps total 728, the panel's inside.
   On taller screens the panel grows with the overlay, 16 px short of it, up to 884 px, and space-between shares the extra. */
.popup.gameover{height:min(100%,max(760px,calc(100% - 16px)),884px);max-height:none;border:0;border-image:none;padding:10px 12px 22px;gap:6px;display:grid;grid-template-rows:80px 56px 50px 50px 280px auto auto 64px;justify-items:center;align-content:space-between;}
.gameover h1{font-size:80px;line-height:80px;white-space:nowrap;}
/* v0.24: nudged 6 px (was 8, with 2 px more panel padding above) so its box stays inside its row now the rows sit 6 px apart. */
.gameover .masthead{position:relative;top:6px;}
.gameover .handle{position:absolute;right:0;top:53px;font:22px/22px "Jittered Ink Cipher","IBM Plex Mono",monospace;text-decoration:none;white-space:nowrap;}
.gameover .hero{display:flex;align-items:center;justify-content:center;gap:14px;height:50px;max-width:100%;}
.hero .score-wrap{flex-shrink:0;height:50px;}
/* v0.26 (Sitarah, 5 Oct huddle; H4): the score a little smaller, labelled, with the player's board name under the label. */
.hero .score-big{font:46px/50px "Anton",Impact,sans-serif;}
.hero .verdict-col{text-align:left;white-space:nowrap;}
.hero .score-label{font-size:13px;line-height:16px;}
.hero .player-name{font:26px/28px "Jittered Ink Cipher",cursive;}
/* The vehicle row is the content width; the stamps sit in the 94 px either side of the 240 px vehicle. */
.gameover .vehicle-row{position:relative;width:100%;height:56px;display:flex;justify-content:center;align-items:center;}
.gameover .stamp{position:absolute;top:50%;box-sizing:content-box;border:2px solid currentColor;padding:0 3px;font:600 13px/18px "IBM Plex Mono",monospace;letter-spacing:-.6px;white-space:nowrap;}
.gameover .stamp.best{color:#A13C8F;left:8px;transform:translateY(-50%) rotate(-8deg);}
.gameover .end-line{font-size:14px;line-height:18px;align-self:center;}
.gameover .end-line{text-wrap:balance;}
.gameover .end-line .reason{display:block;font-size:11px;line-height:14px;}
/* v0.28: a struck word in the run's line ("no ~cigar~ jelly"), the strike in ink at the text's weight. */
.gameover .end-line s{text-decoration-thickness:1.5px;}
.gameover .vehicle{width:240px;height:56px;align-self:center;}
.gameover .result{display:flex;gap:16px;width:372px;height:280px;align-items:center;text-align:left;}
.gameover .map{width:132px;height:280px;flex-shrink:0;}
.gameover .board{flex:1;min-width:0;font-size:15px;line-height:20px;}
/* Fixed inside the transformed overlay, so the list keeps its original size and scroll metrics. */
/* v0.24: the link sits in the board column, 8 px under its last row, so the rows and the link centre on the map together and
   fit its 280 px row at twelve rows (240 + 8 + 18). */
.gameover .board-link{display:inline-block;margin-top:8px;font:13px/18px "IBM Plex Mono",monospace;text-decoration:underline;}
/* v0.24 (KH, 5 Oct: "show top 10, then your position"): ten rows 20 px apart, then "…" and the own row; twelve rows are 240 px. */
.gameover .board li+li{margin-top:0;}
/* The own row is bold wherever it sits. */
.gameover .board li.gap,.gameover .board li.gap+li{margin-top:0;}
.gameover .board li.gap{justify-content:flex-start;padding-left:18px;}
/* The real 600 face: the browser's faux bold of the 400 face did not show (review, 3 Oct). */
.gameover .board li.own{font-weight:600;}
.board ol{list-style:none;margin:0;padding:0;}
.board li{display:flex;justify-content:space-between;gap:6px;min-height:24px;}
.gameover .board li{min-height:20px;}
.board li span:first-child{min-width:0;}
.gameover .standing{margin-top:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:20px;line-height:24px;}
.standing .own-row{display:flex;align-items:center;gap:12px;}
.standing .target{font-size:13px;line-height:18px;}
/* v0.26: "sign up to save" fits one line, so the button is 40 px tall (was 44 for two lines) and the standing row keeps its 64 px
   now the board line above it is 18 px (13 px text). On phones it takes --tap (above).
   v0.36 (KH, 6 Oct: "make this button bigger? it should be more enticing to save. show save icon as well"): 172 x 44 (was 130 x 40),
   lettered at 22 px like the pairs and the lone buttons (was 18), with a floppy disk before the label. Above it the board line's box is
   14 px (was 18; .signup, a guest's row only) to pay for the 4 px, so the standing row stays 64 on a laptop and the board line and the
   target line stay 35 px apart, centre to centre; a signed-in player's row (no button) keeps its 18 px box. */
.standing button.small{box-sizing:border-box;flex-shrink:0;width:172px;height:44px;padding:0 0 3px;font-size:22px;line-height:1;white-space:nowrap;}
/* v0.32: a phone game over without room for a taller sign-up button (page.js sets .short: a phone with its browser bars showing) takes
   the button to at most 54 px and gives back 14 px: the title's row is 78 (was 80) and the prize line's margins 0 and 6 (were 6
   and 12). The end line keeps its 50 px row, so a two-line run line and its reason keep their 6 px gaps. Since v0.36 the button's
   extra at that cap is 10 (54 over its 44), so the 14 leave 4 to spare. */
.short .popup.gameover{grid-template-rows:78px 56px 50px 50px 280px auto auto 64px;}
.short .gameover .masthead{height:78px;}
.short .gameover .prize{margin:0 0 6px;}
.short .gameover .standing button.small{min-height:min(var(--tap),54px);}
/* v0.26 (Praneeth, 5 Oct huddle): the board clock at the size of the player's line and the prize line. */
.standing .board-line{font-size:13px;line-height:18px;}
.standing.signup .board-line{line-height:14px;}
/* v0.20 the day clock: on the welcome and ready screens, and the game over's board line; magenta in the last hour. */
.popup .day-clock{font-size:13px;line-height:18px;}
.popup.welcome .day-clock{margin-top:14px;}
.popup .countdown.last-call{color:#A13C8F;}
/* v0.29: "leaderboard" lengthens the late-run line to 60 characters (468 px at 13 px, over the panel's 428): it is set at 11 px (396 px) to stay on one line. */
.popup .countdown.late{font-size:11px;}
/* One line now: an 18 px line box holds the rules link's whole 13 px content area (gate 41h keeps the link inside the line). */
.gameover .prize{font-size:13px;line-height:18px;align-self:center;margin:6px 0 12px;}
.gameover .actions{gap:48px;}
.gameover .actions button{box-sizing:border-box;width:112px;height:56px;padding:0;background-color:transparent;}
.gameover .actions button.lead{width:136px;height:64px;}
.popup .share-status{min-height:18px;font-size:13px;line-height:18px;}
.popup.share .actions{gap:16px;}
/* v0.29 (KH, 5 Oct, at 393 px: "having this border looks really odd on mobile, get rid of it. make the inner frame same width of what
   the outer frame is") and v0.32 (KH, 6 Oct: "share screen is still frame in frame"): on every screen the share screen is a plain paper
   sheet over the whole overlay, with no frame and no title of its own (the card carries both), and the card is as large as fits: the framed
   popup's 452 px width on a phone, capped by the overlay's height (358 px wide on a laptop). The game under it is hidden, so no edge of
   it shows round the sheet. */
.popup.share{width:480px;height:100%;max-height:none;border:0;border-image:none;background:#EEEEEE;padding:8px 14px;gap:10px;justify-content:center;}
.popup.share .share-preview{width:min(452px,calc((var(--ov-h) - 124px)*.5625));height:auto;aspect-ratio:9/16;}
/* v0.34 (KH, 6 Oct: "can you make it fill more of screen? back button a bit small"): the sheet spans the window, and its four buttons
   are one size, the widest's. Where the card at full height and a column of buttons fit side by side (.wide: a laptop, a phone on its
   side), the card takes the sheet's whole height, 16 px in, and the buttons stand in a column to its right at the pairs' 22 px. */
.popup.share{width:var(--win-w,480px);flex-shrink:0;}
.popup.share .actions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(452px,max(420px,calc((var(--ov-h) - 124px)*.5625)));}
.popup.share .actions button{width:100%;min-width:0;height:52px;padding:0 6px 3px;white-space:nowrap;font-size:20px;line-height:1;}
.wide .popup.share{display:grid;grid-template-columns:auto 170px;grid-template-rows:1fr auto auto 1fr;column-gap:32px;row-gap:12px;justify-content:center;align-items:center;padding:16px;}
.wide .popup.share .share-preview{grid-column:1;grid-row:1/5;width:auto;height:calc(var(--ov-h) - 32px);max-width:none;}
/* The status line ("image copied. paste it anywhere.") sits under the column and keeps three lines' room, so a message never moves the
   buttons under the pointer. */
.wide .popup.share .share-status{grid-column:2;grid-row:3;min-height:54px;}
.wide .popup.share .actions{grid-column:2;grid-row:2;grid-template-columns:1fr;gap:14px;width:auto;}
.wide .popup.share .actions button{height:52px;font-size:22px;line-height:1;}
/* v0.37 (KH, 6 Oct: "you also didn't incorporate the logo she shared"): Sitarah's Donut Watch Company logo (JellyStamp1, 6 Oct) heads
   the share screen. Held upright it is 72 px tall over the card, and the card gives up 82 px of the height it may take (at 393 x 852 it
   is 435 px wide, was 452); where card and buttons stand side by side (.wide) it tops the button column, 170 px wide. */
.popup.share .share-logo{display:block;width:auto;height:72px;flex-shrink:0;}
#overlay:not(.wide) > .popup.share.with-logo .share-preview{width:min(452px,calc((var(--ov-h) - 206px)*.5625));}
#overlay:not(.wide) > .popup.share.with-logo .actions{width:min(452px,max(420px,calc((var(--ov-h) - 206px)*.5625)));}
.wide .popup.share .share-logo{grid-column:2;grid-row:1;align-self:end;justify-self:center;width:170px;height:auto;}
/* v0.37 (KH, 6 Oct: "on mobile hide "save image" (share card offers that) so the buttons can take up more space and be easier to
   press"): on a phone the share screen has three buttons; a tap on the card still saves the image, and the system share sheet offers
   saving too. Held upright, each takes a third of the row, 60 px tall (--tap on a smaller phone) at 22 px. */
.phone .popup.share [data-action="save-image"]{display:none;}
#overlay.phone:not(.wide) .popup.share .actions{grid-template-columns:repeat(3,1fr);}
#overlay.phone:not(.wide) .popup.share .actions button{height:60px;font-size:22px;}
#wrap:has(.popup.share) #game{visibility:hidden;}
/* v0.26 (Sitarah, 5 Oct huddle): a drop shadow lifts the card off the share screen (a paper sheet since v0.32). */
.share-preview{display:block;width:270px;height:480px;flex-shrink:0;max-width:100%;object-fit:contain;cursor:pointer;box-shadow:5px 7px 0 rgba(26,26,26,.28);}
/* v0.26 (Sitarah and KH, 5 Oct huddle; H5): the game over's and the share screen's drawn buttons get a hand-drawn ink border to match
   her share button, and the icons sit before the label in ink. One SVG outline, stretched to any size with a constant stroke.
   v0.34 (KH, 6 Oct: "these buttons don't look same, why?"): every text button on every screen wears it, so the welcome's pair, the
   sign-up pair and the plain grey boxes (send, back) match. The fill is kept for the button that leads (share) and a form's submit. */
.popup button:not(.art):not(.google){border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M2.6 3.4 34 2.5 67 3.6 97.2 2.4 96.6 19.6 97.6 37.4 61 36.6 27 37.6 2.2 36.2 3.3 20Z' fill='none' stroke='%231A1A1A' stroke-width='2.6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;}
.popup button.lead:not(.art),.gameover .actions button.lead:not(.art),.popup form button[type="submit"]:not(.art){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M2.6 3.4 34 2.5 67 3.6 97.2 2.4 96.6 19.6 97.6 37.4 61 36.6 27 37.6 2.2 36.2 3.3 20Z' fill='%23B7AAA9' stroke='%231A1A1A' stroke-width='2.6' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");background-color:transparent;}
.popup button .icon{width:18px;height:18px;margin:-6px 6px -6px 0;vertical-align:-2px;fill:none;stroke:#1A1A1A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
/* On Sitarah's share art the label sits low (ink y 41..70% of the art) and starts 26% in; the icon centres in the gap between the
   art's left border and the label (about 17.5% across) at the label's height (55%). Measured from assets/ui/btn-share.png. */
.popup button.art .icon{position:absolute;left:17.5%;top:55%;width:16px;height:16px;margin:0;transform:translate(-50%,-50%);}
.popup.board .provisional{font-size:13px;line-height:18px;flex-shrink:0;}
.popup.welcome .welcome-name{margin-top:10px;font:26px/30px "Jittered Ink Cipher",cursive;}
html.rules-page,html.rules-page body{height:auto;overflow:auto;}
.rules-page{height:auto;overflow:auto;color:#1A1A1A;font:16px/1.6 "IBM Plex Mono",monospace;}
.rules-page main{max-width:760px;margin:auto;padding:24px;}
.rules-page h1{font:48px "Jittered Ink Cipher",cursive;}
.rules-page a{color:#1A1A1A;}

/* v0.29 (KH, 5 Oct: "show some down arrow to indicate that there is more info below"): the rules screen's scroll cue, an ink arrow over
   a short paper fade at the foot of the scroll box; it hides at the end and when nothing overflows. */
.rules-box{position:relative;display:flex;flex-direction:column;min-height:0;width:100%;}
.rules-box .rules-scroll{flex:1;}
.scroll-cue{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(rgba(238,238,238,0),#EEEEEE 50%);pointer-events:none;}
.scroll-cue[hidden]{display:none;}
/* The arrow is 28 px; 8 px of padding makes its tap area 44 px. */
.scroll-cue svg{display:block;box-sizing:content-box;padding:8px;pointer-events:auto;cursor:pointer;margin-bottom:-6px;fill:none;stroke:#1A1A1A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* Code entry and adapter notices leave the established default geometry intact. */
.code-pair{display:flex;gap:14px;}
.code-pair input{min-width:0;width:50%;text-align:center;letter-spacing:2px;}
.popup .state-line{font-size:13px;line-height:18px;text-wrap:balance;}
.popup.welcome .state-line{margin-top:10px;}
.popup button:disabled{cursor:default;opacity:.55;}

/* Claim details scroll inside the field, including on short phone viewports. */
.popup.claim{height:calc(100% - 24px);overflow:auto;overscroll-behavior:contain;justify-content:flex-start;}
.popup.claim > *{flex-shrink:0;}
.popup.claim h2,.popup.claim-confirmed h2{font:28px/1.2 "Jittered Ink Cipher",cursive;margin:0;}
.popup .claim-form{gap:12px;text-align:left;}
.claim-form label{font-size:13px;line-height:18px;}
.claim-form input{margin-top:4px;}
.claim-form .claim-eligibility{display:flex;gap:10px;align-items:flex-start;}
.claim-form input[type="checkbox"]{width:24px;height:24px;flex-shrink:0;margin:0;accent-color:#A13C8F;}
.claim-form button{align-self:center;}