/* The surrounding game stays editorial; the phone uses native-style app surfaces. */
.phone-column { width:360px; max-width:100%; display:flex; flex-direction:column; align-items:center; }
.task-thought { width:100%; min-height:0; margin:0 0 12px; padding:0; color:#272d28; }
.task-thought-heading { justify-content:center; }
.task-thought-heading button { font-size:18px; font-weight:500; padding:9px 10px; color:#626f5d; }
.task-thought p { margin:7px auto 0; font-size:16px; line-height:1.5; letter-spacing:0; max-width:350px; }
.task-thought::after { content:none; }
#task-note-content { opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s; }
#task-note-content[data-visible="true"] { opacity:1; visibility:visible; }
.intro-column,.intro-column h1,.story-lead,.intro-hint { background:transparent; }
.toaster-scene { overflow:visible; }
@media(prefers-reduced-motion:reduce) { #task-note-content { transition:none; } }
#dismiss-reveal { font-size:12px; padding:5px 8px; margin:2px 0 0; }
.phone-caption { width:100%; max-width:312px; margin:0 0 9px; padding:0 2px; display:flex; justify-content:space-between; align-items:baseline; }
.phone-caption .clock-label { color:#757b76; font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; }
.phone-caption #round-clock { font-size:15px; color:#333d35; margin:0; }
.phone,body.in-round .phone { width:min(312px,calc(100vw - 48px)); height:auto; min-height:0; aspect-ratio:9 / 19.5; flex-shrink:0; border:6px solid #242528; border-radius:43px; background:#fff; color:#000; box-shadow:0 0 0 1px #535458,0 0 0 3px #d4d4d5,0 20px 48px -26px #18212670; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; }
.phone-hardware { height:42px; padding:1px 22px 0; font-weight:600; font-size:12px; background:inherit; color:inherit; }
.island { width:83px; height:23px; left:calc(50% - 41.5px); top:7px; background:#090909; }
.phone-screen { height:calc(100% - 69px); background:#fff; color:#000; }
.phone-navigation { height:27px; background:inherit; }
.phone-navigation #phone-home { width:100%; height:27px; display:grid; place-items:center; }
.phone-navigation #phone-home span { width:104px; height:4px; background:#111; }
.phone-footnote { max-width:312px; width:100%; margin:12px 0 0; flex-wrap:wrap; justify-content:center; font-size:10px; line-height:1.4; gap:7px 15px; color:#69716a; }
.phone-footnote #phone-rule { text-align:center; width:100%; }
.simulation-controls { display:flex; align-items:center; gap:18px; }
.phone-footnote button { font-size:11px; min-height:30px; }
.round-status { font-size:11px; text-align:center; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; }
.phone-screen { --app-accent:#007aff; --app-separator:#e5e5ea; --app-secondary:#8e8e93; --app-group:#f2f2f7; }
.phone-screen[data-app="calendar"] { --app-accent:#ff3b30; }
.phone-screen[data-app="notes"] { --app-accent:#a47b00; background:#f2f2f7; }
.phone-screen[data-app="contacts"] { background:#f2f2f7; }
.app-header { min-height:64px; padding:17px 16px 9px; background:inherit; align-items:center; color:inherit; position:relative; }
.app-header h2 { font-size:30px; letter-spacing:.2px; line-height:1.15; font-weight:700; }
.app-header>span { color:var(--app-secondary); font-size:12px; }
.app-body { padding:8px 15px 18px; }
.app-subtitle { color:#6e6e73; font-size:12px; letter-spacing:0; margin:16px 0 8px; }
.ios-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:46px; padding:0 12px; background:inherit; position:sticky; top:0; z-index:2; border-bottom:1px solid #e5e5ea80; }
.ios-nav>div:last-child { text-align:right; }
.ios-nav strong { font-size:16px; font-weight:600; }
.ios-nav .mini-button { padding:6px 0; font-size:15px; }
.mini-button,.ios-compose { background:transparent; color:var(--app-accent); border:0; border-radius:8px; padding:8px 0; font-size:15px; min-height:40px; font-weight:400; }
.mini-button:hover { background:transparent; opacity:.75; }
.app-header .mini-button,.ios-compose { font-size:30px; width:36px; padding:0; }
.mini-button:focus-visible,.mini-day:focus-visible,.event-button:focus-visible { outline:2px solid var(--app-accent); outline-offset:2px; }
.mini-toolbar { gap:16px; margin:4px 0 10px; }
.ios-search { display:flex; align-items:center; gap:7px; padding:0 10px; background:#e9e9ee; border-radius:11px; margin:0 0 16px; color:#77777d; }
.ios-search>span { font-size:25px; line-height:1; }
.ios-search input { min-width:0; width:100%; height:36px; padding:4px 0; border:0; background:transparent; font-size:15px; outline-offset:2px; }
.ios-search input::placeholder { color:#77777d; }
.ios-group { background:#fff; border-radius:11px; overflow:hidden; margin:13px 0; }
.ios-section-label { font-size:11px; color:#6e6e73; padding:16px 0 0; }
.ios-list-count { text-align:center; color:#8e8e93; font-size:12px; margin-top:22px; }
.mini-label { display:flex; align-items:center; gap:10px; padding:10px 12px; margin:0; min-height:48px; font-size:14px; color:inherit; border-bottom:1px solid #e5e5ea; }
.mini-label:last-child { border-bottom:0; }
.mini-label>span { flex-shrink:0; max-width:45%; }
.phone-field { color:inherit; border:0; background:transparent; border-radius:0; margin:0; padding:4px; font-size:15px; min-width:0; }
.mini-editor .phone-field { font-size:14px; text-align:right; }
.mini-text-area { display:block; }
.mini-text-area textarea.phone-field { width:100%; margin-top:8px; text-align:left; min-height:100px; resize:vertical; }
.mini-editor,.event-detail { background:#f2f2f7; min-height:calc(100% - 46px); }
[data-action="event-delete"],[data-action="person-delete"],[data-action="note-delete"] { color:#e3342b; }
/* Messages */
.phone-screen[data-app="messages"] { background:#fff; }
.thread-row { padding:13px 0; gap:10px; border-bottom:1px solid #e5e5ea; color:#000; }
.thread-row>span:nth-child(2) { min-width:0; flex:1; }
.thread-avatar { width:42px; height:42px; font-size:20px; background:linear-gradient(#b7bbc2,#9399a4); color:#fff; font-weight:400; }
.thread-row strong { font-size:16px; font-weight:600; margin-bottom:3px; }
.thread-row p { font-size:13px; line-height:1.4; color:#8e8e93; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.thread-chevron { color:#b1b1b6; font-size:22px; }
.thread-row:hover { background:#f5f5f7; }
.ios-conversation { height:100%; display:flex; flex-direction:column; }
.conversation-header { position:relative; flex-shrink:0; display:flex; justify-content:center; background:#fafafaf2; border-bottom:1px solid #dddde2; padding:4px 14px 7px; text-align:center; }
.conversation-header>button { position:absolute; left:12px; top:5px; color:#007aff; font-size:34px; height:44px; width:36px; }
.conversation-header .thread-avatar { width:32px; height:32px; font-size:17px; margin:auto; }
.conversation-header h2 { margin:3px 0 0; font-size:12px; font-weight:500; letter-spacing:0; }
.messages-scroll { flex:1; min-height:0; overflow-y:auto; padding:0 12px 12px; overscroll-behavior:contain; }
.chat-date { font-size:10px; color:#8e8e93; font-weight:500; margin:15px 0; }
.bubble { background:#e9e9eb; color:#000; border-radius:17px 17px 17px 5px; padding:8px 12px; font-size:15px; line-height:1.35; margin:5px 0; max-width:86%; overflow-wrap:anywhere; }
.bubble.outgoing { background:#007aff; border-radius:17px 17px 5px 17px; color:#fff; }
.message-compose { flex-shrink:0; margin:0; padding:7px 10px 5px; background:#fff; align-items:center; gap:6px; }
.message-compose textarea { border:1px solid #c7c7cc; border-radius:20px; background:white; font-size:15px; min-height:36px; max-height:80px; padding:8px 12px; resize:none; line-height:1.25; }
.send-button { background:#007aff; width:30px; height:30px; font-size:23px; font-weight:600; }
/* Calendar */
.calendar-body { padding:0 14px 12px; }
.mini-month { text-align:left; font-size:18px; font-weight:600; color:#000; }
.mini-calendar { gap:2px 1px; margin:5px 0 17px; }
.mini-calendar>span { font-size:10px; color:#8e8e93; padding:6px 0; }
.mini-day { font-size:15px; color:#000; margin:1px; }
.mini-day.today { color:#ff3b30; }
.mini-day.selected { background:#ff3b30; color:#fff; }
.mini-day.has-event::after { width:3px; height:3px; left:calc(50% - 1.5px); bottom:2px; }
.calendar-agenda { border-top:1px solid #e5e5ea; }
.appointment { background:transparent; border:0; border-radius:0; padding:12px 0; margin:0; color:#000; }
.event-button { display:grid; grid-template-columns:66px minmax(0,1fr); gap:8px; border-bottom:1px solid #e5e5ea; width:100%; }
.event-times { font-size:12px; line-height:1.45; padding-top:1px; color:#333; }
.event-times small { display:block; font-size:11px; color:#8e8e93; }
.event-summary { border-left:3px solid #ff3b30; padding-left:9px; }
.appointment h3 { font-size:15px; font-weight:600; margin:0 0 4px; }
.appointment p { font-size:12px; line-height:1.45; }
.event-button .event-note { color:#8e8e93; font-size:12px; }
.event-detail .appointment h3 { font-size:25px; font-weight:600; margin:5px 0 10px; }
.event-detail .appointment p { font-size:14px; color:#636366; }
.event-detail .ios-group { padding:14px; }
.event-detail .event-note { font-size:15px; margin:0; line-height:1.5; }
/* Clock */
body.in-round .phone[data-app="clock"],.phone-screen[data-app="clock"] { background:#000; color:#fff; --app-accent:#ff9f0a; }
.phone[data-app="clock"] .phone-navigation #phone-home span { background:#fff; }
.clock-body { padding-top:0; }
.alarm-row { grid-template-columns:minmax(0,1fr) auto; padding:13px 0 9px; border-bottom:1px solid #38383a; color:#8e8e93; }
.alarm-row.enabled { color:#fff; }
.alarm-time { font-size:47px; line-height:1.1; letter-spacing:-1px; font-weight:200; padding:0; }
.alarm-time small { float:none; font-size:20px; font-weight:300; color:inherit; margin:0 0 0 3px; letter-spacing:0; }
.alarm-time>span { display:block; font-size:13px; margin-top:4px; font-weight:400; letter-spacing:0; }
.alarm-switch { width:47px; height:29px; padding:2px; border:0; background:#39393d; border-radius:20px; position:relative; }
.alarm-switch>span { display:block; width:25px; height:25px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0004; }
.alarm-switch[aria-checked="true"] { background:#30d158; }
.alarm-switch[aria-checked="true"]>span { transform:translateX(18px); }
.alarm-delete { font-size:11px; padding:3px 0; color:#ff6961; }
.alarm-editor { margin:24px 0 0; padding:15px; border-radius:14px; background:#1c1c1e; }
.alarm-editor h3 { font-size:15px; margin:0 0 12px; font-weight:600; }
.alarm-editor input { font-size:32px; color-scheme:dark; width:100%; background:#2c2c2e; border-radius:9px; padding:8px; text-align:center; }
.alarm-editor .mini-toolbar { justify-content:space-between; margin:8px 0 0; }
[data-app="clock"] .empty-phone { font-size:23px; color:#8e8e93; padding:30px 0; }
/* Notes */
.note-editor { background:#fff; min-height:calc(100% - 46px); display:flex; flex-direction:column; padding-top:0; }
.note-date { font-size:11px; color:#8e8e93; text-align:center; margin:12px 0 18px; }
.phone-note { background:white; height:340px; min-height:260px; resize:vertical; line-height:1.5; padding:0; font-size:17px; color:#111; }
.note-footer { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#8e8e93; }
.mini-list-row { padding:13px 15px; border-bottom:1px solid #e5e5ea; }
.mini-list-row:last-child { border-bottom:0; }
.mini-list-row strong { font-size:16px; }
.mini-list-row span { font-size:13px; margin-top:4px; color:#8e8e93; }
/* Contacts */
.contact-letter { padding:5px 0 4px; color:#6e6e73; font-size:12px; font-weight:600; border-bottom:1px solid #d1d1d6; }
.contact-list-item { display:flex; align-items:center; gap:8px; padding:0; border-bottom:1px solid #e5e5ea; }
.contact-list-item .thread-row { flex:1; min-width:0; padding:12px 0; }
.contact-list-item .mini-button { font-size:12px; }
.contact-card { padding:12px 0 0; text-align:center; }
.contact-card>.thread-avatar { width:83px; height:83px; font-size:41px; margin:0 auto; }
.contact-card h3 { font-size:25px; font-weight:500; margin:13px 0 15px; }
.contact-card>.mini-button { background:#fff; border-radius:11px; padding:10px 25px; font-size:14px; }
.contact-card dl { text-align:left; margin:23px 0 5px; }
.contact-card dl>div { padding:12px 14px; border-bottom:1px solid #e5e5ea; }
.contact-card dl>div:last-child { border:0; }
.contact-card dt { font-size:12px; color:#000; margin:0; }
.contact-card dd { font-size:15px; color:#007aff; margin:5px 0 0; }
.empty-phone { color:#8e8e93; }
@media(max-width:740px) {
 .task-thought { min-height:0; padding:0; }
 .task-thought p { font-size:15px; }
 .task-thought-heading button { font-size:18px; }
}

/* Fit the complete phone to the window; app content scrolls inside its screen. */
body.phone-fit { height:100dvh; min-height:0; overflow:hidden; }
body.phone-fit .site-header { height:64px; min-height:64px; flex-shrink:0; }
body.phone-fit #main { min-height:0; }
body.phone-fit .play-layout { margin:0 auto; padding-bottom:20px; }
.phone-viewport { width:calc(312px * var(--phone-scale,1)); height:calc(676px * var(--phone-scale,1)); position:relative; flex-shrink:0; }
.phone-viewport .phone { width:312px; height:676px; transform:scale(var(--phone-scale,1)); transform-origin:top left; }
body.phone-fit .phone { width:312px; height:676px; }
body.phone-fit .phone-caption { width:min(100%,calc(312px * var(--phone-scale,1))); }
@media(max-height:720px) {
 body.phone-fit .site-header { height:52px; min-height:52px; }
 body.phone-fit .task-thought { margin-bottom:6px; }
 body.phone-fit .task-thought p { font-size:14px; line-height:1.35; margin-top:3px; }
 body.phone-fit .task-thought-heading button { padding:5px; }
 body.phone-fit .phone-footnote { margin-top:8px; gap:2px; }
}