/* Word Square — Playnesta (2026-10-12). Self-written stylesheet.
   Layout: flex column; the board absorbs the leftover height so the page
   never overflows, on the 348x261 phone stage and the 894x670 desktop
   stage alike (word-guess pattern: min-height:100vh + grow/shrink grid). */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; height: 100%; background: #121213; color: #e6e6e6; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; }
#pn-wrap { min-height: 100%; max-width: 520px; margin: 0 auto; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
#pn-head h1 { font-size: 18px; margin: 2px 0; text-align: center; letter-spacing: 0.06em; flex: 0 0 auto; }
#pn-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; flex: 0 0 auto; flex-wrap: wrap; }
#pn-new { font-size: 13px; padding: 6px 12px; min-height: 44px; border: 0; border-radius: 8px; background: #2f81f7; color: #fff; cursor: pointer; touch-action: manipulation; }
#pn-alert { min-height: 15px; text-align: center; font-size: 12px; color: #f2b6b6; flex: 0 0 auto; }

/* board: grows into leftover space, never overflows */
#pn-board { flex: 1 1 auto; min-height: 64px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 3px; width: 100%; max-width: 420px; margin: 0 auto; }
.sq { position: relative; border: 2px solid #3a3a3c; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: clamp(9px, 4vw, 26px); font-weight: 700; text-transform: uppercase; background: #121213; user-select: none; overflow: hidden; }
.sq.block { background: #000; border-color: #000; }
.sq.active-line { border-color: #565758; }
.sq.green { background: #538d4e; border-color: #538d4e; }
.sq.typed { border-color: #818384; }
.sq.shake { animation: pn-shake 0.3s; }
@keyframes pn-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* hint marks: up to 4 small colored chips in a 2x2 mini grid, digit = arrow count */
.marks { position: absolute; inset: 2px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; }
.mark { font-size: 8px; line-height: 1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 2px; font-weight: 700; }
.mark.yellow { background: #b59f3b; }
.mark.red { background: #a94442; }
.mark.orange { background: #b06a2a; }
.mark.white { background: #6b6b6e; }
.mark.black { background: #1c1c1e; color: #9a9a9e; }
.mark.dim { opacity: 0.55; }
.line-tag { position: absolute; top: 0; left: 2px; font-size: 8px; color: #818384; font-weight: 400; }
.solved-tag { position: absolute; top: 0; right: 2px; font-size: 9px; }

#pn-hint-key { flex: 0 0 auto; font-size: 11px; color: #9a9a9e; text-align: center; margin: 0; line-height: 1.4; }
#pn-hint-key summary { cursor: pointer; color: #6b6b6e; }
/* keyboard */
#pn-keyboard { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.krow { display: flex; gap: 4px; width: 100%; justify-content: center; }
.key { font-size: 13px; font-weight: 700; text-transform: uppercase; min-width: 26px; min-height: 44px; padding: 0; border: 0; border-radius: 4px; background: #818384; color: #fff; cursor: pointer; touch-action: manipulation; flex: 1 1 auto; max-width: 44px; }
.key.large { max-width: 62px; font-size: 11px; }
.key.k-green { background: #538d4e; }
.key.k-orange { background: #b06a2a; }
.key.k-line { background: #b59f3b; }
.key.k-white { background: #6b6b6e; }
.key.k-black { background: #1c1c1e; color: #777; }
.key:active { filter: brightness(1.25); }
#pn-over { text-align: center; font-size: 15px; font-weight: 700; flex: 0 0 auto; min-height: 18px; }
#pn-over.win { color: #538d4e; }
#pn-over.lose { color: #d64545; }