/* Newton Five — the board surface (five.css). Depends on games.css (tokens,
   tile system). Namespace: .ntc-five. Board: 5-column grid capped at 480px;
   keyboard rows are 10 / 9 / Enter+7+Backspace, sized to shrink, not overflow. */

.ntc-five{padding:clamp(20px,3.4vw,40px);border:1px solid var(--ntcg-line);border-radius:var(--ntcg-radius);background:rgba(255,255,255,.94);box-shadow:var(--ntcg-shadow)}
.ntc-five--unavailable{background:var(--ntcg-paper)}

/* --- Header, meta, timer ---------------------------------------------- */
.ntc-five__header{margin:0 0 22px;text-align:center}
.ntc-five__title{margin:0;color:var(--ntcg-navy);font-family:var(--ntcg-display);font-size:clamp(1.7rem,4vw,2.4rem);font-weight:400;line-height:1.15;letter-spacing:-.02em}
.ntc-five__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 0;color:var(--ntcg-muted);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ntc-five__number{color:var(--ntcg-navy)}
.ntc-five__meta-sep{color:var(--ntcg-gold)}
.ntc-five__timer-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:12px 0 0}
.ntc-five__timer{color:var(--ntcg-navy);font-family:var(--ntcg-mono);font-size:.95rem;font-variant-numeric:tabular-nums}
.ntc-five__timer-toggle,.ntc-five__pill,.ntc-five__button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ntcg-target);border-radius:999px;font:inherit;font-weight:700;cursor:pointer;transition:background-color 200ms var(--ntcg-ease),border-color 200ms var(--ntcg-ease)}
.ntc-five__timer-toggle{padding:8px 16px;border:1px solid var(--ntcg-line);background:var(--ntcg-paper);color:var(--ntcg-muted);font-size:.78rem}
.ntc-five__timer-toggle:hover{background:var(--ntcg-cream);border-color:var(--ntcg-gold);color:var(--ntcg-navy)}
.ntc-five__timer-toggle[aria-pressed="true"]{border-color:var(--ntcg-navy);background:var(--ntcg-navy);color:#fff}

/* --- Status / message ------------------------------------------------- */
.ntc-five__message{max-width:36rem;margin:14px auto;padding:12px 16px;border:1px solid rgba(202,168,94,.5);border-left:5px solid var(--ntcg-gold);border-radius:12px;background:#fffaf0;color:var(--ntcg-navy);font-size:.95rem;font-weight:700;text-align:center}

/* --- Board: 5-column grid, capped at 480px ---------------------------- */
.ntc-five__board{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ntcg-gap);width:min(100%,var(--ntcg-board-max));margin:0 auto}
.ntc-five__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ntcg-gap)}
.ntc-five__board .ntc-five__tile{aspect-ratio:1/1;min-height:var(--ntcg-target);font-size:clamp(1.1rem,4.8vw,1.6rem)}
.ntc-five__tile.is-typing{border-color:rgba(21,38,58,.34)}
.ntc-five__tile.is-active{border-color:var(--ntcg-gold);background:#fffaf0;box-shadow:0 0 0 2px rgba(202,168,94,.3)}
.ntc-five__row.is-invalid{animation:ntcg-nudge 320ms var(--ntcg-ease)}
.ntc-five__row.is-invalid .ntc-five__tile{border-width:3px;border-color:var(--ntcg-gold-deep);background:#fff4e2}
.ntc-five[data-phase="loading"] .ntc-five__board{opacity:.5}
@keyframes ntcg-tile-in{from{transform:translate3d(0,4px,0) scale(.94);opacity:.5}to{transform:none;opacity:1}}
@keyframes ntcg-nudge{0%,100%{transform:none}25%{transform:translate3d(-4px,0,0)}75%{transform:translate3d(4px,0,0)}}
.ntc-five__tile--correct,.ntc-five__tile--present,.ntc-five__tile--absent{animation:ntcg-tile-in 260ms var(--ntcg-ease) both}

/* --- Keyboard: flex:1 1 0 + min-width:0 so keys shrink, never overflow -- */
.ntc-five__keyboard{display:flex;flex-direction:column;gap:var(--ntcg-gap);width:min(100%,var(--ntcg-board-max));margin:20px auto 0}
.ntc-five__keyrow{display:flex;gap:var(--ntcg-gap);margin:0}
.ntc-five__keyrow--middle{padding:0 3%}
.ntc-five__key{flex:1 1 0;min-width:0;min-height:var(--ntcg-target);height:var(--ntcg-key-h);padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--ntcg-line);border-radius:var(--ntcg-radius-key);background:var(--ntcg-paper);color:var(--ntcg-ink);font:inherit;font-size:.95rem;font-weight:700;line-height:1;text-transform:uppercase;cursor:pointer;transition:background-color 180ms var(--ntcg-ease),border-color 180ms var(--ntcg-ease),transform 120ms var(--ntcg-ease)}
.ntc-five__key:hover{background:#eef9fc;border-color:var(--ntcg-blue)}
.ntc-five__key:active{transform:translateY(1px)}
.ntc-five__key:disabled{background:var(--ntcg-paper);border-color:var(--ntcg-line);opacity:.55;cursor:default;transform:none}
.ntc-five__key--wide{flex:1.7 1 0;font-size:.78rem;letter-spacing:.02em}
.ntc-five__key--correct{background:var(--ntcg-navy);border-color:var(--ntcg-navy);color:#fff}
.ntc-five__key--present{background:var(--ntcg-gold);border-color:var(--ntcg-gold-deep);color:var(--ntcg-navy)}
.ntc-five__key--absent{background:var(--ntcg-cream);border-color:rgba(94,104,112,.4);color:var(--ntcg-muted)}

/* --- Actions ---------------------------------------------------------- */
.ntc-five__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 0}
.ntc-five__pill{padding:10px 20px;border:1px solid var(--ntcg-line);background:var(--ntcg-paper);color:var(--ntcg-navy);font-size:.88rem}
.ntc-five__pill:hover{border-color:var(--ntcg-blue);background:#eef9fc}
.ntc-five__pill--primary{border-color:var(--ntcg-navy);background:var(--ntcg-navy);color:#fff}
.ntc-five__pill--primary:hover{border-color:var(--ntcg-navy-soft);background:var(--ntcg-navy-soft);color:#fff}

/* --- Result sheet ----------------------------------------------------- */
.ntc-five__result{max-width:40rem;margin:26px auto 0;padding:clamp(18px,3vw,28px);border:1px solid var(--ntcg-line);border-radius:var(--ntcg-radius-sm);background:var(--ntcg-cream);text-align:center}
.ntc-five__result-title{margin:0 0 6px;color:var(--ntcg-navy);font-family:var(--ntcg-display);font-size:clamp(1.4rem,3.4vw,1.9rem);font-weight:400;line-height:1.2}
.ntc-five__result-line{margin:0 0 4px;color:var(--ntcg-navy);font-weight:700}
.ntc-five__result-time{margin:0 0 14px;color:var(--ntcg-muted);font-size:.88rem}
.ntc-five__insight{margin:0 0 6px;color:var(--ntcg-ink);font-size:.94rem}
.ntc-five__insight--speed{margin-bottom:0;color:var(--ntcg-muted);font-size:.88rem}
.ntc-five__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;margin:16px 0 0;text-align:center}
.ntc-five__stats>div{padding:12px 8px;border:1px solid var(--ntcg-line);border-radius:12px;background:var(--ntcg-paper)}
.ntc-five__stats dt{color:var(--ntcg-muted);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ntc-five__stats dd{margin:6px 0 0;color:var(--ntcg-navy);font-family:var(--ntcg-display);font-size:1.35rem;line-height:1}
.ntc-five__answer{margin:18px 0 0;padding:12px 16px;border-radius:12px;background:var(--ntcg-navy);color:#fff;font-size:.9rem}
.ntc-five__answer strong{color:#fff;font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase}
.ntc-five__ranking,.ntc-five__distribution{margin:20px 0 0;text-align:left}
.ntc-five__ranking-title{margin:0 0 10px;color:var(--ntcg-navy);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ntc-five__ranking-list,.ntc-five__dist{display:grid;gap:6px}
.ntc-five__ranking-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--ntcg-line);border-radius:10px;background:var(--ntcg-paper);font-size:.9rem;font-variant-numeric:tabular-nums}
.ntc-five__ranking-rank{flex:0 0 1.7rem;color:var(--ntcg-navy);font-weight:700}
.ntc-five__ranking-time{flex:1 1 auto;min-width:0;font-family:var(--ntcg-mono);font-size:.86rem}
.ntc-five__ranking-guesses{flex:0 0 auto;color:var(--ntcg-muted);font-size:.82rem}
.ntc-five__ranking-you{margin:10px 0 0;padding:10px 12px;border:1px solid var(--ntcg-gold-deep);border-radius:10px;background:#fff8e8;color:var(--ntcg-navy);font-size:.88rem;font-weight:700;text-align:center}
.ntc-five__warming{margin:10px 0 0;color:var(--ntcg-muted);font-size:.88rem;text-align:center}
.ntc-five__dist-row{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 2rem;align-items:center;gap:10px;font-size:.86rem;font-variant-numeric:tabular-nums}
.ntc-five__dist-label{color:var(--ntcg-navy);font-weight:700}
.ntc-five__dist-bar{height:10px;overflow:hidden;border-radius:999px;background:rgba(21,38,58,.09)}
.ntc-five__dist-fill{display:block;height:100%;border-radius:999px;background:var(--ntcg-navy)}
.ntc-five__dist-count{color:var(--ntcg-muted);text-align:right}
.ntc-five__share{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:18px 0 0}
.ntc-five__button{padding:11px 22px;border:1px solid var(--ntcg-navy);background:var(--ntcg-navy);color:#fff;font-size:.92rem}
.ntc-five__button:hover{border-color:var(--ntcg-navy-soft);background:var(--ntcg-navy-soft);color:#fff}
.ntc-five__share-state{color:var(--ntcg-muted);font-size:.86rem}
.ntc-five__related{margin:18px 0 0;text-align:left}
.ntc-five__related a{display:inline-flex;min-height:var(--ntcg-target);align-items:center;margin:0 8px 8px 0;padding:9px 16px;border:1px solid var(--ntcg-line);border-radius:999px;background:var(--ntcg-paper);color:var(--ntcg-navy);font-size:.88rem;font-weight:700;text-decoration:none}
.ntc-five__next{margin:16px 0 0;color:var(--ntcg-muted);font-size:.88rem}
.ntc-five__note{margin:14px 0 0;color:var(--ntcg-muted);font-size:.82rem;line-height:1.6}

/* --- Legend inside the help modal ------------------------------------- */
.ntc-five__legend{display:grid;gap:12px;margin:16px 0 0}
.ntc-five__legend li{display:flex;align-items:center;gap:12px;font-size:.94rem}
.ntc-five__legend .ntc-five__tile{flex:0 0 auto;width:2.4rem;height:2.4rem;min-height:0;font-size:.95rem}

/* --- Modals (board-only markup; games.css supplies the shared baseline) -- */
.ntc-modal[hidden]{display:none!important}
.ntc-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-start;justify-content:center;padding:clamp(20px,7vh,72px) 16px 20px;overflow-y:auto}
.ntc-modal__backdrop{position:fixed;inset:0;background:rgba(21,38,58,.42);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.ntc-modal__panel{position:relative;z-index:2;width:min(560px,100%);max-height:min(84vh,720px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ntcg-line);border-radius:var(--ntcg-radius);background:var(--ntcg-paper);box-shadow:var(--ntcg-shadow);transition:transform 320ms var(--ntcg-ease-soft),opacity 240ms var(--ntcg-ease)}
@starting-style{.ntc-modal:not([hidden]) .ntc-modal__panel{transform:translate3d(0,10px,0) scale(.99);opacity:0}}
.ntc-modal__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px 14px;border-bottom:1px solid var(--ntcg-line);background:var(--ntcg-paper)}
.ntc-modal__title{margin:0;color:var(--ntcg-navy);font-family:var(--ntcg-display);font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:400;line-height:1.2;letter-spacing:-.01em}
.ntc-modal__close{position:relative;flex:0 0 auto;width:var(--ntcg-target);height:var(--ntcg-target);padding:0;border:1px solid var(--ntcg-line);border-radius:999px;background:var(--ntcg-paper);cursor:pointer;transition:background-color 200ms var(--ntcg-ease),border-color 200ms var(--ntcg-ease)}
.ntc-modal__close::before,.ntc-modal__close::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;border-radius:2px;background:var(--ntcg-navy)}
.ntc-modal__close::before{transform:translate3d(-50%,-50%,0) rotate(45deg)}
.ntc-modal__close::after{transform:translate3d(-50%,-50%,0) rotate(-45deg)}
.ntc-modal__close:hover{background:var(--ntcg-cream);border-color:var(--ntcg-gold)}
.ntc-modal__body{overflow-y:auto;padding:20px}
.ntc-modal__body p{margin:0 0 12px;font-size:.97rem}

@media (forced-colors:active){
	.ntc-games .ntc-five__key--correct{border-style:solid;border-width:3px}
	.ntc-games .ntc-five__key--present{border-style:dashed;border-width:3px}
	.ntc-games .ntc-five__key--absent{border-style:dotted;border-width:1px}
	.ntc-five__dist-bar{border:1px solid CanvasText}
	.ntc-five__dist-fill{background:Highlight}
	.ntc-five__tile.is-active{border-color:CanvasText;outline:3px solid Highlight;outline-offset:0}
}

/* --- Responsive: 320 / 375 / 390 / 430 / 768 / desktop ---------------- */
@media (max-width:767px){
	.ntc-five{padding:clamp(16px,4vw,26px)}
	.ntc-five__message,.ntc-five__result{max-width:none}
	.ntc-modal{padding:14px 12px 12px}
	.ntc-modal__panel{max-height:calc(100vh - 26px);max-height:calc(100dvh - 26px)}
	.ntc-modal__body{padding:16px}
	.ntc-five__ranking-row{gap:8px}
}
@media (max-width:460px){
	.ntc-five__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ntc-five__key{font-size:.9rem}
	.ntc-five__key--wide{font-size:.95rem}
	.ntc-five__share{flex-direction:column}
	.ntc-five__share .ntc-five__button{width:100%}
	.ntc-modal__title{font-size:1.1rem}
}
@media (max-width:360px){
	.ntc-five{padding:8px}
	.ntc-five__key{font-size:.82rem}
	.ntc-five__key--wide{flex:1.5 1 0;font-size:.9rem}
	.ntc-five__ranking-row{font-size:.82rem;padding:7px 9px}
	.ntc-five__dist-row{font-size:.8rem}
}

/* =====================================================================
 * Compact play surface — final UI correction pass
 *
 * Everything here tightens the play column: a small utility row instead of a
 * scattered header, a quieter timer, tighter vertical rhythm, and the active
 * tile marked with gold rather than filled with it.
 * =================================================================== */

.ntc-five__header{gap:2px;margin:0}
.ntc-five__title{font-family:var(--ntcg-display);font-size:clamp(1.55rem,2.2vw,1.95rem);line-height:1.1;letter-spacing:0;margin:0;text-align:center}
.ntc-five__meta{margin:8px 0 0;font-family:var(--ntcg-body);font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ntcg-muted);text-align:center}
.ntc-five__meta-sep{margin:0 6px;opacity:.6}
.ntc-five__date{text-transform:none;letter-spacing:0;font-weight:600}

/* One quiet utility row: the clock and its one control, centred with the board. */
.ntc-five__timer-line{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 0;font-family:var(--ntcg-body);font-size:.8rem;color:var(--ntcg-muted)}
.ntc-five__timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:.95rem;color:var(--ntcg-ink);min-width:4.4em;text-align:right}
.ntc-five__timer-toggle{min-height:30px;padding:4px 10px;border-color:transparent;background:transparent;color:var(--ntcg-muted);font-size:.72rem;letter-spacing:.03em;text-decoration:underline;text-underline-offset:3px}
.ntc-five__timer-toggle:hover,.ntc-five__timer-toggle:focus-visible{border-color:var(--ntcg-line);background:var(--ntcg-paper);color:var(--ntcg-ink);text-decoration:none}

/* Blank and active tiles: quiet edges, gold reserved for the live cell. */
.ntc-five__board .ntc-five__tile{background:var(--ntcg-paper);color:var(--ntcg-ink);border:1px solid var(--ntcg-tile-line);border-radius:var(--ntcg-radius-key);font-family:var(--ntcg-body);font-weight:700}
.ntc-five__board .ntc-five__tile.is-active{border:2px solid var(--ntcg-gold);background:var(--ntcg-paper);box-shadow:0 0 0 3px rgba(202,168,94,.16)}
.ntc-five__board .ntc-five__tile--correct{background:var(--ntcg-navy);border-color:var(--ntcg-navy);color:#fff}
.ntc-five__board .ntc-five__tile--present{background:var(--ntcg-gold);border-color:var(--ntcg-gold-deep);color:var(--ntcg-navy)}
.ntc-five__board .ntc-five__tile--absent{background:var(--ntcg-cream);border-color:rgba(94,104,112,.32);color:var(--ntcg-muted)}

/* Controls: one quiet row under the keyboard. */
.ntc-five__actions{gap:8px;justify-content:center}
.ntc-five__pill{min-height:36px;padding:6px 16px;font-size:.82rem;font-family:var(--ntcg-body);letter-spacing:.01em}
.ntc-five__pill--primary{background:var(--ntcg-navy);border-color:var(--ntcg-navy);color:#fff}

/* Result screen stays shorter than the game it reports on. */
.ntc-five__result{margin-top:18px;padding:18px 0 0;border-top:1px solid var(--ntcg-line);background:transparent}
.ntc-five__result-title{font-family:var(--ntcg-display);font-size:1.35rem;margin:0}
.ntc-five__result-line,.ntc-five__result-time{margin:4px 0 0;font-family:var(--ntcg-body);font-size:.9rem;color:var(--ntcg-muted)}
.ntc-five__result-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ntcg-ink)}
.ntc-five__stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0 0;padding:0;border-top:1px solid var(--ntcg-line);border-bottom:1px solid var(--ntcg-line);padding-block:12px}
.ntc-five__stats dt{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ntcg-muted);font-family:var(--ntcg-body)}
.ntc-five__stats dd{margin:2px 0 0;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.ntc-five__answer{margin:14px 0 0;padding:10px 14px;border-radius:10px;background:var(--ntcg-navy);color:#fff;font-size:.82rem;display:flex;gap:8px;align-items:baseline;justify-content:center}
.ntc-five__answer strong{font-size:1.05rem;letter-spacing:.12em}

/* FASTEST TODAY reads like a newspaper table, not a leaderboard of cards. */
.ntc-five__ranking{margin-top:18px}
.ntc-five__ranking-title{font-family:var(--ntcg-body);font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ntcg-muted);margin:0 0 10px}
.ntc-five__ranking-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ntcg-line)}
.ntc-five__ranking-row{display:grid;grid-template-columns:2.4rem 1fr auto;gap:10px;align-items:baseline;padding:7px 2px;border-bottom:1px solid var(--ntcg-line);font-family:var(--ntcg-body);font-size:.86rem}
.ntc-five__ranking-row--you{border-left:2px solid var(--ntcg-gold);padding-left:8px;font-weight:700}
.ntc-five__ranking-rank{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ntcg-muted)}
.ntc-five__ranking-row--you .ntc-five__ranking-rank{color:var(--ntcg-navy)}
.ntc-five__ranking-time{font-variant-numeric:tabular-nums;font-weight:700}
.ntc-five__ranking-guesses{color:var(--ntcg-muted);font-size:.78rem;text-align:right;white-space:nowrap}
.ntc-five__ranking-you{margin:8px 0 0;padding:6px 8px;border-left:2px solid var(--ntcg-gold);font-family:var(--ntcg-body);font-size:.86rem}
.ntc-five__warming{margin:8px 0 0;font-size:.8rem;color:var(--ntcg-muted)}
.ntc-five__dist{margin:8px 0 0;padding:0;list-style:none;border-top:1px solid var(--ntcg-line)}
.ntc-five__dist-row{display:grid;grid-template-columns:1.6rem 1fr 2.4rem;gap:8px;align-items:center;padding:4px 0;font-family:var(--ntcg-body);font-size:.8rem}
.ntc-five__dist-count{text-align:right;font-variant-numeric:tabular-nums;color:var(--ntcg-muted)}
.ntc-five__share{margin:18px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.ntc-five__button{padding:10px 22px;font-size:.88rem;letter-spacing:.01em}
.ntc-five__share-state{font-size:.78rem;color:var(--ntcg-muted);text-align:center}
.ntc-five__related{margin-top:16px;padding-top:14px;border-top:1px solid var(--ntcg-line)}
.ntc-five__next{margin:16px 0 0;text-align:center;font-size:.82rem;color:var(--ntcg-muted)}

/* The help dialog inherits the light editorial surface. */
.ntc-modal__panel{background:var(--ntcg-paper);border:1px solid var(--ntcg-line);border-radius:14px;box-shadow:0 10px 40px rgba(21,38,58,.12);max-width:min(520px,100%)}
.ntc-modal__head{padding:18px 20px 12px;border-bottom:1px solid var(--ntcg-line)}
.ntc-modal__title{font-family:var(--ntcg-display);font-size:1.25rem}
.ntc-modal__body{padding:16px 20px 20px;font-family:var(--ntcg-body);font-size:.92rem;line-height:1.55}
.ntc-five__legend{list-style:none;margin:14px 0;padding:0;display:grid;gap:10px}
.ntc-five__legend li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;font-size:.86rem;color:var(--ntcg-muted)}
.ntc-five__legend .ntc-five__tile{width:34px;height:34px;font-size:.78rem}

@media (max-width:460px){
	.ntc-five__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
	.ntc-five__title{font-size:1.5rem}
	.ntc-five__timer-line{margin-top:10px;gap:10px}
	.ntc-five__ranking-row{grid-template-columns:2rem 1fr auto;font-size:.82rem}
}

/* ---------------------------------------------------------------------
 * Play surface sizing — must live in this file: five.css loads after
 * games.css, so an equal-specificity rule for .ntc-five, .ntc-five__board,
 * .ntc-five__row or .ntc-five__keyboard declared in games.css loses here.
 * ------------------------------------------------------------------- */

.ntc-five{max-width:var(--ntcg-shell-max);margin-inline:auto;padding:20px 24px;border:1px solid var(--ntcg-line);border-radius:var(--ntcg-radius);background:var(--ntcg-paper);box-shadow:var(--ntcg-shadow)}
.ntc-five__board{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ntcg-gap);width:fit-content;max-width:100%;margin:16px auto 0;justify-items:center}
.ntc-five__row{display:grid;grid-template-columns:repeat(5,var(--ntcg-tile));gap:var(--ntcg-gap);justify-content:center}
.ntc-five__board .ntc-five__tile{width:var(--ntcg-tile);height:var(--ntcg-tile);border:1.5px solid var(--ntcg-tile-line);background:var(--ntcg-paper)}
.ntc-five__keyboard{width:min(100%,var(--ntcg-keyboard-max));margin:18px auto 0}
.ntc-five__actions{margin-top:12px}

@media (max-width:460px){
	.ntc-five{padding:16px 14px}
	.ntc-five__board{margin-top:12px}
	.ntc-five__keyboard{margin-top:12px}
}
@media (max-width:360px){
	.ntc-five{padding:14px 12px}
}

/* =====================================================================
 * Tile states and the result block — final pass
 *
 * Cascade order is load-bearing here. The sizing rule below also sets a
 * background, and it is declared after the state rules it would otherwise
 * erase: a correct tile once rendered white text on a white tile. Geometry is
 * therefore declared once, first, and every state follows it.
 *
 * The state cue is the border style (solid / dashed / dotted) plus the fill, so
 * a reader who cannot separate navy from gold still has a shape to read. The
 * corner glyphs that used to carry that duty read as specks at tile size and are
 * switched off in games.css.
 * =================================================================== */

.ntc-five__board .ntc-five__tile{width:var(--ntcg-tile);height:var(--ntcg-tile);border:1.5px solid var(--ntcg-tile-line);background:var(--ntcg-paper);color:var(--ntcg-ink)}
.ntc-five__board .ntc-five__tile.is-active{border:2px solid var(--ntcg-gold);background:var(--ntcg-paper);box-shadow:0 0 0 3px rgba(202,168,94,.16)}
.ntc-five__board .ntc-five__tile--correct{background:var(--ntcg-navy);border-color:var(--ntcg-navy);border-style:solid;color:#fff}
.ntc-five__board .ntc-five__tile--present{background:var(--ntcg-gold);border-color:var(--ntcg-gold-deep);border-style:dashed;color:var(--ntcg-navy)}
.ntc-five__board .ntc-five__tile--absent{background:var(--ntcg-cream);border-color:rgba(94,104,112,.45);border-style:dotted;color:#3d4750}

/* The key row carries the same three states, with the same border treatment. */
/* Prefixed: an unprefixed rule loses to the theme/Elementor typography that sets
   a dark body colour on buttons, which left navy keys with near-black letters. */
.ntc-games-page .ntc-five__key--correct{background:var(--ntcg-navy);border-color:var(--ntcg-navy);border-style:solid;color:#fff}
.ntc-games-page .ntc-five__key--present{background:var(--ntcg-gold);border-color:var(--ntcg-gold-deep);border-style:dashed;color:var(--ntcg-navy)}
.ntc-games-page .ntc-five__key--absent{background:var(--ntcg-cream);border-color:rgba(94,104,112,.45);border-style:dotted;color:#3d4750}

/* Text on the navy surfaces. Elementor's generated per-element typography loads
   after this file and sets the theme's dark body colour on these descendants,
   which measured 1.19:1 on the answer strip and the share button. */
.ntc-games-page .ntc-five .ntc-five__answer,
.ntc-games-page .ntc-five .ntc-five__answer span{color:rgba(255,255,255,.92)}
.ntc-games-page .ntc-five .ntc-five__answer strong{color:#fff}
.ntc-games-page .ntc-five__button,
.ntc-games-page .ntc-five__pill--primary{background:var(--ntcg-navy);border-color:var(--ntcg-navy);color:#fff}
.ntc-games-page .ntc-five__button:hover,
.ntc-games-page .ntc-five__pill--primary:hover{background:var(--ntcg-navy-soft);border-color:var(--ntcg-navy-soft);color:#fff}

/* Fastest today: flat rows under thin rules. The earlier override changed the
   display but never cleared the card the first pass had drawn. */
.ntc-five__ranking-row{display:grid;grid-template-columns:2rem 6rem 1fr;gap:10px;align-items:baseline;padding:7px 2px;border:0;border-bottom:1px solid var(--ntcg-line);border-radius:0;background:transparent}
.ntc-five__ranking-row:last-child{border-bottom:0}
.ntc-five__ranking-time{text-align:left}
.ntc-five__ranking-guesses{text-align:right}

/* The result block owns the primary action once the run is over; the control row
   above the results repeats it. */
.ntc-five[data-phase="lost"] .ntc-five__actions .ntc-five__pill--primary,
.ntc-five[data-phase="won"] .ntc-five__actions .ntc-five__pill--primary{display:none}

/* =====================================================================
 * Narrow widths
 *
 * Two measured problems at 320 and 360 px: the page gained 7 px of horizontal
 * overflow, and the ten-key row could not shrink below its own padding, which
 * left every key at 23-24 px. The board becomes fractional (so it can never be
 * wider than its column), the key gaps tighten, and the card reclaims padding.
 * =================================================================== */

@media (max-width:460px){
	.ntc-games{--ntcg-gap:3px}
	.ntc-five__key{padding:0 3px}
}

@media (max-width:400px){
	.ntc-five{padding:12px 10px}
	.ntc-five__board{width:100%}
	.ntc-five__row{grid-template-columns:repeat(5,minmax(0,1fr))}
	.ntc-five__board .ntc-five__tile{width:auto;height:auto;aspect-ratio:1/1}
}

/* At narrow widths the game sat 29 px from the left inside a 320 px viewport and
   pushed past the right edge: a wrapper in the theme/Elementor chain carries
   horizontal padding that the compact card, which is nearly as wide as the
   column, cannot absorb. The chain is neutralised here so the column width is
   the game's width, which also gives every key room. */
@media (max-width:460px){
	/* Deliberate override. This container carries 18px of side padding from the
	   page builder's per-template CSS; it is not an inline value and no selector in
	   this file outranks it, and at 320px those 36px are the difference between
	   21px keys and keys above the 24px minimum. Scoped to the game pages and to
	   narrow widths only. */
	.ntc-games-page .elementor-widget-theme-post-content > .elementor-widget-container,
	.ntc-games-page .newton-page-content-shell > .elementor-widget-container{padding-left:0!important;padding-right:0!important}
	.ntc-games-page .ntc-games,
	.ntc-games-page .ntc-games-lobby,
	.ntc-games-page .ntc-five{max-width:100%;margin-left:0;margin-right:0}
	.ntc-games-page .ntc-five{padding-left:10px;padding-right:10px}
}

/* At 320px the ENTER label was wider than its key and crowded the Z key. */
@media (max-width:400px){
	.ntc-five__key--wide{font-size:.62rem;letter-spacing:0;padding:0 2px}
}

/* The wide keys' label size, matched two classes deep: the theme's button
   typography (which loads after this file, at higher specificity) was setting the
   label size, so the earlier single-class rules never applied and ENTER overflowed
   its key at 320px. */
.ntc-games-page .ntc-five__keyboard .ntc-five__key--wide{font-size:.95rem;letter-spacing:0}
@media (max-width:400px){
	.ntc-games-page .ntc-five__keyboard .ntc-five__key--wide{font-size:.62rem;padding:0 2px}
}

/* The practice control sits in the control row beside Help and Stats. */
.ntc-games-page .ntc-five__actions .ntc-five__pill--practice{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 16px;border:1px solid var(--ntcg-line);border-radius:var(--ntcg-radius-key);background:var(--ntcg-paper);color:var(--ntcg-navy);font-family:var(--ntcg-body);font-size:.82rem;text-decoration:none}
.ntc-games-page .ntc-five__actions .ntc-five__pill--practice:hover,
.ntc-games-page .ntc-five__actions .ntc-five__pill--practice:focus-visible{background:var(--ntcg-cream);border-color:var(--ntcg-gold);color:var(--ntcg-navy)}

/* ---- Editorial discovery: Explore Newton --------------------------------
   The theme injects its card overlay link (class cs-overlay-link) into any
   post-card markup, and the site's global link styling then lands on it: a white
   pill, border-radius 999px, painted across the whole card. Inside the theme's own
   wrapper that overlay is invisible, so this section has to pin it back itself —
   the section is styled here because it previously had no plugin CSS at all.
   Values come from the site's own scoped palette: navy #15263a, gold #caa85e,
   cream #f7f3ea. */
.ntc-explore .cs-overlay-link,
.ntc-explore .cs-overlay-link:hover,
.ntc-explore .cs-overlay-link:focus {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Do not touch .cs-overlay-background or its pseudo-elements: that element holds
   the featured image and its dark scrim, and hiding it takes the photo with it. */

/* Card links are text, not the site's white pill buttons. */
.ntc-explore a,
.ntc-explore a.entry-more,
.ntc-explore a.url.fn.n {
	display: inline;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	color: #15263a;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(202, 168, 94, 0.75);
	text-underline-offset: 3px;
}

.ntc-explore a:hover,
.ntc-explore a:focus {
	color: #15263a;
	text-decoration-color: #caa85e;
}

.ntc-explore .ntc-explore__card {
	position: relative;
	border: 1px solid rgba(21, 38, 58, 0.12);
	border-left: 3px solid #caa85e;
	border-radius: 10px;
	background: #f7f3ea;
	padding: 16px 18px;
}

/* The category chip over the thumbnail. The theme renders it as a plain anchor with
   white text on a white background, so on its own it reads as a blank white blob
   instead of a label. Give it the site's own palette: cream chip, navy text. */
.ntc-explore .entry-thumbnail a:not(.cs-overlay-link) {
	background: #f7f3ea;
	color: #15263a;
	border: 0;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(21, 38, 58, 0.25);
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	padding: 5px 10px;
	text-decoration: none;
	text-transform: uppercase;
}

.ntc-explore .entry-thumbnail a:not(.cs-overlay-link):hover,
.ntc-explore .entry-thumbnail a:not(.cs-overlay-link):focus {
	background: #caa85e;
	color: #15263a;
}

/* Let the photograph define the height of its own box. The theme reserves a fixed
   landscape ratio, which leaves a dead cream band under the image here. */
.ntc-explore .entry-thumbnail .cs-overlay,
.ntc-explore .entry-thumbnail .cs-overlay-background {
	position: relative;
	padding-top: 0;
	height: auto;
}

.ntc-explore .entry-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
}