@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#fff4de;background:#10263b;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% 12%,#315b68 0,#173b4b 32%,#0d253b 76%),#10263b;overflow-x:hidden}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.24;background:repeating-linear-gradient(0deg,transparent 0 56px,#c5ebed13 57px 58px),repeating-linear-gradient(90deg,transparent 0 56px,#c5ebed13 57px 58px);mask-image:linear-gradient(#000,transparent 75%)}
button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffe18f;outline-offset:3px}[hidden]{display:none!important}.shell{position:relative;max-width:1100px;margin:auto;padding:10px 18px 12px}.top{height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px}.back{color:#d9edf0;text-decoration:none;font-weight:800;font-size:13px}.back:hover{color:#fff}.game-name{font:900 27px/1 Outfit,system-ui,sans-serif;letter-spacing:.14em;color:#fff5d5;text-shadow:0 3px 0 #b75e45,0 7px 15px #041522;display:flex;align-items:baseline;gap:8px}.game-name small{font:800 10px/1 DM Sans,system-ui,sans-serif;letter-spacing:.24em;color:#ffd691;text-shadow:none}.header-actions{display:flex;gap:7px}.icon-btn{height:36px;min-width:45px;padding:0 11px;border-radius:11px;border:1px solid #9bcbd67d;background:linear-gradient(#2f6d7f,#155168);box-shadow:inset 0 2px #ffffff30,0 4px 0 #092c40;color:#fff3d3;font-size:12px;font-weight:900}.icon-btn:hover,.icon-btn:active{filter:brightness(1.14)}.icon-btn span{margin-left:3px}.layout{display:block}.game-area{width:min(100%,900px);margin:0 auto}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;max-width:680px;margin:4px auto 7px}.score{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;min-height:59px;padding:6px 15px;border-radius:17px;border:2px solid #8fc5cb80;background:linear-gradient(150deg,#1a4d60ef,#10394eea);box-shadow:inset 0 2px #ffffff1c,0 5px 0 #092537,0 11px 18px #03152458}.score.active{border-color:#ffc078;box-shadow:inset 0 2px #ffffff33,0 5px 0 #8c4a36,0 0 19px #ffb86a77}.player-two.active{border-color:#8bd8fb;box-shadow:inset 0 2px #ffffff33,0 5px 0 #296784,0 0 19px #8bd8fb68}.score-caption{font:900 9px/1 DM Sans,system-ui,sans-serif;color:#acd7dd;letter-spacing:.14em}.score-name{grid-column:1;grid-row:2;font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-value{grid-column:2;grid-row:1/3;align-self:center;margin-left:10px;color:#fff2be;font:900 30px/1 Outfit,system-ui,sans-serif;font-variant-numeric:tabular-nums}.score.active:after{content:'●';position:absolute;top:7px;right:7px;color:#ffe29a;font-size:8px}.vs{color:#abcbd0;font:900 11px Outfit,system-ui,sans-serif}.play{max-width:710px;margin:auto;display:flex;flex-direction:column;align-items:stretch}.play-top{order:0;display:flex;justify-content:space-between;align-items:center;gap:8px;max-width:640px;width:100%;margin:0 auto 7px}.turn{font:900 14px Outfit,system-ui,sans-serif;color:#ffeab8}.turn:before{content:'●';color:#ffab7e;margin-right:8px}.turn.blue:before{color:#82d8fa}.play-top-actions{display:flex;gap:6px}.quiet{border:1px solid #97bdc164;background:#163e50c9;border-radius:9px;padding:7px 10px;color:#e5f4ee;font-weight:800;font-size:11px}.quiet:hover{background:#2e6574}.pause-control{background:#b65f48;border-color:#e4a27c;box-shadow:0 3px 0 #743a34}.board-wrap{order:1;position:relative;width:min(100%,calc(100dvh - 335px),500px);aspect-ratio:1;margin:0 auto 9px;padding:8px;border:0;border-radius:22px;background:linear-gradient(140deg,#ffd990,#e98a5e 44%,#98574d);box-shadow:inset 0 2px #fff5c6,0 5px 0 #763b36,0 18px 32px #04132191;isolation:isolate}.board{width:100%;height:100%;display:grid;overflow:hidden;border-radius:14px;background:#e9d2a5}.cell{min-width:0;min-height:0;border:1px solid #c49f71;border-radius:0;padding:0;display:grid;place-items:center;background:linear-gradient(145deg,#fff1cb,#e9d3ac);color:#a93e38;text-shadow:0 2px #fff3ce;font:900 clamp(23px,5vw,49px)/1 Outfit,system-ui,sans-serif;touch-action:manipulation;transition:background .12s,transform .13s}.cell:nth-child(even){background:linear-gradient(145deg,#f8e3bc,#e6ca9e)}.cell.p2{color:#1d7894}.cell:not(:disabled):hover{background:#fff3cb;box-shadow:inset 0 0 0 3px #ee9359}.cell:not(:disabled):active{transform:scale(.94)}.cell.last{background:#ffdda5;box-shadow:inset 0 0 0 3px #e68a52}.cell.scored{animation:score-cell .6s ease-out;background:#fff3ba}.cell.hint{box-shadow:inset 0 0 0 3px #42bb99;animation:hint-pulse 1s ease-in-out infinite alternate}.board.size10 .cell{font-size:clamp(17px,3.6vw,33px)}.lines{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);pointer-events:none;z-index:2;overflow:visible}.lines line{stroke-linecap:round;stroke-width:1.35;opacity:.64}.lines line.p0{stroke:#df6c50}.lines line.p1{stroke:#379abc}.score-flash{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;border:2px solid #fff4c0;border-radius:999px;background:#a64f40;color:#fff8dd;padding:9px 17px;font:900 20px Outfit,system-ui,sans-serif;box-shadow:0 10px 26px #301e2d66}.score-flash.show{animation:score-flash .9s ease-out both}.board-wrap.replaying{filter:saturate(.6)}
.choose{order:2;display:flex;align-items:center;justify-content:center;gap:12px;min-height:57px;margin:0 auto 7px;padding:4px 14px;border-radius:16px;background:#08283caa;border:1px solid #77aeb675;box-shadow:inset 0 2px #ffffff13}.choose-label{font-size:10px;font-weight:900;letter-spacing:.16em;color:#bcd8d3}.letter-options{display:flex;gap:8px}.letter{position:relative;display:grid;place-items:center;width:48px;height:47px;border:2px solid #cfa879;border-radius:11px;background:linear-gradient(#fff6d8,#e7c998);box-shadow:0 3px 0 #9d7656;color:#744238;touch-action:manipulation}.letter b{font:900 29px Outfit,system-ui,sans-serif}.letter small{display:none}.letter.selected{background:linear-gradient(#ffb882,#e96854);border-color:#ffe2a1;color:#fff9dd;box-shadow:0 3px 0 #9c3c38,0 0 14px #ffab6c88}.letter:hover:not(:disabled){transform:translateY(-2px)}.letter:disabled{opacity:.5}.small-hint{color:#d7e7dc;font-size:11px;max-width:220px;line-height:1.25}.game-tools{order:3;display:flex;justify-content:center;align-items:center;gap:8px;max-width:600px;width:100%;margin:0 auto 5px}.tool-btn{min-height:37px;padding:7px 11px;border:1px solid #79b2bc87;border-radius:10px;background:linear-gradient(#2f7480,#175368);box-shadow:0 3px 0 #0a3046;color:#f4f3d7;font-size:11px;font-weight:800}.tool-btn:hover:not(:disabled){filter:brightness(1.2)}.tool-btn:disabled{opacity:.45;box-shadow:none}.move-count{font-size:11px;color:#c6d8d3;font-weight:800;font-variant-numeric:tabular-nums;margin:0 5px}.replay-panel{order:4;max-width:520px;width:100%;margin:7px auto;padding:12px;border:1px solid #79b2bc87;border-radius:12px;background:#153f51}.replay-heading,.replay-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.replay-panel input[type=range]{width:100%;accent-color:#f7af6d}.replay-actions span{font-size:11px}.recent-moves{order:5;max-width:520px;width:100%;margin:8px auto 0;padding:8px 12px;border:1px solid #75aeb55e;border-radius:12px;background:#08283c80}.recent-head{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#d9e7da}.recent-head span{color:#ffdd9e}.recent-moves ol{display:flex;flex-wrap:wrap;gap:5px;list-style:none;padding:0;margin:5px 0 0}.recent-moves li{font-size:10px;color:#bed4d4}.recent-moves li+li:before{content:'·';padding-right:5px}.recent-moves li.scored{color:#ffe49b;font-weight:800}.game-stat{order:6;text-align:center;color:#8fbbbd;font-size:10px;margin-top:4px}.footnote{display:none}footer{text-align:center;padding:7px 0 1px;color:#9ebfc0;font-size:10px;font-weight:800;letter-spacing:.12em}
dialog{border:1px solid #eac18c;border-radius:22px;padding:0;width:min(420px,calc(100% - 24px));max-height:min(90dvh,760px);overflow:auto;background:#f9edd6;color:#362e2c;box-shadow:0 25px 75px #061521bd}dialog::backdrop{background:#061b2bcc;backdrop-filter:blur(4px)}.sidebar,.modal{padding:24px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-title h2,.modal h2{font:900 25px Outfit,system-ui,sans-serif;margin:0}.close{position:static;border:0;background:#e7d5bc;border-radius:9px;color:#4f413b;width:34px;height:34px;font-size:25px;line-height:1}.sidebar label{display:block;font-size:12px;font-weight:800;margin:13px 0 5px}.sidebar select,.sidebar input{width:100%;height:40px;padding:0 10px;border:1px solid #d5bea0;border-radius:9px;background:#fffaf0;color:#382e2a}.sidebar .primary{margin-top:20px}.sidebar-note{font-size:11px;color:#7b6b5f;text-align:center;margin-top:9px}.primary{width:100%;border:0;border-radius:12px;background:linear-gradient(#e88757,#c95945);box-shadow:0 4px 0 #8b3d37;color:#fff6e3;font-weight:900;padding:11px 14px}.primary:hover{filter:brightness(1.1)}.modal{position:relative}.modal .close{position:absolute;right:16px;top:16px}.modal .eyebrow{font-size:10px;font-weight:900;letter-spacing:.18em;color:#a55f4c}.modal h2{margin:8px 0 15px}.modal ol{padding-left:20px;line-height:1.6;font-size:13px}.modal li{margin-bottom:7px}.modal p{line-height:1.45}.end{text-align:center}.trophy{font:900 64px Outfit;color:#c25d46}.end .quiet{margin-top:15px;background:#e7d5bc;color:#3d3734}.pause-avatar{display:block;width:112px;height:112px;object-fit:contain;margin:10px auto 4px;filter:drop-shadow(0 12px 12px #36292b44);animation:avatar-in .28s ease-out both}
@keyframes score-cell{0%{transform:scale(.75)}55%{transform:scale(1.12)}100%{transform:scale(1)}}@keyframes score-flash{15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%)}}@keyframes hint-pulse{to{box-shadow:inset 0 0 0 5px #42bb99}}@keyframes avatar-in{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:none}}
@media(max-width:600px){.shell{padding:7px 9px}.top{height:44px}.game-name{font-size:19px}.game-name small{display:none}.back{font-size:11px}.icon-btn{min-width:38px;height:32px;padding:0 7px;font-size:10px}.icon-btn span{display:none}.scoreboard{gap:5px;margin:5px auto 8px}.score{min-height:52px;padding:5px 8px;border-radius:12px}.score-name{font-size:12px}.score-caption{font-size:7px}.score-value{font-size:23px;margin-left:5px}.vs{font-size:9px}.play-top{margin-bottom:6px}.turn{font-size:12px}.quiet{font-size:10px;padding:6px 8px}.board-wrap{width:min(100%,calc(100dvh - 262px),500px);padding:5px;border-radius:16px}.board{border-radius:11px}.lines{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}.choose{width:100%;gap:7px;padding:3px 6px;min-height:54px}.choose-label{font-size:8px}.letter{width:47px;height:43px}.letter b{font-size:26px}.small-hint{flex:1;font-size:10px}.game-tools{gap:4px}.tool-btn{min-height:35px;padding:5px 6px;font-size:10px}.move-count{font-size:9px;margin:0 2px}.recent-moves{margin-top:8px}.recent-head{font-size:10px}}
@media(max-width:360px){.game-name{font-size:17px}.back span{display:none}.board-wrap{width:min(100%,calc(100dvh - 250px))}.small-hint{font-size:9px}.tool-btn{font-size:9px}.score-name{font-size:11px}}
@media(max-height:650px) and (min-width:601px){.board-wrap{width:min(100%,calc(100dvh - 310px),500px)}.recent-moves,.game-stat{display:none}.scoreboard{margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Compact arcade controls stay legible without adding another text row. */
#rulesButton,#pause{width:35px;height:33px;padding:0;display:grid;place-items:center;font:900 18px/1 Outfit,system-ui,sans-serif}
#sound[aria-pressed=true]{border-color:#8de0b6;background:linear-gradient(#378d79,#1a665d)}