/* ============================================================ * art.css — iPad-landscape illustrated surface decoration. * * Loaded AFTER css/design.css so its rules win on cascade * specificity (and via @layer ordering should we adopt that later). * * Design philosophy: the art is part of the canvas, not a card. * Each vignette is positioned as a background on a dedicated element * (or pseudo-element) whose extent is shaped by mask-image gradients * so the edges dissolve into the dark slate. The user reads them as * ukiyo-e prints painted INTO the page, not as photos pasted on top. * * Gating: every rule below sits inside `@media (orientation: * landscape) and (min-width: 700px)` paired with `html.ipad`. iPhone * is never affected. iPad portrait is never affected (today's design * falls through to the iPhone layout; the portrait-iPad design from * fix list #14 will add its own portrait art rules later). * * The 15 source vignettes live in img/art/. The mapping from * vignette → page surface is: * * tier-select pages (pillar spirit): * kanji → pensive-scholar.png (banner) * goi → new-generation.png (banner — hands placing tiles) * bunpou → two-samurai.png (banner — formal/structured) * bushu → portrait-of-player.png (round, elder + tile) * kana → sakura-shadow-play.png (hand with 中 tile + cherry) * challenge → castle-defenders.png (defending what you've learned) * * home page: * tile-row.png as a wide subtle strip at the bottom of the canvas * * game pages (all 5 pillars share one rule): * side-panel rest state → blind-player.png (calm contemplation; * visible whenever no tile is flipped, hidden by the back-face * when one IS flipped — the back-face sits on top via z-index) * * about pages, victory screen, onboarding, dashboard, settings: * follow-up commit — see todo list. * ============================================================ */ @media (orientation: landscape) and (min-width: 700px) { /* ---------- Shared art-zone primitives ---------- `.ipad-art-zone` is the base class for any art element. Children of body that carry this class get aria-hidden by default in HTML so screen readers skip them; the art is decoration, not content. Mask-image gradients fade the edges so the vignette dissolves into the dark slate canvas — no visible frame or border. */ html.ipad .ipad-art-zone { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 0; /* Soft 6% center luminance — vignettes are already dark, but a gentle multiply blends the highlights into the canvas tone. */ opacity: 0.92; } /* Home tile-row strip removed 2026-05-18 late evening (Joshua). The bottom horizon strip was disrupting the look on real iPad Pro 13" where the proportions felt artificial. The .ipad-art-strip-home div in index.html is now a no-op; the home page reads with just the four hero tiles + reference chips + geisha picture on the right. */ /* ---------- Tier-select pillar art (v3 pattern, 2026-05-18 evening) ---------- Joshua's three design principles + home-page-replica feedback: (1) art must NOT push the tier tiles down off-screen, (2) symmetric/centered placement, (3) fully integrated like the home page tile-row strip. Implementation pattern (applied uniformly across all 5 pillars): - Tier tiles compact to ONE ROW at the top via grid override - Tile aspect-ratio 1/1 enforced via `align-items: start` so grid row-stretching doesn't break the squareness - The `.ipad-art-header` element (already in each tier-select HTML) becomes a fixed-position bottom strip — out of layout flow so tiles stay anchored at the top, opacity 0.50, mask fades upward into the dark canvas just like the home page's tile-row strip - Each pillar's art image gets a `background-position` tuned so the subject's "spirit point" (face, hands, table) sits in the solid-mask region above the bottom edge Per-pillar mapping unchanged (kanji=Pensive Scholar etc.). */ /* Shared bottom-strip shape — applied to every pillar. Per-pillar blocks below add the specific image + background-position. */ html.ipad .ipad-art-header { position: fixed; left: 0; right: 0; bottom: 48px; /* clear the bottom-bar nav */ top: auto; height: 60vh; margin: 0; max-width: none; width: auto; aspect-ratio: auto; border-radius: 0; background-repeat: no-repeat; background-size: contain; background-position: center bottom; pointer-events: none; opacity: 0.50; z-index: 0; mask-image: linear-gradient( to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0) 100% ); -webkit-mask-image: linear-gradient( to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0) 100% ); } /* Shared tier-grid override — compact ONE ROW. Each pillar block below sets its specific column count. `align-items: start` keeps tiles square via aspect-ratio (without this, grid auto-rows stretch the row height and the 1:1 ratio breaks). */ html.ipad body.kanji-tier-select .hero-grid, html.ipad body.goi-tier-select .hero-grid, html.ipad body.bunpou-tier-select .hero-grid, html.ipad body.radicals-tier-select .hero-grid, html.ipad body.kana-tier-select .hero-grid { align-items: start; gap: 14px; } html.ipad body.kanji-tier-select .hero-tile, html.ipad body.goi-tier-select .hero-tile, html.ipad body.bunpou-tier-select .hero-tile, html.ipad body.radicals-tier-select .hero-tile, html.ipad body.kana-tier-select .hero-tile { aspect-ratio: 1 / 1; align-self: start; } html.ipad body.kanji-tier-select .hero-kanji, html.ipad body.goi-tier-select .hero-kanji, html.ipad body.bunpou-tier-select .hero-kanji, html.ipad body.radicals-tier-select .hero-kanji, html.ipad body.kana-tier-select .hero-kanji { font-size: 58px; /* scaled down from default 72px for compact tile */ } /* Per-pillar column counts. Default in tier-mode (8 tiles): 8 cols. JLPT-lens override (6 tiles via :has) reduces to 6 cols. */ html.ipad body.kanji-tier-select .hero-grid, html.ipad body.bunpou-tier-select .hero-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; max-width: 1100px !important; } html.ipad body.kanji-tier-select .hero-grid:has(.hero-tile:nth-child(6):last-child), html.ipad body.bunpou-tier-select .hero-grid:has(.hero-tile:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; max-width: 980px !important; } /* Goi: 6 categories, fixed at 6 cols. */ html.ipad body.goi-tier-select .hero-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; max-width: 980px !important; } /* Radicals + Kana: 8 tiles each (Browse all + 7 tiers), 8 cols. */ html.ipad body.radicals-tier-select .hero-grid, html.ipad body.kana-tier-select .hero-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; max-width: 1100px !important; } /* Stack tier tiles ABOVE the fixed-position art strip. The .app container already defaults to `position: relative; z-index: 1` (see design.css §3), so this is belt-and-suspenders for the tier-select context. Note (2026-05-18 late): an earlier version of this rule also forced `.bottom-bar` into `position: relative` to "stack above" the art. That broke the floor-bar on iPad — combined with `.app { min-height: 100vh }`, the bar got pushed below the viewport and only appeared after scrolling. The bottom-bar's default `position: fixed; z-index: 50` already paints above the art (z-index 0) cleanly, so we leave it alone here. The home page never had this override, which is why its floor bar always worked. */ html.ipad body.kanji-tier-select .app, html.ipad body.goi-tier-select .app, html.ipad body.bunpou-tier-select .app, html.ipad body.radicals-tier-select .app, html.ipad body.kana-tier-select .app { position: relative; z-index: 1; } /* Per-pillar art image (bottom strip uses the shared shape defined above; this block just supplies the image + position). */ /* Kanji art v2 (Joshua 2026-05-19): repurpose the .ipad-art-header element as an in-flow vignette UNDER the tile row. Source picture (`players-mahjong.png` — monk + samurai playing mahjong) has its dark BG + floor pre-recolored to alpha=0 in Python so the iPad seigaiha pattern shows THROUGH the figures' surroundings, integrating the picture seamlessly with the canvas. The element is now placed AFTER .hero-grid in kanji/index.html DOM order so it flows naturally below the tiles without needing flex tricks. .app max-width lifted to 1500 so the canvas fills on Pro 13". The shared `.ipad-art-header { position: fixed... }` rule from earlier in this file is fully overridden below. */ html.ipad body.kanji-tier-select .app { max-width: 1500px; } /* Picture sizing: height-driven via clamp(viewport-relative) so the image height + chrome (header + section-title + tile row + paddings ≈ 280pt) fit within iPad mini's 744pt viewport without scrolling, and the picture grows up to ~460pt on iPad Pro 13" (1024pt viewport). aspect-ratio derives the width from height. */ html.ipad body.kanji-tier-select .ipad-art-header { display: block; position: static; top: auto; bottom: auto; left: auto; right: auto; width: auto; /* Source picture is now picture 10 (2736×1536, no floor, the monk + samurai composition Joshua re-rendered himself). */ height: clamp(240px, 38vh, 460px); max-width: 100%; aspect-ratio: 2736 / 1536; margin: 28px auto 0; /* Cache-bust query param matches the most recent re-process of this PNG (covers the case where the file is overwritten but its path stays the same — the browser would otherwise serve the cached older version). Bump when the PNG is regenerated. */ background-image: url('../img/art/players-mahjong.png?v=20260519c'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 1; z-index: 0; pointer-events: none; /* No mask gradient — picture has no floor to fade out. The dark BG is already alpha=0 in the PNG so the canvas seigaiha shows through behind the figures cleanly. */ mask-image: none; -webkit-mask-image: none; } html.ipad body.goi-tier-select .ipad-art-header { background-image: url('../img/art/new-generation.png'); } /* Goi tier-select art v2 (Joshua 2026-05-19): replace the bottom-strip new-generation art with Joshua's picture 11 (gathered group around a mahjong board). Same in-flow treatment as kanji-tier-select — placed AFTER .hero-grid in DOM order, sized via clamp+aspect-ratio. Picture's dark BG is alpha=0 in the PNG so the iPad seigaiha pattern shows through behind the figures cleanly. */ html.ipad body.goi-tier-select .app { max-width: 1500px; } /* The .hero-grid becomes the anchor for absolutely-positioned tier-snake panels built by goi/index.html's JS. */ html.ipad body.goi-tier-select .hero-grid.has-tier-snakes { position: relative; overflow: visible; } /* Tier-snake overlay — appears below the .hero-grid when a tier- capable category (verb/adj/adv/noun) is tapped. Hidden by default; toggled active via JS in goi/index.html. Tile sizing is driven by CSS vars (--snake-w + --snake-gap) which JS sets after computing the hero-tile width at boot. Tile positioning is also set inline by JS (per cat-col + direction) because the L-shape math is cleaner in JS than CSS calc(). */ html.ipad body.goi-tier-select .tier-snake-panel { position: absolute; top: calc(100% + 18px); left: 0; right: 0; height: 0; display: none; z-index: 20; pointer-events: none; } html.ipad body.goi-tier-select .tier-snake-panel.active { display: block; } html.ipad body.goi-tier-select .tier-snake-panel.active .snake-tile { pointer-events: auto; } /* .snake-tile is .hero-tile + this modifier. The hero-tile design (bone face, engraved kanji, dark bold "Tier X" label, color cycle on the kanji) is inherited UNCHANGED — see design.css §5. This rule only handles (a) absolute positioning + sizing (set inline by JS via left/top/width/height), and (b) scaled-down INNER text so the kanji + labels fit in the smaller tile. */ html.ipad body.goi-tier-select .snake-tile { position: absolute; /* aspect-ratio from .hero-tile is overridden — explicit width AND height come from JS so the tile sizes exactly to its snake-tile cell. */ aspect-ratio: auto; } /* Smaller padding inside the bone face so kanji + label have room at the reduced tile size. Original .hero-tile-face was padding: 18px 12px 14px. */ html.ipad body.goi-tier-select .snake-tile .hero-tile-face { padding: 10px 6px 8px; } /* Scaled-down inner type. Original .hero-kanji is 60px; .hero-en 16px; .hero-en-sub 9px. Snake-tile is ~62% of hero-tile, so the inner type scales roughly the same factor. */ html.ipad body.goi-tier-select .snake-tile .hero-kanji { font-size: 36px; } html.ipad body.goi-tier-select .snake-tile .hero-en { font-size: 12px; } html.ipad body.goi-tier-select .snake-tile .hero-en-sub { font-size: 7px; letter-spacing: 0.14em; } /* Subtle "open" state on the hero-tile whose snake is showing — a slight ring + lift so the user sees which parent the snake belongs to. */ html.ipad body.goi-tier-select .hero-tile.is-open { transform: translateY(-2px); outline: 2px solid var(--brass); outline-offset: 4px; border-radius: var(--radius-card); } html.ipad body.goi-tier-select .ipad-art-header { display: block; position: static; top: auto; bottom: auto; left: auto; right: auto; width: auto; height: clamp(240px, 38vh, 460px); max-width: 100%; aspect-ratio: 2912 / 1440; margin: 28px auto 0; background-image: url('../img/art/goi-mahjong.png?v=20260519a'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 1; z-index: 0; pointer-events: none; mask-image: none; -webkit-mask-image: none; } html.ipad body.bunpou-tier-select .ipad-art-header { background-image: url('../img/art/two-samurai.png'); } /* Bunpou tier-select art v3 (Joshua 2026-05-19): replacement for the reverted picture 12 — now using picture 13 (teacher with children + mahjong tiles on a tatami mat). Same in-flow treatment as kanji + goi — placed AFTER .hero-grid in DOM order, sized via clamp+aspect-ratio. The picture's dark BG is alpha=0 in the PNG so the iPad seigaiha pattern shows through behind the figures. The tatami floor is INTENTIONALLY kept opaque (Joshua's instruction: "keep the floor this time, as replacing this would destroy more than it helps"). */ html.ipad body.bunpou-tier-select .app { max-width: 1500px; } html.ipad body.bunpou-tier-select .ipad-art-header { display: block; position: static; top: auto; bottom: auto; left: auto; right: auto; width: auto; height: clamp(240px, 38vh, 460px); max-width: 100%; aspect-ratio: 2816 / 1536; margin: 28px auto 0; background-image: url('../img/art/bunpou-mahjong.png?v=20260519b'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 1; z-index: 0; pointer-events: none; mask-image: none; -webkit-mask-image: none; } html.ipad body.radicals-tier-select .ipad-art-header { background-image: url('../img/art/portrait-of-player.png'); } html.ipad body.kana-tier-select .ipad-art-header { background-image: url('../img/art/sakura-shadow-play.png'); } /* Radicals tier-select art v2 (Joshua 2026-05-19): swap to picture 16 (two craftsmen carving a 部首 radical character). Same in-flow treatment as kanji + goi + bunpou. */ html.ipad body.radicals-tier-select .app { max-width: 1500px; } html.ipad body.radicals-tier-select .ipad-art-header { display: block; position: static; top: auto; bottom: auto; left: auto; right: auto; width: auto; height: clamp(240px, 38vh, 460px); max-width: 100%; aspect-ratio: 2912 / 1440; margin: 28px auto 0; background-image: url('../img/art/radicals-mahjong.png?v=20260519a'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 1; z-index: 0; pointer-events: none; mask-image: none; -webkit-mask-image: none; } /* Kana tier-select art v2 (Joshua 2026-05-19): swap to picture 17 (night-street with kana shop signs フロ/ヤド/ソバ/etc). */ html.ipad body.kana-tier-select .app { max-width: 1500px; } html.ipad body.kana-tier-select .ipad-art-header { display: block; position: static; top: auto; bottom: auto; left: auto; right: auto; width: auto; height: clamp(240px, 38vh, 460px); max-width: 100%; aspect-ratio: 2912 / 1440; margin: 28px auto 0; background-image: url('../img/art/kana-mahjong.png?v=20260519a'); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 1; z-index: 0; pointer-events: none; mask-image: none; -webkit-mask-image: none; } /* Kanji split-pane layout reverted 2026-05-18 late evening (Joshua). The split-pane experiment looked promising but read as overweighted on art vs. function. Kanji tier-select now uses the shared compact 8-col / 6-col tier-select layout (defined above) with no per-pillar art — the `.ipad-art-header { display: none }` rule earlier in this block kills the art surface entirely for kanji. Other pillars still render their bottom-strip art. */ /* ---------- Game page: side-panel rest state ---------- When the iPad ambient side panel is empty (no tile flipped), the back-face area looks vacant. Drop a calm vignette into the background of the panel — the Blind Player feels meditative and matches the "rest" mood. When a tile IS flipped, the rendered back-face is a real DOM element on top of the panel background, so the art is hidden by content. No JS toggling needed. The image is faded to ~50% so it reads as "atmosphere" rather than as a primary visual that competes with the back-face when content arrives. Centered, contain so the full subject is visible regardless of panel proportions. */ /* Specificity gymnastics: game-page.css line ~486 uses the shorthand `background: rgba(...)` on #ipad-side-panel, which resets background-image to none. To prevail, our selector matches the same specificity (1,2,2) AND art.css loads after game-page.css in each game.html so cascade order tiebreaks in our favor. We also set background-color in our rule so we keep the bone tint intact alongside the new image. */ /* Updated 2026-05-19: swap from blind-player.png (a smaller central vignette + radial mask) to the new geisha-kimono-mahjong picture (Joshua's picture 2). The new PNG already has its dark BG recolored to alpha=0 in Python, so the iPad seigaiha pattern shows through behind the figure — no radial CSS mask needed. Picture sized via `background-size: contain` so it fills the entire side panel vertically + horizontally without distortion, covering most of the right side as Joshua requested. */ html.ipad body.game-page #ipad-side-panel { background-image: url('../img/art/geisha-kimono-mahjong.png?v=20260519b'); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: transparent; border-radius: 0; mask-image: none; -webkit-mask-image: none; } /* When a domino IS in the panel (tile flipped), wipe the art entirely + reinstate the bone-tint panel surface so the back- face renders cleanly with no remnant of the picture behind it. */ html.ipad body.game-page #ipad-side-panel:has(> .domino) { background-image: none; background-color: rgba(232, 220, 196, 0.02); border-radius: 12px; mask-image: none; -webkit-mask-image: none; } /* Challenge page gets its OWN side-panel art — vermilion 暗記せよ ("memorize!") calligraphy on dark canvas (Joshua-directed 2026-05-19). Overrides the shared geisha-kimono picture from the game-page rule above. The challenge page already has `body.challenge-page` alongside `body.game-page`, so this rule wins on cascade order (same specificity, later definition). The `:has(> .domino)` rule above still applies — when a challenge- box tile is flipped into the panel, the calligraphy is hidden cleanly. Picture is portrait (1536×2752, aspect 0.56) which fits the tall narrow side panel naturally. */ html.ipad body.challenge-page #ipad-side-panel { background-image: url('../img/art/challenge-calligraphy.png?v=20260519a'); } }