/* Pulsified Play (alpha): additions shared by the hub and every game page.
   Builds on /play/calculator/calculator.css (the approved PM-001 paper-and-calculator look)
   and only uses its tokens: --ink, --muted, --paper, --coral, --desk.
   New text here uses --muted-strong (AA on the desk and paper) and an 11px floor. */
:root{--muted-strong:#4a554d}

select:focus-visible,summary:focus-visible,.hub-card a:focus-visible{outline:3px solid #b84b32;outline-offset:3px}
.settings:disabled{opacity:.6}
.board-link{display:inline-block;margin-top:14px;font:11px monospace;letter-spacing:1px;color:var(--ink)}
.board-link:hover{color:var(--coral)}
.footer .home-link + .home-link{margin-left:0}

/* Mode banner: featured run or versus turn */
.mode-banner{margin:0 0 16px;padding:9px 12px;border:1px dashed #273d3b55;border-radius:5px;font:11px/1.7 monospace;letter-spacing:1px;text-align:center;background:#fffdf170}
.mode-banner[hidden]{display:none}
.mode-banner b{color:#9b4a36}
.mode-banner a{color:var(--ink)}

/* Versus card: reuses the game-over paper */
.versus-card{inset:40px -5px auto}
.versus-card[hidden]{display:none}
.versus-card h2{font:30px Georgia,serif;margin:12px 0 10px}
.versus-card .vs-name{text-align:left;margin-top:14px}
.versus-card .vs-name input{max-width:none}
.versus-score{font-size:52px}
.restart.secondary{background:transparent;color:var(--ink);border:1px solid #273d3b70;margin-top:10px}

/* Bonus question: a slip of paper in a modal dialog */
dialog.bonus{border:1px solid #c8bba1;background:var(--paper);color:var(--ink);border-radius:3px;padding:26px 24px;width:min(360px,calc(100vw - 32px));box-shadow:0 18px 70px #152e3890;text-align:center;transform:rotate(-1deg)}
dialog.bonus::backdrop{background:#273d3b80}
dialog.bonus h2{font:24px/1.25 Georgia,serif;margin:12px 0 8px}
.bonus-detail{font:12px/1.8 monospace;color:#4f5a52;margin:0 0 14px}
.bonus-form{display:grid;grid-template-columns:1fr;gap:0}
.bonus-form[hidden]{display:none}
.bonus-label{font:11px monospace;letter-spacing:2px;color:var(--muted-strong);text-align:left}
#bonus-answer{font:30px 'Courier New',monospace;text-align:center;padding:8px;margin-top:6px;border:0;border-bottom:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:0;width:100%}
.bonus-status{min-height:18px;font:12px/1.7 monospace;color:#9b4a36;margin:12px 0 0}
.bonus-status.good{color:#3d5a3f}
dialog.bonus .restart[hidden]{display:none}

/* Answer screens for the new games */
.answer.time-entry{font-size:34px}
.key.equal.wide{grid-column:span 3}
.key.ampm{font-size:15px}
.key.ampm[aria-pressed=true]{background:#d87151;color:#fff8e8;box-shadow:0 4px 0 #a54f38}
.weekday-keys{display:grid;grid-template-columns:repeat(12,1fr);gap:11px}
.weekday-keys .key{grid-column:span 3;font-size:15px;letter-spacing:1px;min-height:54px}
.weekday-keys .key:nth-child(n+5){grid-column:span 4}
.weekday-keys .key small{display:block;font:11px monospace;color:#7d8576;letter-spacing:0;margin-top:3px}

/* Time Zone paper */
.tz-q{font-family:'Bradley Hand','Segoe Print',Georgia,serif;font-style:italic;color:#304b62;text-align:center}
.tz-q .tz-small{display:block;font:11px monospace;font-style:normal;letter-spacing:2px;color:#777d70;margin:6px 0 2px}
.tz-q .tz-time{display:block;font-size:34px;line-height:1.15}
.tz-q .tz-place{display:block;font-size:27px;line-height:1.2;overflow-wrap:anywhere}
.tz-q .tz-region{display:block;font:11px monospace;font-style:normal;letter-spacing:1px;color:#68726a;margin-top:2px}
.tz-q .tz-day{display:inline-block;margin-top:9px;padding:3px 8px;border:1px solid #bd583e80;border-radius:3px;font:11px monospace;font-style:normal;letter-spacing:1px;color:#9b4a36}
.question.tz-q,.question.wd-q{font-size:inherit;margin:16px 0 10px}
.wd-q .wd-date{display:block;font-size:35px;line-height:1.25}
.wd-q .wd-note{display:block;font:11px monospace;font-style:normal;letter-spacing:1px;color:#9b4a36;margin-top:8px}
.difficulty-help{font:11px/1.7 monospace;color:var(--muted-strong);margin:8px 0 0}

/* ---------- Hub ---------- */
.hub main{display:block;max-width:1060px;margin:34px auto 30px;padding:0 24px}
.hub-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:end;padding-bottom:30px;border-bottom:1px solid #273d3b24}
.hub-intro h1{margin:14px 0 0}
.hub-intro p{font-size:14px;line-height:1.8;color:var(--muted-strong);margin:0;max-width:360px}
.hub h2.section{font:22px Georgia,serif;margin:38px 0 6px}
.hub .section-note{font:11px/1.7 monospace;letter-spacing:.5px;color:var(--muted-strong);margin:0 0 18px}
.hub-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:0}
.hub-card{position:relative;background:var(--paper);padding:22px 20px 20px;box-shadow:1px 5px 9px #4943331b;border-bottom:1px solid #c6bca6;background-image:repeating-linear-gradient(transparent 0,transparent 27px,#7c9aaa24 28px,#7c9aaa24 29px);background-position:0 18px;display:flex;flex-direction:column}
.hub-card:nth-child(1){transform:rotate(-1deg)}.hub-card:nth-child(2){transform:rotate(.8deg)}.hub-card:nth-child(3){transform:rotate(-.6deg)}
.hub-card:before{content:'';position:absolute;width:64px;height:18px;background:#d2c8ab99;top:-8px;left:calc(50% - 32px);transform:rotate(3deg)}
.hub-card .code{font:11px monospace;letter-spacing:2px;color:#5b6359}
.hub-card h3{font:italic 29px/1.15 'Bradley Hand','Segoe Print',Georgia,serif;color:#304b62;margin:12px 0 8px}
.hub-card p{font-size:13px;line-height:1.7;color:#4f5a52;margin:0 0 16px;flex:1}
.hub-actions{display:flex;flex-wrap:wrap;gap:10px}
.hub-actions a,.hub-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:5px;font:12px monospace;letter-spacing:.5px;text-decoration:none;color:#fffdf1;background:var(--ink);border:0;cursor:pointer}
.hub-actions a.ghost{background:transparent;color:var(--ink);border:1px solid #273d3b70}
.featured{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;background:#344b48;color:#e9ecdf;border-radius:16px 16px 25px 25px;padding:26px 24px;box-shadow:0 8px 0 #213632,7px 23px 32px #383f332b}
.featured .eyebrow{color:#f1a58f}
.featured h3{font:28px/1.2 Georgia,serif;margin:12px 0 8px;color:#fffdf1}
.featured p{font:11px/1.8 monospace;color:#cfd8cb;margin:0 0 16px}
.featured .hub-actions a{background:#b84b32;color:#fffdf1}
.featured-board{background:#bfccb0;border:5px solid #263d37;border-radius:7px;padding:12px 14px;color:#2f4232}
.featured-board h4{font:11px monospace;letter-spacing:2px;margin:0 0 6px;color:#3f4c37}
.featured-board ol,.board-list{list-style:none;padding:0;margin:0;counter-reset:rank}
.featured-board li,.board-list li{counter-increment:rank;display:flex;gap:10px;align-items:baseline;border-bottom:1px solid #273d3b1f;padding:9px 0;font:11px monospace}
.featured-board li:before,.board-list li:before{content:counter(rank,decimal-leading-zero);color:#6f7a68}
.featured-board li span,.board-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-board li strong,.board-list li strong{color:#9b4a36}
.board-list li small{display:block;color:var(--muted-strong);font:11px monospace;margin-top:4px;white-space:normal}
.featured-board .empty-note{font:italic 13px Georgia,serif;margin:8px 0;color:#2f4232}
.boards{display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;align-items:start}
.filters{display:grid;gap:12px;margin:0;padding:0;border:0}
.filters label{display:block;font:11px monospace;letter-spacing:1px}
.filters select{display:block;width:100%;padding:10px 7px;margin-top:6px;border:1px solid #273d3b50;border-radius:5px;background:var(--paper);color:var(--ink);font:12px monospace}
.filters select:disabled{opacity:.5}
.board-paper{background:var(--paper);padding:18px 20px;box-shadow:1px 5px 9px #4943331b;border-bottom:1px solid #c6bca6;min-width:0}
.board-paper .empty{margin-top:6px}
.board-summary{font:11px monospace;letter-spacing:.5px;color:var(--muted-strong);margin:0 0 8px}
.versus-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}
.versus-list a{display:block;padding:14px;border:1px solid #273d3b40;border-radius:5px;color:var(--ink);text-decoration:none;font:12px monospace;background:#fffdf170;min-height:44px}
.versus-list a:hover{border-color:var(--coral)}
.versus-list small{display:block;color:var(--muted-strong);margin-top:4px;font-size:11px}
.suggest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:30px;align-items:start}
.suggest form{display:grid;gap:12px}
.suggest label{display:block;font:11px monospace;letter-spacing:1px}
.suggest input,.suggest textarea,.suggest select{display:block;width:100%;margin-top:6px;padding:10px 8px;border:1px solid #273d3b50;border-radius:5px;background:var(--paper);color:var(--ink);font:13px monospace}
.suggest textarea{min-height:84px;resize:vertical}
.suggest .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.suggest .form-status{font:11px/1.7 monospace;color:#9b4a36;min-height:18px;margin:0}
.suggest .form-status.good{color:#3d5a3f}
.suggest p{font-size:13px;line-height:1.75;color:#4f5a52;margin:0 0 10px}
.alpha-note{font:11px/1.8 monospace;color:var(--muted-strong);border-top:1px solid #273d3b24;margin-top:40px;padding-top:16px}

@media(max-width:900px){.hub-games{grid-template-columns:1fr 1fr}.featured,.boards,.suggest{grid-template-columns:1fr}.versus-list{grid-template-columns:1fr}}
@media(max-width:600px){.hub main{padding:0 16px;margin-top:22px}.hub-intro{grid-template-columns:1fr;gap:14px}.hub-intro h1{font-size:38px}.hub-games{grid-template-columns:1fr;gap:26px}.hub-card,.hub-card:nth-child(n){transform:none}.featured{padding:20px 16px}.board-paper{padding:14px 12px}.versus-card{inset:30px 0 auto}}

/* ---------- Brand pulse (one asset: /images/pulse-wave.svg) ---------- */
.brand .brand-pulse{display:inline-block;width:34px;height:17px;vertical-align:middle;margin:-2px 8px 0 0}

/* ---------- K–12 Calculator ----------
   Skins stay inside the Pulsified palette (cream, charcoal, coral, teal, stone) and the
   PM-001 shape; they mature from rounded, brighter early-grade shells to the dark PM-84. */
#question{white-space:pre-line}
#question.wordy{font-size:27px;line-height:1.3}
.calculator[data-grade]{background:var(--sk-shell);border-radius:var(--sk-radius);box-shadow:0 8px 0 var(--sk-edge),0 13px 0 #21363218,7px 23px 32px #383f332b;transition:background .35s,border-radius .35s}
.calculator[data-grade] .screen{background:var(--sk-screen);border-color:var(--sk-edge)}
.calculator[data-grade] .key{border-radius:var(--sk-key-radius)}
.calculator[data-grade] .key.utility{background:var(--sk-util);box-shadow:0 4px 0 var(--sk-util-edge);color:#fffbed}
.calculator[data-grade] .key.equal{background:var(--sk-eq);box-shadow:0 4px 0 var(--sk-eq-edge);color:#fff8e8}
.calculator[data-grade] .calc-top,.calculator[data-grade] .calc-bottom{color:var(--sk-label)}
.calculator[data-grade]{--sk-shell:#344b48;--sk-edge:#213632;--sk-screen:#bfccb0;--sk-util:#768980;--sk-util-edge:#52685e;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:16px 16px 25px 25px;--sk-key-radius:7px;--sk-label:#d4d9cb}
.calculator[data-grade="k"]{--sk-shell:#467A78;--sk-edge:#2f5654;--sk-screen:#eef0cf;--sk-util:#d87151;--sk-util-edge:#a54f38;--sk-eq:#bd583e;--sk-eq-edge:#8f3f2c;--sk-radius:30px 30px 38px 38px;--sk-key-radius:16px;--sk-label:#e8efe6}
.calculator[data-grade="1"]{--sk-shell:#4f827f;--sk-edge:#335c5a;--sk-screen:#e9eecb;--sk-util:#bd583e;--sk-util-edge:#8f3f2c;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:28px 28px 34px 34px;--sk-key-radius:14px;--sk-label:#e3ece4}
.calculator[data-grade="2"]{--sk-shell:#5a8a7f;--sk-edge:#3d6259;--sk-screen:#e3eac6;--sk-util:#8a7f70;--sk-util-edge:#61584c;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:25px 25px 31px 31px;--sk-key-radius:12px;--sk-label:#e2ebe2}
.calculator[data-grade="3"]{--sk-shell:#7d7466;--sk-edge:#564f45;--sk-screen:#e2e5c2;--sk-util:#467A78;--sk-util-edge:#2f5654;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:22px 22px 29px 29px;--sk-key-radius:10px;--sk-label:#efe9de}
.calculator[data-grade="4"]{--sk-shell:#4f6b5e;--sk-edge:#34493f;--sk-screen:#d8e1bc;--sk-util:#8a7f70;--sk-util-edge:#61584c;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:20px 20px 27px 27px;--sk-key-radius:9px;--sk-label:#dbe3d6}
.calculator[data-grade="5"]{--sk-shell:#3f5f5d;--sk-edge:#28403e;--sk-screen:#cfdab5;--sk-util:#768980;--sk-util-edge:#52685e;--sk-eq:#bd583e;--sk-eq-edge:#8f3f2c;--sk-radius:18px 18px 26px 26px;--sk-key-radius:8px;--sk-label:#d6dfd3}
.calculator[data-grade="7"]{--sk-shell:#2f3d44;--sk-edge:#1d282d;--sk-screen:#bccbb0;--sk-util:#467A78;--sk-util-edge:#2f5654;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:15px 15px 23px 23px;--sk-key-radius:7px;--sk-label:#cfd6d2}
.calculator[data-grade="8"]{--sk-shell:#26302f;--sk-edge:#151b1a;--sk-screen:#c9d6c0;--sk-util:#467A78;--sk-util-edge:#2f5654;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:12px 12px 22px 22px;--sk-key-radius:6px;--sk-label:#c7d1cb}
.calculator[data-grade="9"]{--sk-shell:#2b3235;--sk-edge:#171c1e;--sk-screen:#c6d1bd;--sk-util:#5c6660;--sk-util-edge:#3a423e;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:11px 11px 20px 20px;--sk-key-radius:5px;--sk-label:#c9cfcc}
.calculator[data-grade="10"]{--sk-shell:#24403f;--sk-edge:#132625;--sk-screen:#c4d3bd;--sk-util:#3c6b69;--sk-util-edge:#244442;--sk-eq:#d87151;--sk-eq-edge:#a54f38;--sk-radius:10px 10px 18px 18px;--sk-key-radius:5px;--sk-label:#c3d3cf}
.calculator[data-grade="11"]{--sk-shell:#3a3330;--sk-edge:#211d1b;--sk-screen:#cbd2bd;--sk-util:#8a7f70;--sk-util-edge:#5c544a;--sk-eq:#F06B50;--sk-eq-edge:#b8432c;--sk-radius:9px 9px 16px 16px;--sk-key-radius:4px;--sk-label:#d6cec6}
.calculator[data-grade="12"]{--sk-shell:#202321;--sk-edge:#0d0f0e;--sk-screen:#bfcbb8;--sk-util:#3a4a47;--sk-util-edge:#1f2a28;--sk-eq:#F06B50;--sk-eq-edge:#b8432c;--sk-radius:8px 8px 14px 14px;--sk-key-radius:3px;--sk-label:#c2c8c4}

/* PM-84: graphing-calculator parody (original layout; no third-party marks) */
.calculator.pm84 .solar{width:62px;height:9px;border-width:1px;border-radius:5px;background:#ffffff14}
.calculator.pm84 .screen{min-height:118px;padding:9px 12px 12px;background-image:linear-gradient(#2a3b3015 1px,transparent 1px),linear-gradient(90deg,#2a3b3015 1px,transparent 1px);background-size:11px 11px;background-color:var(--sk-screen)}
.calculator.pm84 .answer{min-height:72px;padding-top:16px;font-size:30px;letter-spacing:1px;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
.calculator .answer.long{font-size:24px}
.keys.pm84-keys{grid-template-columns:repeat(4,1fr);gap:9px}
.keys.pm84-keys .key{min-height:44px;font-size:20px}
.keys.pm84-keys .key.fn{background:#d9d4c8;color:#26302f;box-shadow:0 4px 0 #a9a497;font:700 17px 'Courier New',monospace}
.keys.pm84-keys .key.fn.var{background:#eadfc6;font-style:italic;font-size:20px}
.keys.pm84-keys .key.op{background:var(--sk-util);color:#fffbed;box-shadow:0 4px 0 var(--sk-util-edge);font-size:21px}
.keys.pm84-keys .key.utility{font-size:12px;letter-spacing:1px}
.keys.pm84-keys .key.equal.wide{grid-column:span 3;font-size:14px;letter-spacing:3px}
.keys .key.dot{font-size:26px}
.keys:not(.pm84-keys) .key.equal{grid-column:auto} /* K–7 row: . 0 = */
.key:focus-visible{outline:3px solid #b84b32;outline-offset:3px}

/* The desk shifts with the grade band */
body[data-band="early"]{background-image:radial-gradient(ellipse at 30% 15%,#f8f2e3 0,transparent 65%)}
body[data-band="pm84"]{background-color:#e2ddd2;background-image:radial-gradient(ellipse at 30% 15%,#ece8de 0,transparent 65%)}

@media(max-width:600px){#question.wordy{font-size:23px}.keys.pm84-keys{gap:8px}.keys.pm84-keys .key{min-height:42px}.calculator.pm84 .answer{font-size:26px}}
@media(prefers-reduced-motion:reduce){.calculator[data-grade]{transition:none}}