/* Small presentation flourishes that should not compete with the illustrated world. */
#phone-ping{position:absolute;top:22px;right:22px;z-index:13;width:min(310px,calc(100% - 44px));padding:11px 14px 12px;background:#fff4dbf2;border:1px solid #d6bd8b;border-radius:12px;box-shadow:0 8px 24px #102e3030;color:#173d3c;pointer-events:none;display:grid;gap:3px;transform:translateY(-8px);opacity:0}
#phone-ping.show{animation:phonePingIn .26s ease-out both}
#phone-ping strong{font-size:10px;letter-spacing:1.5px;color:#a66533}
#phone-ping span{font-size:12px;line-height:1.35}
.tidy-list .tidy-weight.done{background:#447b69!important;color:#fff4db!important;border-color:#447b69!important;opacity:.85}
.tidy-list .tidy-weight.wrong{animation:tidyWrong .22s ease-out}
#ending .report-row,#ending .report-stats,#ending .verdict,#ending .callbacks,#ending .report-end,#ending #play-again,#ending .elapsed{opacity:0}
#ending.ending-reveal .report-row{animation:reportRowIn .32s ease-out both;animation-delay:calc(.07s + var(--i,0)*.055s)}
#ending.ending-reveal .report-stats{animation:reportRowIn .34s ease-out .46s both}
#ending.ending-reveal .verdict{animation:verdictLand .46s cubic-bezier(.2,.9,.22,1.18) .58s both;transform-origin:center}
#ending.ending-reveal .callbacks{animation:reportRowIn .34s ease-out .75s both}
#ending.ending-reveal .report-end{animation:reportRowIn .32s ease-out .88s both}
#ending.ending-reveal #play-again{animation:reportRowIn .32s ease-out .96s both}
#ending.ending-reveal .elapsed{animation:reportRowIn .3s ease-out 1.03s both}
@keyframes phonePingIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tidyWrong{0%,100%{transform:translateX(0)}35%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
@keyframes reportRowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes verdictLand{0%{opacity:0;transform:translateY(10px) scale(.965) rotate(-.5deg)}75%{opacity:1;transform:translateY(-1px) scale(1.018) rotate(.2deg)}100%{opacity:1;transform:none}}
@media(max-width:600px){#phone-ping{top:12px;right:12px;width:min(290px,calc(100% - 24px));padding:9px 12px}}
@media(prefers-reduced-motion:reduce){#phone-ping.show{animation:none;opacity:1;transform:none}.tidy-list .tidy-weight.wrong{animation:none}#ending .report-row,#ending .report-stats,#ending .verdict,#ending .callbacks,#ending .report-end,#ending #play-again,#ending .elapsed{opacity:1!important;animation:none!important;transform:none!important}}

/* ---- Demo polish pass ---- */
/* Next-step pill inside the location card: always says where to go. */
#next-step{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid #d9c79f;font-size:12px;font-weight:700;color:#173d3c;text-shadow:none}
#next-step i{font-style:normal;font-size:9px;letter-spacing:1.6px;font-weight:800;color:#fff4db;background:#b0703c;border-radius:5px;padding:2px 6px}
#next-step.done i{background:#447b69}
/* Phone ping sits beside the objectives button instead of covering it. */
#phone-ping{right:84px;top:26px}
@media(max-width:600px){#phone-ping{top:12px;right:64px;width:min(250px,calc(100% - 76px))}}
/* Giulia's compliment beat. */
#choices.choices-wait{visibility:hidden}
#world-shade{transition:box-shadow .35s}
.social-hit #world-shade{box-shadow:inset 0 0 260px #3a0f1cdd}
#dialogue-portrait{transition:transform .35s cubic-bezier(.2,.9,.2,1.25)}
.social-hit #dialogue-portrait{transform:scale(1.05)}
.social-hit #dialogue-text{animation:hitLine .6s ease-out}
/* Lift: rep pop, last-rep grind, lockout. */
.mini-card.rep-pop .rep-count strong{display:inline-block;animation:repPop .28s ease-out}
.mini-card.grind{animation:grindShake .11s linear infinite}
.mini-card.grind .lift-track{border-color:#b6553e}
.mini-card.grind .lift-track>div{background:linear-gradient(90deg,#b6553e,#f9ce69);transition:none}
.mini-card.grind #lift-callout{color:#b6553e}
.mini-card.lockout{animation:lockoutPop .55s cubic-bezier(.2,.9,.2,1.35) both;box-shadow:0 9px 0 #aa966b,0 0 0 6px #f9ce69,0 0 70px #f9ce69aa}
.mini-card.lockout #lift-callout{color:#b6553e;display:inline-block;animation:lockoutWord .45s cubic-bezier(.2,.9,.2,1.6) both}
.mini-card.lockout .lift-track>div{background:#f9ce69}
/* Evening outro before the report. */
#outro{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;cursor:pointer}
#outro::before,#outro::after{content:'';position:absolute;inset:0;opacity:0;pointer-events:none}
/* The room itself grades to dusk and night on the canvas (time-light.js, driven by the rolling clock),
   bedside lamp coming on. The overlay only quiets the edges and settles a scrim behind the words,
   so the lit room stays visible through it instead of being painted over in orange and navy. */
#outro::before{background:radial-gradient(ellipse at 50% 45%,#2a183000 38%,#2a18308c 100%)}
#outro::after{background:radial-gradient(ellipse 62% 55% at 50% 44%,#0b1430c4,#0a142694 70%,#070d1cb8)}
#outro.play::before{animation:duskWarm 2.8s ease-in-out forwards}
#outro.play::after{animation:fadeInOnly 1.7s ease-in 1.3s forwards}
#outro .outro-card{position:relative;z-index:1;text-align:center;color:#fff4db;opacity:0}
#outro.play .outro-card{animation:outroIn .8s ease-out .45s forwards}
#outro .eyebrow{letter-spacing:3px;font-size:11px;color:#f9ce69}
#outro strong{display:block;font:700 clamp(54px,12vw,86px) 'Fraunces',Georgia,serif;margin:6px 0 4px;font-variant-numeric:tabular-nums}
#outro p{font:600 26px 'Fraunces',Georgia,serif;margin:0;opacity:0}
#outro.play p{animation:outroIn .9s ease-out 2.7s forwards}
#outro small{display:block;margin-top:22px;font-size:9px;letter-spacing:2px;color:#fff4db70}
#outro.leave .outro-card{visibility:hidden}
/* Landscape phones: suggest portrait on the title. */
.rotate-hint{display:none}
@media (orientation:landscape) and (max-height:500px) and (hover:none){.rotate-hint{display:block;margin-top:8px;font-size:11px;letter-spacing:1px;color:var(--gold)}}
@keyframes repPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes grindShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1.5px,1px)}50%{transform:translate(1.5px,-1px)}75%{transform:translate(-1px,-1px)}}
@keyframes lockoutPop{0%{transform:scale(.97)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes lockoutWord{0%{transform:scale(.6);opacity:0}100%{transform:scale(1.25);opacity:1}}
@keyframes hitLine{0%{transform:scale(1.04);color:#a34136}100%{transform:none}}
@keyframes duskWarm{0%{opacity:0}45%{opacity:1}100%{opacity:.7}}
@keyframes fadeInOnly{from{opacity:0}to{opacity:1}}
@keyframes outroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mini-card.grind,.mini-card.lockout,.social-hit #dialogue-text{animation:none}#outro.play::before,#outro.play::after,#outro.play .outro-card,#outro.play p{animation-duration:.01s;animation-delay:0s}}
/* Phones: toasts drop below the location card so they don't cover the NEXT pill. */
@media(max-width:600px){.touch-layout #toast{top:124px}}

/* ---- Story expansion: dialogue flavours ---- */
/* Leo's brain: the inner voice gets a dark box without changing the prose posture. */
#dialogue[data-ui="brain"]{background:#173d3c;border-color:#3d6b63;box-shadow:0 7px 0 #0b2826,var(--shadow)}
#dialogue[data-ui="brain"] #speaker{color:#f9ce69}
#dialogue[data-ui="brain"] #dialogue-text{color:#eef3e4;font-style:normal;font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:0}
#dialogue[data-ui="brain"] .continue{color:#9fbcb0}
#dialogue[data-ui="brain"] .continue kbd{background:#2c5752;color:#e7efe0}
#dialogue[data-ui="brain"] #choices button{background:#24514b;color:#eef3e4;border-color:#3d6b63}
/* Gold means a rehearsed or earned answer, so plain selection in the brain box stays teal and the
   brain-box rules must re-assert gold and glitch over their own dark buttons. */
#dialogue[data-ui="brain"] #choices button.selected,#dialogue[data-ui="brain"] #choices button:hover{background:#2f6a62;color:#fff4db;border-color:#eef3e4;box-shadow:inset 0 0 0 1px #eef3e4}
#dialogue[data-ui="brain"] #choices button.gold{background:#f9ce69;border-color:#d59f36;color:#173d3c;box-shadow:inset 0 0 0 1px #fff3c4}
#dialogue[data-ui="brain"] #choices button.gold.selected,#dialogue[data-ui="brain"] #choices button.gold:hover{background:#0f2b2a;color:#f9ce69;border-color:#f9ce69;box-shadow:inset 0 0 0 2px #f9ce69}
#dialogue[data-ui="brain"] #choices button.glitched{background:#b6553e;border-color:#8f3b28;color:#fff4db}
#dialogue[data-ui="brain"] #choices button.glitched.selected,#dialogue[data-ui="brain"] #choices button.glitched:hover{background:#7e2f1e;color:#fff4db;border-color:#fff4db}
/* Texts: incoming bubbles on the left, Leo's drafts on the right with a blinking caret. */
#dialogue[data-ui="text"] #dialogue-text,#dialogue[data-ui="draft"] #dialogue-text{width:fit-content;max-width:88%;padding:10px 15px;border-radius:18px 18px 18px 5px;background:#fff;border:1px solid #dccca5;box-shadow:0 2px 0 #e2d3ae}
#dialogue[data-ui="draft"] #dialogue-text{margin-left:auto;border-radius:18px 18px 5px 18px;background:#d8ede1;border-color:#9cc3ae;box-shadow:0 2px 0 #b5d4c2}
#dialogue[data-ui="draft"] #dialogue-text::after{content:'|';margin-left:2px;color:#447b69;animation:caret 1s steps(1) infinite}
#dialogue[data-ui="draft"] #speaker,#dialogue[data-ui="text"] #speaker{letter-spacing:1.5px}
/* The incoming message a draft answers, kept small and quiet above it. */
#reply-to{width:fit-content;max-width:78%;margin:2px 0 8px;padding:6px 13px;border-radius:16px 16px 16px 5px;background:#fff;border:1px solid #dccca5;color:#4d6763;font-size:.86em;line-height:1.35;white-space:pre-line}
#reply-to[hidden]{display:none}
/* Landscape phones have no room for it: the answers matter more than the reminder. */
@media (orientation:landscape) and (max-height:520px){#reply-to{display:none}}
/* Rehearsed lines are gold; gym-brain answers glitch red. */
#choices button.gold{background:#f9ce69;border-color:#d59f36;color:#173d3c;box-shadow:inset 0 0 0 1px #fff3c4}
#choices button.gold.selected,#choices button.gold:hover{background:#173d3c;color:#f9ce69;box-shadow:inset 0 0 0 2px #f9ce69}
#choices button.glitched{background:#b6553e;border-color:#8f3b28;color:#fff4db;animation:glitchIn .32s steps(3) 2}
#choices button.glitched.selected,#choices button.glitched:hover{background:#7e2f1e;color:#fff4db}
/* Vibe toasts: quiet italic, Telltale-style. */
#toast.vibe{background:#fff4dbf5;color:#173d3c;border-color:#d6bd8b;min-width:0;padding:9px 20px}
#toast.vibe strong{font:italic 600 15px 'Fraunces',Georgia,serif;letter-spacing:0;color:#8a3f2c}
@keyframes caret{50%{opacity:0}}
@keyframes glitchIn{0%{transform:translate(-3px,0) skewX(-8deg);filter:hue-rotate(40deg)}50%{transform:translate(3px,-1px) skewX(6deg)}100%{transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){#choices button.glitched{animation:none}#dialogue[data-ui="draft"] #dialogue-text::after{animation:none}}

/* ---- Guitar minigame ---- */
.guitar-lane{position:relative;height:70px;margin:16px 0 8px;border-radius:12px;background:linear-gradient(#ecdfbd,#dccca2);border:2px solid #c2ac7c;overflow:hidden}
.guitar-lane::before,.guitar-lane::after{content:'';position:absolute;left:0;right:0;height:1px;background:#a8906399}
.guitar-lane::before{top:38%}.guitar-lane::after{top:62%}
.g-hitline{position:absolute;left:18%;top:6px;bottom:6px;width:4px;margin-left:-2px;background:#173d3c;border-radius:2px;transition:box-shadow .09s}
.guitar-card.pulse .g-hitline{box-shadow:0 0 0 7px #f9ce6999}
.guitar-card.downbeat .g-hitline{box-shadow:0 0 0 10px #f9ce69cc}
.g-note{position:absolute;top:50%;left:120%;transform:translate(-50%,-50%);min-width:48px;padding:9px 10px;border-radius:10px;background:#fff4db;border:2px solid #c9ad76;font:700 18px 'Fraunces',Georgia,serif;color:#173d3c;transition:background .12s,opacity .35s,border-color .12s}
.g-note.next{background:#f9ce69;border-color:#b58537;box-shadow:0 0 0 3px #f9ce6955}
.g-note.hit{background:#548574;border-color:#3f6b5d;color:#fff4db;opacity:.4}
.g-note.miss{background:#b6553e;border-color:#8f3b28;color:#fff4db;opacity:.4}
.guitar-chords{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.guitar-chords button{padding:14px 6px;border-radius:12px;background:#173d3c;color:#fff4db;font:700 22px 'Fraunces',Georgia,serif;box-shadow:0 4px 0 #092225;display:flex;flex-direction:column;align-items:center;gap:4px;touch-action:manipulation;transition:background .08s,transform .08s}
.guitar-chords button kbd{font:600 9px 'DM Sans',sans-serif;background:#fff5df22;color:#e8dfc4;border-color:#ffffff33;margin:0}
.guitar-chords button.flash{background:#f9ce69;color:#173d3c;transform:translateY(3px);box-shadow:0 1px 0 #092225}
.guitar-chords button.sour{background:#b6553e}
.guitar-card.rec .mini-kicker{color:#b6553e}
.guitar-card.rec .mini-kicker::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#b6553e;margin-right:6px;animation:caret 1s steps(1) infinite}
.guitar-card.lockout{animation:lockoutPop .55s cubic-bezier(.2,.9,.2,1.35) both}
@media(max-height:520px){.guitar-card .instructions{display:none}.guitar-lane{height:54px;margin:8px 0 4px}.guitar-chords button{padding:9px 4px;font-size:18px}}
/* Title: a saved Saturday offers CONTINUA first, with a quiet way to start over. */
#new-day{display:block;margin-top:8px;padding:6px 0;background:none;color:#d9e4cf;font-size:11px;letter-spacing:.3px;text-decoration:underline;text-underline-offset:3px}
#new-day:hover{color:#fff4db}

/* ---- UI polish audit pass ---- */
/* Toasts: rewards and punchlines are meant to be read, not glimpsed. */
/* z-index 13 keeps a reward earned in the bed conversation visible over the evening outro (12). */
#toast{max-width:min(420px,calc(100% - 32px));min-width:260px;padding:14px 26px;z-index:13}
#toast strong{font-size:16px}
#toast small{font-size:14px;line-height:1.45}
#toast .delta{font-size:14px;font-weight:800}
#toast .delta .aura{color:var(--gold)}
#toast.aura-pop{animation:toastIn .25s ease-out,auraPop .45s cubic-bezier(.2,.9,.3,1.3) .22s}
@keyframes auraPop{45%{transform:translate(-50%,0) scale(1.05)}}
@media(max-width:760px){#toast{min-width:210px}#toast strong{font-size:13px}#toast small,#toast .delta{font-size:13px}}
/* The HUD greeting stays on one line, including BUON POMERIGGIO. */
.identity{width:auto;min-width:188px}
.identity .eyebrow{white-space:nowrap;letter-spacing:1.4px}
@media(max-width:1050px){.identity{min-width:145px}}
@media(max-width:760px){.identity{min-width:0}}

/* --- warmth-and-feel pass: UI nits --- */
/* Rolling stat numbers already animate their text; the aura stat also gets a brief gold glint
   sweep on an increase. Class is added once by JS and left in place — the sweep is a one-shot
   animation, invisible again once it finishes (fill-mode forwards). */
.stat.aura-glint{position:relative}
.stat.aura-glint:after{content:'';position:absolute;inset:-5px -9px;border-radius:10px;pointer-events:none;
 background:linear-gradient(100deg,transparent 30%,#fff6d6cc 48%,#f9d785 50%,#fff6d6cc 52%,transparent 70%);
 background-size:240% 100%;background-position:140% 0;mix-blend-mode:screen;
 animation:auraGlintSweep .65s ease-out forwards}
@keyframes auraGlintSweep{0%{background-position:140% 0;opacity:1}100%{background-position:-40% 0;opacity:0}}

/* Title screen: the doodle Leo gets a slow breathing bob and an occasional tiny head tilt. Lives
   on the inner portrait so it never fights the outer card's pointer-tilt transform. Neutralised
   automatically by the site-wide prefers-reduced-motion rule (animation-duration:.01ms). */
.title-character>.portrait{animation:leoBreathe 5.2s ease-in-out infinite}
@keyframes leoBreathe{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-3px) rotate(0deg)}55%{transform:translateY(-1px) rotate(-1.3deg)}72%{transform:translateY(-3px) rotate(.7deg)}88%{transform:translateY(-1px) rotate(0deg)}}

/* Language toggle now reads Original / English / Italiano; give the row a touch more breathing
   room from the place name on desktop (portrait-style.css sets the base gap; this just widens it
   with a slightly more specific selector so load order can't undo it). */
/* Control spacing is owned by portrait-style.css, including compact widths. */
.title-place{white-space:nowrap}

/* Minigame cards: consistent kicker punctuation and no orphaned last word. */
.mini-card h2{text-wrap:balance}
/* Answer key badges were only legible once a button was hovered/selected (the base kbd style
   assumes a dark background). Box them the same way at rest. */
.mini-choice-list button kbd{background:#d9c9a0;color:#5a4a24;border:0;box-shadow:none}
.mini-choice-list button:hover kbd,.mini-choice-list button.selected kbd{background:#2c5752;color:#e7efe0}

/* Cutscene's own continue hint used the translucent footer kbd style and nearly vanished on the
   painted ending art; give it the dialogue box's continue kbd treatment instead. */
.cutscene-next kbd{background:#e6dcbd;color:#3a6254;border:0}

/* Choice index digits were 10px at 73% opacity on cream — legible now, still quiet. */
#choices button .choice-index{font-size:11px;font-weight:800;opacity:.85;min-width:13px}

/* Objectives panel on phone could overlap/clip the location card (both anchored top-left/right at
   the same offset). Stack it below the HUD instead of beside the location card. */
@media(max-width:520px){
 #journal{top:auto;bottom:96px;left:10px;right:10px;width:auto;max-width:none;transform:none}
}

/* Title screen mobile: bring the photo card fully on-screen (it was bleeding off the right edge,
   taking the "PERSONALLY CONFUSED." sticker and part of the frame with it), and give the start
   hint a touch more room so "7–10 minutes" doesn't wrap mid-phrase. */
@media(max-width:520px){
 .title-character{right:4%;width:42%}
 .title-sticker{right:2px}
 #start-hint{max-width:210px}
}

/* Primary buttons (INIZIAMO/CONTINUA, pause's Back to Leo, the report's replay) always sit on the
   gold background, so their text should always be the dark ink, not whatever ambient text color
   the surrounding screen sets (the title screen sets cream, which read low-contrast on gold). */
.primary-button{color:var(--ink)}

/* Press feel: buttons that already raise on hover/selection (choice cards) need their own :active
   step, or the generic button:active{translateY(2px)} loses the specificity fight and the press
   never reads. Keep it small and quick, matching the rest of the game's restrained motion. */
#choices button:active{transform:translateY(0);transition:transform .07s}
.primary-button:active{transform:translateY(1px);box-shadow:0 2px 8px #05232925}
.round-button:active{transform:translateY(1px);box-shadow:0 2px 0 #c9ac78,0 3px 8px #0002}
@media(prefers-reduced-motion:reduce){.title-character>.portrait{animation:none}}

/* --- Feel audit: chrome, objectives, title --- */

/* HUD chrome eases in and out instead of cutting (game.js chromeIn/chromeOut): the film hands the
   HUD back at the peak of its warm wash, and the night outro lets it go so its clock stands alone. */
#hud,#footer,#journal-toggle{transition:opacity .5s ease}
#game.chrome-away :is(#hud,#footer,#location,#journal-toggle){opacity:0;pointer-events:none;transition:opacity .8s ease}

/* Starting the day: a short dip to the ground colour covers the title leaving and the HUD arriving. */
#curtain{position:absolute;inset:0;z-index:60;background:var(--dark);opacity:0;pointer-events:auto;transition:opacity .38s cubic-bezier(.22,1,.36,1)}
#curtain.on{opacity:1;transition:opacity .17s ease-in}
/* The touch deck arrives with the HUD under the curtain, not a beat early under the title. */
#game:has(#title-screen:not([hidden])) #touch-controls{display:none!important}

/* Objectives never sit on Leo (game.js tickJournal): they settle in softly, fade back while he (or
   the couple on the walk) is underneath, and a panel that opened by itself bows out once he walks. */
#journal{transition:opacity .35s ease}
#journal:not([hidden]){animation:journalIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes journalIn{from{opacity:0}}
#journal.under{opacity:.14;pointer-events:none}
#journal.leaving{opacity:0;pointer-events:none;transition-duration:.42s}

/* Pause card: touch players get touch help, not a keyboard legend. */
.help-touch{display:none}
.touch-layout .help-keys{display:none}
.touch-layout .help-touch{display:block}
.help-touch p{margin:5px 0}

/* Title on phones (portrait): the What's New notes and the photo card used to overlap. The title
   column becomes a grid — words on the left, the card beside the subtitle/button/hint, the notes
   full width underneath — so nothing covers anything at any phone height or language. */
@media(max-width:600px) and (orientation:portrait){
 #title-screen{display:grid;grid-template-columns:8% minmax(0,1fr) 36% 6%;grid-template-rows:minmax(72px,.6fr) auto auto auto auto auto auto minmax(14px,1fr) auto 56px}
 #title-screen .title-main{display:contents}
 #title-screen .title-main>*{position:relative;z-index:2;grid-column:2/4;min-width:0}
 #title-screen .edition{grid-row:2;margin-bottom:14px}
 #title-screen .title-main h1{grid-row:3;margin-bottom:0}
 #title-screen .title-main .subtitle{grid-row:4;grid-column:2;max-width:none;margin:18px 14px 18px 0}
 #title-screen #start{grid-row:5;grid-column:2;margin:0 14px 0 0;min-width:0;gap:12px}
 #title-screen #start-hint{grid-row:6;grid-column:2;max-width:none;margin:11px 14px 0 0;text-wrap:balance}
 #title-screen #new-day,#title-screen .rotate-hint{grid-row:7;grid-column:2;justify-self:start}

 #title-screen .title-character{position:relative;grid-row:4/8;grid-column:3;align-self:center;right:auto;bottom:auto;width:auto;height:auto;aspect-ratio:.7;margin:14px 0 6px;border-width:6px;border-bottom-width:28px;opacity:1}
 #title-screen .title-sticker{right:-6px;bottom:-16px;padding:7px 10px;font-size:7.5px;white-space:nowrap}
}
@media(max-width:600px) and (orientation:portrait) and (min-height:740px){


}
@media(max-width:600px) and (orientation:portrait) and (max-height:700px){
 #title-screen{grid-template-rows:minmax(66px,.5fr) auto auto auto auto auto auto minmax(10px,1fr) auto 46px}
 #title-screen .edition{margin-bottom:10px}
 #title-screen .title-main h1{font-size:60px}
 #title-screen .title-main .subtitle{font-size:19px;margin:12px 12px 12px 0}
 #title-screen #start{padding-block:13px}
}
/* Landscape phones: the notes used to fall off the bottom edge and the hint ran into the controls
   line. Three columns instead — words, notes, card — all inside the height between the bars. */
@media(orientation:landscape) and (max-height:520px) and (max-width:1100px){
 #title-screen{display:grid;grid-template-columns:6% auto minmax(0,1fr) minmax(0,25%) 5%;grid-template-rows:minmax(64px,1fr) auto auto auto auto auto auto minmax(6px,1fr) 38px}
 #title-screen .title-main{display:contents}
 #title-screen .title-main>*{position:relative;z-index:2;grid-column:2;min-width:0}
 #title-screen .edition{grid-row:2;margin-bottom:6px}
 #title-screen .title-main h1{grid-row:3;margin:0;font-size:clamp(50px,15vh,68px);letter-spacing:-4px}
 #title-screen .title-main .subtitle{grid-row:4;margin:10px 0;font-size:17px}
 #title-screen #start{grid-row:5;margin:0;justify-self:start}
 #title-screen #start-hint{grid-row:6;margin-top:7px;max-width:250px;text-wrap:balance}
 #title-screen #new-day{grid-row:7;justify-self:start}
 #title-screen .rotate-hint{grid-row:7;grid-column:3;justify-self:start;margin:6px 0 0 9%}

 #title-screen .title-character{position:relative;grid-row:2/8;grid-column:4;align-self:center;justify-self:center;right:auto;bottom:auto;width:100%;height:auto;max-height:100%;aspect-ratio:.78;border-width:6px;border-bottom-width:28px}
 #title-screen .title-sticker{right:-8px;bottom:-16px;padding:7px 10px;font-size:7.5px;white-space:nowrap}


}
@media(orientation:landscape) and (max-height:340px) and (max-width:1100px){
 #title-screen{grid-template-columns:6% auto minmax(0,1fr) minmax(0,21%) 5%;grid-template-rows:minmax(72px,1fr) auto auto auto auto auto auto minmax(4px,1fr) 34px}
 #title-screen .edition{display:none}
 #title-screen .title-main h1{font-size:46px;letter-spacing:-3px}
 #title-screen .title-main .subtitle{font-size:15px;margin:6px 0 8px;max-width:none}
 #title-screen #start{padding:8px 14px;min-width:150px;font-size:12px}
 #title-screen #start-hint{margin-top:5px;font-size:9px}


 #title-screen .rotate-hint{grid-column:3/5}
 /* No room for the photo card beside the words and the notes here; the notes are the news. */
 #title-screen .title-character{display:none}
}