#ip-citizen{--citizen-accent:#9666c9;box-sizing:border-box;position:fixed;inset:0;margin:0;padding:0 18px max(16px,env(safe-area-inset-bottom));width:100%;height:100dvh;max-width:none;max-height:none;border:0;background:transparent;color:#253c48;overflow:auto;font-family:inherit}
#ip-citizen[open]{display:flex;flex-direction:column;align-items:center}
#ip-citizen::backdrop{background:rgba(247,251,245,.10)}
#ip-citizen [hidden]{display:none!important}
#ip-citizen *{box-sizing:border-box}
.citizen-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(12px,env(safe-area-inset-top)) 0 4px;flex-shrink:0}
#ip-citizen button{font:inherit;font-size:1rem;font-weight:700;min-height:46px;padding:11px 16px;border:1px solid #d6d9c9;border-radius:16px;cursor:pointer;background:#fffdf6;color:#253c48;touch-action:manipulation}
#ip-citizen button:focus-visible,#ip-citizen a:focus-visible,#ip-citizen input:focus-visible{outline:3px solid #1b778f;outline-offset:3px}
#ip-citizen button:disabled{opacity:.55;cursor:wait}
.citizen-course{font-size:.8rem;letter-spacing:.12em;font-weight:800;background:#fffdf6;border:1px solid #d6d9c9;border-radius:99px;padding:10px 15px;color:var(--citizen-accent)}
.citizen-stage{position:relative;flex:1;min-height:150px;width:100%;pointer-events:none}
.citizen-reaction{position:absolute;left:calc(50% + 70px);top:20%;color:#cb6984;font-size:3rem;font-weight:800;text-shadow:0 2px #fff}
#ip-citizen[data-celebrating="true"] .citizen-reaction{animation:citizen-heart 1.6s ease-out both}
.citizen-sheet{width:100%;max-width:440px;flex-shrink:0;background:#fffcf4;border:1.5px solid #cbd2c1;border-radius:28px;padding:21px 24px 16px;box-shadow:0 5px 0 #c5d0bd,0 12px 32px #18354716;text-align:left}
.citizen-eyebrow{font-size:.8rem;font-weight:700;color:#687a78;margin:0 0 7px;letter-spacing:.08em}
#citizen-title{font-size:clamp(1.3rem,4.9vw,1.7rem);font-weight:800;line-height:1.3;margin:0;overflow-wrap:anywhere;letter-spacing:-.025em}
.citizen-jp{font-size:.93rem;color:#617376;line-height:1.5;margin:6px 0 16px}
.citizen-care{margin:0 0 16px}.citizen-care>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;font-weight:700;margin-bottom:7px}.citizen-care-number{font-variant-numeric:tabular-nums;color:#5f7375}
.citizen-meter{height:10px;background:#e9eadd;border-radius:12px;overflow:hidden}.citizen-meter span{display:block;width:0%;height:100%;border-radius:12px;background:var(--citizen-accent);transition:width 950ms cubic-bezier(.2,.7,.2,1)}
#citizen-care-help{margin:8px 0 0;font-size:.75rem;line-height:1.5;color:#617376}.citizen-voice-help{margin:0;font-size:.875rem;line-height:1.5;color:#53686b}
.citizen-modes{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;background:#ecefe6;border-radius:17px;margin-bottom:14px}
#ip-citizen .citizen-modes button{border:0;background:transparent;min-height:40px;padding:8px}
#ip-citizen .citizen-modes button[aria-pressed="true"]{background:#fffdf8;box-shadow:0 2px 5px #1b455615;color:var(--citizen-accent)}
.citizen-form,.citizen-voice,.citizen-finish{display:grid;gap:10px}.citizen-form label{font-size:.875rem;color:#53686b}.citizen-form input{width:100%;min-height:50px;background:white;border:1.5px solid #b9c9c5;border-radius:13px;padding:12px;font:inherit;font-size:1rem;color:#213d49}
#ip-citizen .citizen-primary{display:flex;align-items:center;justify-content:center;gap:12px;background:#187e94;color:white;border-color:#176979;border-bottom-width:4px}
#ip-citizen .citizen-primary:active{transform:translateY(2px);border-bottom-width:2px}
.citizen-feedback{font-size:.875rem;line-height:1.55;min-height:1.5em;margin:12px 0 0;color:#5a7071}.citizen-feedback[data-kind="success"]{color:#287049;font-weight:700}.citizen-feedback[data-kind="error"]{color:#984c37}
.citizen-finish{margin-top:13px}.citizen-transcript{font-size:1.1rem;line-height:1.4;background:#edf2e8;border-radius:12px;padding:12px;margin:0;overflow-wrap:anywhere}.citizen-recovery{display:block;color:#1b738b;font-size:1rem;line-height:1.5;margin-top:12px;min-height:44px;padding:10px 0}
body.citizen-visiting #ic-ui,body.citizen-visiting #ip-home,body.citizen-visiting #ip-happy,body.citizen-visiting #ip-era,body.citizen-visiting #ip-tools,body.citizen-visiting #ip-rail-l,body.citizen-visiting #ip-fit,body.citizen-visiting #ip-wallet,body.citizen-visiting #ip-activities{visibility:hidden!important}
@keyframes citizen-heart{0%{opacity:0;transform:translateY(20px) scale(.6)}30%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-25px) scale(.9)}}
@media(max-height:760px){#ip-citizen{padding:0 12px max(10px,env(safe-area-inset-bottom))}.citizen-sheet{padding:15px 18px 12px;border-radius:24px}.citizen-stage{min-height:110px}.citizen-jp{margin-bottom:10px}.citizen-care{margin-bottom:10px}.citizen-modes{margin-bottom:10px}.citizen-feedback{margin-top:8px}}
@media(max-height:520px){.citizen-stage{min-height:85px}.citizen-header{padding-top:6px}.citizen-eyebrow{display:none}.citizen-sheet{max-width:560px}.citizen-close span{display:none}}
@media(min-width:900px){#ip-citizen{padding-bottom:24px}.citizen-stage{min-height:180px}.citizen-sheet{max-width:440px}.citizen-header{max-width:960px}}
@media(prefers-reduced-motion:reduce){.citizen-meter span{transition:none}#ip-citizen[data-celebrating="true"] .citizen-reaction{animation:none}#ip-citizen button:active{transform:none}}
.citizen-picker{width:calc(100% - 32px);max-width:460px;max-height:82dvh;overflow:auto;padding:24px;border:1px solid #b9c9bf;border-radius:28px;background:#fffcf4;color:#263e49;font-family:inherit}.citizen-picker::backdrop{background:#143c5040}.citizen-picker h2{font-size:1.3rem;margin:0 0 18px}.citizen-picker button{display:flex;flex-direction:column;gap:5px;text-align:left;min-height:54px;width:100%;padding:12px 16px;margin:8px 0;background:#fff;border:1px solid #dce2d5;border-radius:16px;font:inherit;color:#263e49;cursor:pointer}.citizen-picker button small{font-size:.75rem;font-weight:800;color:var(--citizen-accent,#56776a);letter-spacing:.09em}.citizen-picker button:focus-visible{outline:3px solid #187e94;outline-offset:2px}.citizen-picker a{display:block;padding:12px 0;color:#187e94}.island-coast #ic-citizens{background:#fffcf4;border:1px solid #bfcfc5;border-radius:18px;padding:12px 22px;font:inherit;font-weight:700;color:#215b65;min-height:48px;cursor:pointer}.island-coast #ic-explore{display:flex;align-items:center;justify-content:center;gap:10px}.island-coast #ic-explore p{display:none}
@media(max-width:370px){.island-coast #ic-explore button{font-size:.85rem;padding:10px 14px}}
body.citizen-visiting #ip-dev{visibility:hidden!important}
#ip-citizen.citizen-keyboard{padding-bottom:8px}.citizen-keyboard .citizen-header{padding-top:4px}.citizen-keyboard .citizen-stage{min-height:70px}.citizen-keyboard .citizen-sheet{padding:12px 16px}.citizen-keyboard .citizen-eyebrow,.citizen-keyboard .citizen-jp,.citizen-keyboard .citizen-modes,.citizen-keyboard .citizen-form label{display:none}.citizen-keyboard .citizen-care{margin:8px 0}.citizen-keyboard .citizen-form{gap:7px}.citizen-keyboard .citizen-feedback{font-size:.8rem;margin-top:6px}
/* The miniature has its own footer row; it never covers an answer or feedback. */
#ip-citizen .citizen-card-footer{display:flex;justify-content:flex-end;align-items:center;gap:14px;min-height:142px;margin-top:15px;padding-top:12px;border-top:1px solid #dce2d0}
#ip-citizen .citizen-card-footer p{margin:0;white-space:pre-line;font-size:.76rem;line-height:1.7;color:#526b61;text-align:right}
#ip-citizen .citizen-card-button{display:block;flex:0 0 94px;width:94px;min-height:126px;padding:0;border:0;border-radius:14px;background:transparent;color:inherit;box-shadow:none;text-align:left}
#ip-citizen .citizen-card-button>article{width:100%;margin:0;pointer-events:none}
#ip-citizen .citizen-card-button .sgwc-copy{padding:6px 6px 7px;min-height:46px}
#ip-citizen .citizen-card-button .sgwc-name{font-size:12px!important;line-height:1.2!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#ip-citizen .citizen-card-button .sgwc-jp{font-size:9px;line-height:1.4;margin-top:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#ip-citizen .citizen-card-button .sgwc-rarity{font-size:7px;padding:2px 3px;left:4px;top:4px}
#ip-citizen .citizen-card-button:focus-visible{outline:3px solid #287467;outline-offset:5px}
#ip-citizen.citizen-keyboard .citizen-card-footer{display:flex;min-height:86px;margin-top:8px;padding-top:7px}
#ip-citizen.citizen-keyboard .citizen-card-button{min-height:78px}
#ip-citizen.citizen-keyboard .citizen-card-button .sgwc-art{height:36px;aspect-ratio:auto}
#ip-citizen.citizen-keyboard .citizen-card-button .sgwc-copy{min-height:31px;padding:4px 5px}
#ip-citizen.citizen-keyboard .citizen-card-button .sgwc-name{font-size:10px!important;-webkit-line-clamp:1}
#ip-citizen.citizen-keyboard .citizen-card-button .sgwc-jp{font-size:8px;-webkit-line-clamp:1}
@media(max-height:760px){#ip-citizen .citizen-card-footer{min-height:120px;margin-top:10px;padding-top:9px}#ip-citizen .citizen-card-button{flex-basis:80px;width:80px;min-height:106px}}

/* Approved island family. Course accents still identify the resident; action
 * colour describes what the player can do without repainting the citizen/card art. */
#ip-citizen,.citizen-picker{
  --citizen-cream:var(--island-ui-cream,#fff8e7);--citizen-ink:var(--island-ui-ink,#123e50);
  --citizen-aqua:var(--island-ui-aqua,#27c7c9);--citizen-green:var(--island-ui-green,#70cf49);
  color:var(--citizen-ink)
}
#ip-citizen .citizen-sheet,.citizen-picker{
  background:linear-gradient(#fffef8,var(--citizen-cream));border:1px solid #e8d8b7;
  box-shadow:inset 0 2px #fff,inset 0 -2px #f4e8cb,0 5px 0 #c7b891,0 12px 30px #123e502b
}
#ip-citizen button:not(.citizen-card-button),.citizen-picker button{
  --citizen-button-top:#fffef7;--citizen-button-bottom:#f7ecd3;--citizen-button-rim:#e6d6b6;--citizen-button-base:#c6b68f;
  min-height:46px;border:1px solid var(--citizen-button-rim);border-radius:17px;color:var(--citizen-ink);
  background:radial-gradient(ellipse 90% 70% at 50% 0,#ffffffb8,transparent 76%),linear-gradient(var(--citizen-button-top),var(--citizen-button-bottom));
  box-shadow:inset 0 2px #fff,inset 0 -2px #ffffff47,0 4px 0 var(--citizen-button-base),0 6px 11px #123e5019;
  font-weight:800;touch-action:manipulation;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease
}
#ip-citizen button.citizen-primary{
  --citizen-button-top:#73f3ec;--citizen-button-bottom:var(--citizen-aqua);--citizen-button-rim:#9cfff6;--citizen-button-base:#168e9f;
  min-height:50px
}
#ip-citizen button.citizen-confirm{
  --citizen-button-top:#b4f678;--citizen-button-bottom:var(--citizen-green);--citizen-button-rim:#c9ffa1;--citizen-button-base:#448f2b
}
#ip-citizen .citizen-course{background:var(--citizen-cream);border-color:#e8d8b7;box-shadow:inset 0 2px #fff,0 3px 0 #c7b891}
#ip-citizen .citizen-eyebrow{color:#647477}
#ip-citizen .citizen-care>div:first-child{color:var(--citizen-ink)}
#ip-citizen .citizen-meter{height:12px;background:#e8e2cc;box-shadow:inset 0 2px 3px #6b735e29,inset 0 0 0 1px #d4ccb3}
#ip-citizen .citizen-meter span{background:linear-gradient(#ffffff45,transparent),var(--citizen-accent);box-shadow:inset 0 1px #ffffff70}
#ip-citizen .citizen-modes{gap:8px;padding:5px 5px 8px;background:#ebe6d4;border:1px solid #e0d7be;border-radius:20px;box-shadow:inset 0 2px 3px #123e500d}
#ip-citizen .citizen-modes button{min-height:44px;font-size:.9rem;padding:8px;border-radius:14px}
#ip-citizen .citizen-modes button[aria-pressed=true]{
  --citizen-button-top:#b0f6ef;--citizen-button-bottom:#66dadd;--citizen-button-rim:#44b5ba;--citizen-button-base:#319397;
  background:radial-gradient(ellipse 90% 70% at 50% 0,#ffffffb8,transparent 76%),linear-gradient(var(--citizen-button-top),var(--citizen-button-bottom));
  border-color:var(--citizen-button-rim);box-shadow:inset 0 2px #fff,0 3px 0 var(--citizen-button-base),0 5px 9px #123e5019;
  color:var(--citizen-ink);outline:2px solid #24858f;outline-offset:1px
}
#ip-citizen .citizen-form input{color:var(--citizen-ink);background:#fffef9;border:2px solid #b9d3ce;box-shadow:inset 0 2px 3px #123e5010}
#ip-citizen .citizen-form input:focus{border-color:#248c9b}
#ip-citizen .citizen-transcript{color:var(--citizen-ink);background:#edf7f1;border:1px solid #c2ddd1;box-shadow:inset 0 1px #fff}
#ip-citizen .citizen-feedback:not(:empty){padding:9px 11px;background:#f3efdf;border:1px solid #e0d8c0;border-radius:12px;color:#536b71}
#ip-citizen .citizen-feedback[data-kind=success]:not(:empty){color:#205633;background:#e1f6d5;border-color:#83bd6a;font-weight:800}
#ip-citizen .citizen-feedback[data-kind=error]:not(:empty){color:#913e2e;background:#fff0e4;border-color:#dfa887;font-weight:700}
#ip-citizen .citizen-recovery,.citizen-picker a{min-height:44px;color:#176080;text-underline-offset:3px}
#ip-citizen .citizen-card-footer{border-color:#e4d8ba}
#ip-citizen .citizen-card-footer p{color:#526b71}
.citizen-picker{padding-bottom:28px}
.citizen-picker button{margin:12px 0;padding:14px 16px;border-left:5px solid var(--citizen-accent,#6b9d97)}
.citizen-picker button small{color:var(--citizen-accent,#56776a)}
@media(hover:hover){
  #ip-citizen button:not(.citizen-card-button):not(:disabled):hover,.citizen-picker button:not(:disabled):hover{filter:brightness(1.035)}
}
#ip-citizen button:not(.citizen-card-button):not(:disabled):active,.citizen-picker button:not(:disabled):active{
  transform:translateY(3px);border-bottom-width:1px;
  box-shadow:inset 0 1px 2px #123e501a,0 1px 0 var(--citizen-button-base),0 3px 7px #123e5019
}
#ip-citizen button:not(.citizen-card-button):disabled,.citizen-picker button:disabled{opacity:.55;filter:saturate(.25);transform:none;cursor:wait;box-shadow:inset 0 1px #fff,0 2px 0 #b6b8a8}
#ip-citizen :is(button,a,input):focus-visible,#ip-citizen .citizen-modes button:focus-visible,
.citizen-picker :is(button,a):focus-visible{outline:3px solid #165f82;outline-offset:4px}
#ip-citizen.citizen-keyboard .citizen-feedback:not(:empty){padding:6px 9px}
@media(max-height:760px){#ip-citizen .citizen-feedback:not(:empty){padding:7px 10px}}
@media(prefers-reduced-motion:reduce){
  #ip-citizen button,.citizen-picker button{transition:none}
  #ip-citizen button:not(.citizen-card-button):not(:disabled):active,.citizen-picker button:not(:disabled):active{transform:none}
}

/* ---- APPROVED PRACTICE PANEL (founder, 2026-10-06) ----
 * The citizen stays in the island scene (the dialog is transparent above the canvas). Crisp-white overhead happiness card,
 * deep-teal lower panel, the real SGWordCards card beside lilac (speech) and blue (typing) choices with drawn icons.
 * Happiness bands: 0-30 low (red), 31-69 middle (yellow), 70-100 high (green); the number and the 30/70 ticks carry the
 * same information without colour. Presentation only: no formula or decay lives here. */
#ip-citizen{--citizen-teal:#0f3f49;--citizen-teal-deep:#0b3039;--citizen-on-teal:#f4fbfb;--citizen-on-teal-soft:#c4dfe1;
  --citizen-low:#e0505e;--citizen-middle:#f2c230;--citizen-high:#33b464;--citizen-lilac-top:#efe5ff;--citizen-lilac:#d8c6fb;
  --citizen-lilac-rim:#c3abf2;--citizen-lilac-base:#9f86d6;--citizen-blue-top:#e6f4ff;--citizen-blue:#c4e3fb;--citizen-blue-rim:#a9d1f2;
  --citizen-blue-base:#79aed8;--citizen-navy:#16264f}
.citizen-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#ip-citizen button.citizen-close{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px 8px 12px;border-radius:999px;
  background:#fff;border:0;color:var(--citizen-navy);box-shadow:0 3px 10px #0b30392e}
#ip-citizen .citizen-close svg{width:20px;height:20px}
#ip-citizen .citizen-course{background:#fff;border:0;box-shadow:0 3px 10px #0b30392e}
#ip-citizen .citizen-stage{display:flex;flex-direction:column;align-items:center}
/* Overhead happiness display */
#ip-citizen .citizen-care{position:relative;z-index:1;width:min(18.5rem,82%);margin:6px auto 0;padding:10px 16px 12px;background:#fff;
  border-radius:18px;box-shadow:0 4px 14px #0b30392b;color:var(--citizen-navy);pointer-events:auto}
#ip-citizen .citizen-care-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;font-size:.95rem;font-weight:800;margin:0 0 8px}
#ip-citizen .citizen-care-label{white-space:nowrap}   /* large text: the label never breaks mid-phrase */
#ip-citizen .citizen-care-number{font-variant-numeric:tabular-nums;color:var(--citizen-navy);font-weight:800;white-space:nowrap;margin-left:auto}   /* drops to its own line as a unit */
#ip-citizen .citizen-meter{position:relative;height:12px;border-radius:99px;background:#e6e9ee;box-shadow:inset 0 1px 2px #16264f1f;overflow:hidden}
#ip-citizen .citizen-meter span{background:#9aa3ad;box-shadow:none;border-radius:99px}
#ip-citizen .citizen-meter[data-band=low] span{background:var(--citizen-low)}
#ip-citizen .citizen-meter[data-band=middle] span{background:var(--citizen-middle)}
#ip-citizen .citizen-meter[data-band=high] span{background:var(--citizen-high)}
#ip-citizen .citizen-meter-tick{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#ffffffd9;pointer-events:none}
#ip-citizen .citizen-stage-note{position:relative;z-index:1;margin:auto auto 8px;max-width:20rem;padding:8px 12px;border-radius:12px;background:#ffffffeb;
  color:var(--citizen-navy);font-size:.85rem;line-height:1.5;text-align:center}
#ip-citizen .citizen-reaction{z-index:1}
/* Deep-teal lower panel */
#ip-citizen .citizen-sheet{max-width:30rem;background:linear-gradient(var(--citizen-teal),var(--citizen-teal-deep));border:0;border-radius:28px 28px 22px 22px;
  color:var(--citizen-on-teal);box-shadow:0 -2px 0 #ffffff1f inset,0 -6px 24px #0b303933;padding:20px 20px 16px}
#ip-citizen .citizen-eyebrow{color:var(--citizen-on-teal-soft);font-weight:800;letter-spacing:.06em}
#ip-citizen #citizen-title{color:#fff;font-size:clamp(2rem,9vw,2.7rem);line-height:1.1;letter-spacing:-.02em}
#ip-citizen .citizen-jp{color:var(--citizen-on-teal);font-size:1.15rem;font-weight:700;margin:6px 0 14px}
#ip-citizen button.citizen-listen{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:8px 18px;border-radius:12px;
  background:transparent;border:2px solid #f4fbfbcc;color:#fff;box-shadow:none;font-size:1rem}
#ip-citizen button.citizen-listen[aria-pressed=true]{background:#ffffff26}
#ip-citizen .citizen-listen svg{width:24px;height:24px}
#ip-citizen .citizen-feedback{color:var(--citizen-on-teal-soft)}
#ip-citizen .citizen-feedback:not(:empty){background:#ffffff14;border-color:#ffffff2e;color:var(--citizen-on-teal)}
#ip-citizen .citizen-feedback[data-kind=success]:not(:empty){background:#e7f8ec;border-color:#9fdcb3;color:#17502d}
#ip-citizen .citizen-feedback[data-kind=error]:not(:empty){background:#fff1ec;border-color:#f0b3a0;color:#8a2f1d}
#ip-citizen .citizen-practice{margin-top:14px;padding-top:14px;border-top:1px solid #ffffff2e}
#ip-citizen .citizen-choose{margin:0 0 10px;font-size:.95rem;font-weight:800;color:var(--citizen-on-teal);text-align:right}
/* card + two choices; under enlarged text the card wraps above the choices (rem-based) */
#ip-citizen .citizen-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:12px;align-items:stretch}
#ip-citizen .citizen-card-footer{display:flex;justify-content:center;align-items:stretch;min-height:0;margin:0;padding:0;border:0}
#ip-citizen .citizen-card-button{flex:0 0 94px;width:94px;max-width:none;min-height:0}   /* the retained 94 px practice card (repair requirement, 2026-10-07); visual acceptance pending */
#ip-citizen .citizen-modes{display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;background:transparent;border:0;box-shadow:none}
#ip-citizen .citizen-modes button.citizen-mode{display:flex;align-items:center;gap:12px;min-height:72px;padding:10px 14px;border-radius:18px;text-align:left;
  color:var(--citizen-navy);outline:none;font-size:1rem}
#ip-citizen .citizen-mode svg{flex:0 0 32px;width:32px;height:32px}
#ip-citizen .citizen-mode b{display:block;font-size:1.15rem;line-height:1.25}
#ip-citizen .citizen-mode small{display:block;font-size:.8rem;font-weight:700;opacity:.85}
#ip-citizen .citizen-modes button.citizen-mode-speech{--citizen-button-top:var(--citizen-lilac-top);--citizen-button-bottom:var(--citizen-lilac);--citizen-button-rim:var(--citizen-lilac-rim);--citizen-button-base:var(--citizen-lilac-base)}
#ip-citizen .citizen-modes button.citizen-mode-typed{--citizen-button-top:var(--citizen-blue-top);--citizen-button-bottom:var(--citizen-blue);--citizen-button-rim:var(--citizen-blue-rim);--citizen-button-base:var(--citizen-blue-base)}
#ip-citizen .citizen-modes button.citizen-mode{background:linear-gradient(var(--citizen-button-top),var(--citizen-button-bottom));border:1.5px solid var(--citizen-button-rim);
  box-shadow:inset 0 2px #ffffffb3,0 4px 0 var(--citizen-button-base),0 7px 12px #0b30393d}
/* the chosen way is marked by shape (a white ring and check-like inset), not colour alone */
#ip-citizen .citizen-modes button.citizen-mode[aria-pressed=true]{box-shadow:inset 0 0 0 3px #fff,0 4px 0 var(--citizen-button-base),0 7px 12px #0b30393d}
#ip-citizen .citizen-modes button.citizen-mode[data-unavailable=true]{filter:saturate(.35);opacity:.8}
/* practice controls on the teal panel: white input, aqua primary kept, no cream-heavy secondary controls */
#ip-citizen .citizen-form,#ip-citizen .citizen-voice,#ip-citizen .citizen-finish{margin-top:14px}
#ip-citizen .citizen-form label,#ip-citizen .citizen-voice-help{color:var(--citizen-on-teal)}
#ip-citizen .citizen-form input{background:#fff;border-color:#9fd3d6;color:var(--citizen-navy)}
#ip-citizen button.citizen-stop,#ip-citizen button.citizen-cancel,#ip-citizen button.citizen-done{
  --citizen-button-top:#ffffff;--citizen-button-bottom:#eef6f7;--citizen-button-rim:#d3e6e8;--citizen-button-base:#7fa9ae;color:var(--citizen-navy)}
#ip-citizen .citizen-transcript{background:#fff;color:var(--citizen-navy)}
#ip-citizen .citizen-recovery{color:#bfeef0}
#ip-citizen :is(button,a,input):focus-visible,#ip-citizen .citizen-modes button:focus-visible{outline:3px solid #ffd54a;outline-offset:3px}
#ip-citizen.citizen-keyboard .citizen-care{padding:6px 12px 8px}
#ip-citizen.citizen-keyboard .citizen-care-row{margin-bottom:4px;font-size:.85rem}
#ip-citizen.citizen-keyboard .citizen-choose{display:none}
#ip-citizen.citizen-keyboard .citizen-practice{margin-top:8px;padding-top:8px}
#ip-citizen.citizen-keyboard .citizen-modes button.citizen-mode{min-height:44px;padding:6px 10px}
#ip-citizen.citizen-keyboard .citizen-mode small{display:none}
#ip-citizen.citizen-keyboard #citizen-title{font-size:1.6rem}
@media(max-height:760px){#ip-citizen #citizen-title{font-size:clamp(1.7rem,8vw,2.2rem)}#ip-citizen .citizen-modes button.citizen-mode{min-height:60px}}
@media(prefers-reduced-motion:reduce){#ip-citizen .citizen-meter span{transition:none}#ip-citizen .citizen-modes button.citizen-mode{transition:none}}

/* Founder correction, 2026-10-07: a citizen in the upper half, a compact study panel in the lower half.
   Only the study content scrolls; the answer/action row remains inside the visible viewport above the keyboard. */
#ip-citizen{overflow:hidden;padding:0 12px max(10px,env(safe-area-inset-bottom));overscroll-behavior:contain}
#ip-citizen[open]{display:grid;grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);justify-items:center;align-items:stretch}
#ip-citizen .citizen-header{min-width:0;max-width:960px}
#ip-citizen .citizen-stage{min-height:0;overflow:hidden}
#ip-citizen .citizen-sheet{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:12px 14px 14px;border-radius:24px 24px 20px 20px}
#ip-citizen .citizen-study{min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:8px;padding:3px 4px 7px;margin:0 -4px}
#ip-citizen .citizen-prompt{display:flex;align-items:center;justify-content:space-between;gap:10px}
#ip-citizen .citizen-word{min-width:0}
#ip-citizen #citizen-title{font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.15}
#ip-citizen .citizen-jp{font-size:1rem;line-height:1.35;margin:3px 0 0}
#ip-citizen button.citizen-listen{flex-shrink:0;flex-direction:column;gap:2px;min-height:46px;padding:5px 8px;font-size:.7rem}
#ip-citizen .citizen-listen svg{width:22px;height:22px}
#ip-citizen .citizen-feedback{min-height:0;font-size:.8rem;line-height:1.4;margin:7px 0 0}
#ip-citizen .citizen-feedback:not(:empty){padding:6px 8px}
#ip-citizen .citizen-practice{margin-top:8px;padding-top:8px}
#ip-citizen .citizen-choose{font-size:.8rem;margin-bottom:6px}
#ip-citizen .citizen-choice-grid{grid-template-columns:94px minmax(0,1fr);gap:12px;align-items:center}
#ip-citizen .citizen-modes{gap:8px}
#ip-citizen .citizen-modes button.citizen-mode{min-height:48px;padding:6px 10px;gap:8px;border-radius:14px}
#ip-citizen .citizen-mode svg{flex-basis:24px;width:24px;height:24px}
#ip-citizen .citizen-mode b{font-size:1rem}
#ip-citizen .citizen-mode small{font-size:.7rem;line-height:1.3}
#ip-citizen .citizen-form,#ip-citizen .citizen-voice,#ip-citizen .citizen-finish{flex-shrink:0;margin-top:7px;gap:6px}
#ip-citizen .citizen-form{grid-template-columns:minmax(0,1fr) auto}
#ip-citizen .citizen-form label{grid-column:1/-1;font-size:.75rem;line-height:1.3}
#ip-citizen .citizen-form input{min-width:0;min-height:46px;padding:10px;font-size:1rem}
#ip-citizen .citizen-form button.citizen-primary{min-height:46px;padding:9px 10px;gap:5px;font-size:.85rem}
#ip-citizen .citizen-finish{grid-template-columns:1fr auto}
#ip-citizen .citizen-finish button{min-height:46px;padding:8px;font-size:.85rem}
#ip-citizen .citizen-voice{max-height:65%;overflow:auto;overscroll-behavior:contain;padding:0 3px 5px}
#ip-citizen.citizen-keyboard{padding-bottom:8px}
#ip-citizen.citizen-keyboard .citizen-header{padding-top:max(4px,env(safe-area-inset-top))}
#ip-citizen.citizen-keyboard .citizen-care{margin:4px auto 0}
#ip-citizen.citizen-keyboard .citizen-sheet{padding:8px 12px 10px}
/* Keyboard open: drop the mode choice and its heading, but KEEP the requested word card (its compact keyboard size is
   below; test/wordex-card-integration.cjs "keyboard layout retains the requested card"). */
#ip-citizen.citizen-keyboard .citizen-practice{margin-top:4px;padding-top:4px}
#ip-citizen.citizen-keyboard .citizen-choose,#ip-citizen.citizen-keyboard .citizen-modes{display:none}
#ip-citizen.citizen-keyboard .citizen-choice-grid{grid-template-columns:94px;justify-content:center}
#ip-citizen.citizen-keyboard .citizen-form label{display:none}
#ip-citizen.citizen-keyboard #citizen-title{font-size:1.4rem}
@media(max-width:340px){#ip-citizen .citizen-choice-grid{gap:8px}#ip-citizen .citizen-mode svg{display:none}}
/* NO SCROLL (Andrew, 13 Oct 2026 06:05, item 3): the screen fits the iPhone with no scroll and every element visible. The
   lower panel takes the height of its content rather than half the screen, and the citizen's stage takes the rest. If a
   phone is ever too short, the panel shrinks and its study area scrolls as before; nothing is cut off. While the keyboard
   is up the same rule holds: in the app the dialog ends at the keyboard (Andrew, 13 Oct 2026 12:40, item 2), so the sheet
   keeps its content height and the stage gives way. test/citizen-screen-fits.cjs, test/citizen-keyboard-fits.cjs */
#ip-citizen[open]{grid-template-rows:auto minmax(0,1fr) minmax(0,auto)}
/* The 服 button (island-wardrobe.js puts it first in the study area) sits beside the word, not on a row of its own. The
   wardrobe and its sheet are unchanged; an open sheet takes the full width below. */
#ip-citizen .citizen-study{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start}
#ip-citizen .citizen-study>*{grid-column:1/-1}
#ip-citizen .citizen-study>.citizen-prompt{grid-column:1;grid-row:1}
#ip-citizen .citizen-study>.iw-open{grid-column:2;grid-row:1;align-self:start;margin:0 0 0 8px}
/* Short phones (up to 820 px tall: iPhone SE, 13 mini): the happiness display and the spacing take their compact keyboard
   sizes, the type and the card's picture are a step smaller; nothing is hidden. Sized for the longest real citizen from the
   measured run-3 stage heights (test/citizen-screen-fits.cjs): the 13 mini (812) had missed the first, 760 px step. */
@media(max-height:820px){
 #ip-citizen .citizen-care{padding:6px 12px 8px;margin-top:4px}
 #ip-citizen .citizen-care-row{margin-bottom:4px;font-size:.85rem}
 #ip-citizen #citizen-title{font-size:clamp(1.3rem,5.6vw,1.7rem);line-height:1.12}
 #ip-citizen .citizen-jp{font-size:.9rem;line-height:1.3}
 #ip-citizen .citizen-practice{margin-top:6px;padding-top:6px}
 #ip-citizen .citizen-choose{margin-bottom:4px}
 #ip-citizen .citizen-voice-help{font-size:.8rem;line-height:1.35}
 #ip-citizen .citizen-study>.iw-open{min-height:44px;padding:6px 10px}
 /* the 94 px card keeps its width and every part; only its picture is shorter */
 #ip-citizen .citizen-card-button .sgwc-art{height:50px;aspect-ratio:auto}
}
/* SE-height phones (up to 700 px): one more step for the longest pair while speaking (run 3: 98 px against the 120 px
   floor). Spacing only, plus a shorter card picture with the 94 px card and every part kept; the practice choices stay
   44 px tall, the card no taller than the two of them. */
@media(max-height:700px){
 #ip-citizen #citizen-title{line-height:1.08}
 #ip-citizen .citizen-jp{margin-top:2px}
 #ip-citizen .citizen-feedback:not(:empty){padding:4px 8px}
 #ip-citizen .citizen-practice{margin-top:4px;padding-top:4px}
 #ip-citizen .citizen-choose{line-height:1.3;margin-bottom:3px}
 #ip-citizen .citizen-modes button.citizen-mode{min-height:44px}
 #ip-citizen .citizen-card-button .sgwc-art{height:40px}
 #ip-citizen .citizen-card-button .sgwc-copy{padding:4px 6px 5px;min-height:40px}
 #ip-citizen .citizen-form,#ip-citizen .citizen-voice,#ip-citizen .citizen-finish{margin-top:5px;gap:4px}
 #ip-citizen .citizen-voice-help{line-height:1.3}
}

/* MOOD BUBBLE (approved concept, 6 Oct 2026): a decorative overlay above each walking citizen, placed by island-page.js
   from citizenScreen(). Never a selection or focus cue, never interactive. Static under reduced motion. */
.citizen-mood-layer{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden;contain:strict}
.citizen-mood{position:absolute;left:0;top:0;will-change:transform;--mood-s:1}
.citizen-mood[hidden]{display:none}
/* every length is the 46 px design size times --mood-s, set per citizen from its on-screen height (island-page.js) */
.citizen-mood-bubble{position:absolute;left:0;bottom:calc(12px * var(--mood-s));transform:translateX(-50%);
  width:calc(46px * var(--mood-s));height:calc(36px * var(--mood-s));box-sizing:border-box;
  border:max(1.5px, calc(3px * var(--mood-s))) solid #fff;border-radius:calc(14px * var(--mood-s));
  background:linear-gradient(180deg,#efe6ff 0%,#d5c2f7 100%);
  box-shadow:0 0 0 1px rgba(124,92,190,.18),0 0 calc(10px * var(--mood-s)) rgba(255,255,255,.85),0 calc(3px * var(--mood-s)) calc(8px * var(--mood-s)) rgba(70,50,120,.18);
  animation:citizen-mood-float 3.2s ease-in-out infinite}
.citizen-mood-bubble::after{content:"";position:absolute;left:50%;bottom:calc(-8px * var(--mood-s));width:calc(10px * var(--mood-s));height:calc(10px * var(--mood-s));
  margin-left:calc(-5px * var(--mood-s));background:#d5c2f7;border-right:max(1.5px, calc(3px * var(--mood-s))) solid #fff;
  border-bottom:max(1.5px, calc(3px * var(--mood-s))) solid #fff;transform:rotate(45deg);border-bottom-right-radius:calc(3px * var(--mood-s))}
.citizen-mood-bubble svg{position:relative;z-index:1;display:block;width:100%;height:100%;fill:#5b3f96;stroke:#5b3f96;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.citizen-mood-bubble svg path{fill:none}
.citizen-mood-bubble svg circle{stroke:none}
@keyframes citizen-mood-float{0%,100%{translate:0 0}50%{translate:0 calc(-3px * var(--mood-s))}}
.citizen-mood.is-still .citizen-mood-bubble{animation:none}
@media (prefers-reduced-motion:reduce){.citizen-mood-bubble{animation:none}}