body{background:radial-gradient(ellipse at 85% 0%,#f9e8d4,transparent 650px)}
.game-brand-mark{background:#fae6c7;color:#975819;font-weight:900;font-size:1.45rem}
.word-game{max-width:860px;margin:auto;padding:clamp(12px,3vw,28px)}
.word-game h2{text-align:center;font-size:clamp(1.05rem,3vw,1.45rem)}
.level-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:22px}
.level-picker button{display:grid;align-content:center;gap:5px;min-height:70px;min-width:0;padding:9px 4px;border:2px solid #e9e2d6;border-radius:13px;background:#fffcf6;color:#5e5142}
.level-picker strong{font-size:1rem}.level-picker small{font-size:.75rem;line-height:1.35;color:#786b59}
.level-picker button[aria-pressed=true]{border-color:#cb9656;background:#fff1dc;color:#814918}
.instructions{max-width:660px;margin:12px auto 20px;text-align:center;color:#657267;font-size:.9rem;line-height:1.6}.instructions p{margin:8px 0}
.game-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:440px;margin:16px auto;text-align:center}
.game-stats>div{display:grid;gap:3px;padding:8px;border-radius:12px;background:#f7f4ed}.game-stats strong{color:#89551f;font-size:clamp(1.3rem,4vw,1.7rem);font-variant-numeric:tabular-nums}.game-stats span{color:#6c6d5d;font-size:.75rem}
#timer[data-urgent=true]{color:#b13737}
.source-line{display:grid;grid-template-columns:minmax(0,auto) auto;align-items:center;justify-content:center;column-gap:14px;row-gap:4px;margin:18px 0}.source-line>div{display:contents;text-align:center}.source-label{font-size:.72rem;color:#716e5d;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
#source-word{font-size:clamp(1.45rem,5.6vw,2.3rem);letter-spacing:.06em;overflow-wrap:anywhere;line-height:1.4;color:#614527}
.speak{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:44px;min-height:44px;padding:8px;font-size:.8rem}.speak svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.word-board{max-width:670px;margin:auto;outline-offset:5px}
.letter-tiles{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px 0 20px;min-height:52px}
.letter-tile{display:grid;place-items:center;min-width:46px;width:clamp(46px,7vw,58px);min-height:52px;padding:4px;border:2px solid #dab88a;border-bottom-width:5px;border-radius:12px;background:#fff3dc;color:#654722;font-size:1.6rem;font-weight:850;line-height:1.2;touch-action:manipulation}
.letter-tile:hover:not(:disabled){background:#ffe5af;border-color:#a8793a}.letter-tile:active:not(:disabled){transform:translateY(2px)}.letter-tile:disabled{border-color:#e7e4dc;background:#f5f4ef;color:#a2a294;opacity:.65}
.draft-label{font-size:.78rem;font-weight:750;color:#657267;margin:5px 0;text-align:center}.draft-wrap{position:relative;display:grid;place-items:center;min-height:64px;padding:8px 12px;border:2px dashed #ccbfa8;border-radius:14px;background:#fffdf8;text-align:center}
#draft{max-width:100%;font-size:clamp(1.4rem,5.5vw,2rem);font-weight:850;letter-spacing:.08em;overflow-wrap:anywhere;color:#614527}#draft-placeholder{position:absolute;color:var(--filipika-muted,#59485a);font-size:.95rem;pointer-events:none}
.compose-actions{display:flex;align-items:stretch;gap:8px;margin:10px 0}.draft-actions{display:flex;justify-content:center;flex:none;gap:8px;margin:0}.draft-actions button{font-size:.9rem;padding:8px 12px;min-height:44px}.submit-word{display:block;flex:1;min-width:0;min-height:50px;font-size:1.05rem}.submit-word span{margin-left:8px;opacity:.7}
.message{min-height:2.9em;margin:14px 0;text-align:center;color:#637263;font-size:.9rem;line-height:1.45}
.message[data-tone=accepted],.message[data-tone=duplicate]{--feedback-ink:#245f36;--feedback-border:#6ba97c;--feedback-bg:#e8f5e9}
.message[data-tone=source],.message[data-tone=unknown],.message[data-tone=short]{--feedback-ink:#992e29;--feedback-border:#d46b63;--feedback-bg:#fff0ee}
.message[data-tone]:not([data-tone=""]){display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:6px 10px;border:2px solid var(--feedback-border);border-radius:12px;background:var(--feedback-bg);color:var(--feedback-ink);font-weight:750;text-align:left}
.message-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;font-size:26px;font-weight:900;line-height:1}#message-text{min-width:0}
.message-icon[hidden]{display:none}
.found-section{padding:14px;border:1px solid #e4e9df;border-radius:14px;background:#f7faf4}.found-section h3{margin:0 0 8px;font-size:.9rem;color:#4c6c4d}.found-section>p{font-size:.8rem;color:#6c7a6a;margin:0}.word-list{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}.word-list li{padding:6px 10px;border-radius:8px;background:#e3efde;color:#315b3a;font-size:.88rem;font-weight:750;overflow-wrap:anywhere;max-width:100%}
.summary{display:flex;align-items:flex-start;gap:12px;margin:16px 0 0;padding:16px;border-radius:14px;background:#edf6e8;color:#315d3d}.summary>span{font-size:2.2rem;line-height:1.2}.summary>div{min-width:0;flex:1}.summary h3{margin:0 0 6px;font-size:1.1rem}.summary p{font-size:.9rem;margin:6px 0}.summary details{margin-top:12px}.summary summary{min-height:44px;display:flex;align-items:center;font-size:.85rem;line-height:1.4}.summary summary::before{content:'＋';margin-right:8px}.summary details[open] summary::before{content:'−'}.summary .word-list{margin-top:6px}.summary .word-list li{background:#fff9eb;color:#765227}
.actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}#finish{flex:1;max-width:320px}#cancel{min-height:46px}
#save-status{text-align:center;min-height:1.3em;font-size:.8rem}#retry{display:block;margin:8px auto 0;min-height:44px}
button,select,input{min-height:44px}
@media(max-width:480px){.page{width:calc(100% - 20px)}.word-game{padding:12px}.level-picker{gap:5px}.level-picker small{font-size:.65rem}.level-picker strong{font-size:.9rem}.source-line{gap:8px}.speak span{display:none}.letter-tiles{gap:6px;margin-block:10px 14px}.letter-tile{min-width:44px;width:44px;min-height:48px;font-size:1.45rem}.source-label{font-size:.65rem}.draft-wrap{min-height:58px}.message{font-size:.82rem}.summary{padding:12px;gap:8px}.summary>span{font-size:1.6rem}.summary h3{font-size:1rem}.found-section{padding:11px}#finish{flex-basis:100%;max-width:none}.draft-actions{gap:6px}.draft-actions button{font-size:.75rem}.game-brand-copy strong{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Keep the introduction short; the full playing board appears after START. */
.page{padding-block:8px}.top{padding-block:6px 10px}
.word-game h2{margin:4px 0 10px}.level-picker{margin-bottom:12px}.level-picker button{min-height:56px}
.instructions{margin:8px auto 12px;font-size:.84rem;line-height:1.45;text-align:left}.instructions p{margin:7px 0}
.actions{margin-top:8px}#save-status:empty{display:none}footer{margin-top:10px;font-size:.7rem}
html[data-slova-phase=ready] .play-topline,html[data-slova-phase=ready] #word-board,html[data-slova-phase=ready] .found-section{display:none}
html[data-slova-phase=ready] .message{margin:6px 0;min-height:0;font-size:.78rem}
#found-words,#remaining-words{max-height:180px;overflow-y:auto;scrollbar-gutter:stable}
/* Align speech with the word itself; the caption has its own row. */
.source-label{grid-column:1;grid-row:1}
#source-word{grid-column:1;grid-row:2;min-width:0;align-self:center}
.speak{grid-column:2;grid-row:2;align-self:center}

/* The active board replaces the introductory example in the same card. */
html[data-slova-phase=playing] #instructions,html[data-slova-phase=finished] #instructions{display:none}

/* Give the main action room, with both editing controls together on its right. */
.submit-word {white-space:nowrap;}
@media(max-width:600px) {
  .compose-actions {gap:6px;}
  .submit-word {min-height:44px;font-size:.95rem;padding-inline:10px;}
  .submit-word span {margin-left:3px;}
  .draft-actions {gap:6px;}
  .draft-actions button {min-width:44px;min-height:44px;padding:8px;font-size:.72rem;}
  #remove-letter {font-size:1.2rem;}
  #remove-letter .remove-copy {display:none;}
}
#game-view>.intro{text-align:center;margin:18px auto 24px}
#game-view>.intro p{margin-inline:auto}
.top .filipika-game-brand>.filipika-game-art{width:72px;height:60px}