:root { --ink:#29365e; --muted:#7180a4; --primary:#7668e8; --primary-dark:#5548bd; font-family:"Arial Rounded MT Bold","Microsoft YaHei",system-ui,sans-serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { min-height:100%; margin:0; }
body { color:var(--ink); background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.9) 0 5%,transparent 5.5%),linear-gradient(155deg,#e0f8ff 0%,#f0efff 52%,#fff1d9 100%); }
button,a { font:inherit; touch-action:manipulation; }
button { border:0; cursor:pointer; }
button:focus-visible,a:focus-visible { outline:4px solid rgba(255,184,49,.8); outline-offset:3px; }
.sudoku-app { width:min(760px,100%); min-height:100vh; min-height:100dvh; margin:0 auto; }
.screen { position:relative; min-height:100vh; min-height:100dvh; padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.selection-screen { display:flex; align-items:center; flex-direction:column; justify-content:center; text-align:center; }
.lobby-link { position:absolute; top:max(18px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); min-height:44px; padding:11px 16px; border:2px solid rgba(83,102,164,.12); border-radius:999px; color:#5a68a0; background:rgba(255,255,255,.92); box-shadow:0 8px 18px rgba(67,84,145,.14); font-weight:800; text-decoration:none; }
.hero-sudoku { display:grid; width:130px; height:130px; margin-top:34px; overflow:hidden; grid-template-columns:repeat(2,1fr); border:6px solid #7668e8; border-radius:28px; background:#7668e8; box-shadow:0 16px 30px rgba(77,63,175,.2); gap:3px; transform:rotate(-2deg); }
.hero-sudoku span { display:grid; place-items:center; background:#fff; font-size:36px; }
.game-header { display:grid; align-items:center; grid-template-columns:52px 1fr 52px; gap:12px; }
.round-link,.round-button { display:grid; width:52px; height:52px; padding:0; place-items:center; border:2px solid rgba(83,102,164,.12); border-radius:50%; color:var(--ink); background:rgba(255,255,255,.92); box-shadow:0 8px 18px rgba(67,84,145,.14); font-size:24px; text-decoration:none; }
.title-copy { text-align:center; }
.title-copy span { color:#8074ba; font-size:13px; font-weight:800; letter-spacing:.08em; }
.title-copy h1 { margin:2px 0 0; color:#5148ad; font-size:clamp(30px,7vw,44px); text-shadow:0 3px 0 #fff; }
.selection-screen .title-copy { margin-top:18px; }
.tagline { max-width:520px; margin:8px 0 18px; color:var(--muted); font-size:17px; line-height:1.6; }
.difficulty-panel { width:min(640px,100%); padding:16px 18px 18px; border:2px solid rgba(255,255,255,.9); border-radius:24px; background:rgba(255,255,255,.9); box-shadow:0 12px 28px rgba(69,84,151,.13); }
.difficulty-panel h2 { margin:0 0 10px; text-align:center; font-size:17px; }
.difficulty-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.difficulty-button { display:flex; min-height:82px; padding:10px; align-items:center; flex-direction:column; justify-content:center; border:3px solid transparent; border-radius:15px; color:var(--ink); background:#f0f1fb; font-weight:800; }
.difficulty-button strong { font-size:18px; }
.difficulty-button small { margin-top:3px; color:var(--muted); font-size:12px; }
.difficulty-button.selected { border-color:#8073e7; color:#5148ad; background:#ebe9ff; }
.selection-actions { display:flex; margin-top:18px; align-items:center; gap:12px; }
.game-screen { display:flex; flex-direction:column; }
.game-title-row { display:flex; min-height:40px; margin:10px 0; align-items:center; justify-content:center; gap:12px; }
.difficulty-badge { padding:6px 13px; border-radius:999px; color:#fff; background:#7668e8; font-size:13px; font-weight:900; }
.play-panel { flex:1; padding:18px; border:2px solid rgba(255,255,255,.92); border-radius:30px; background:rgba(255,255,255,.84); box-shadow:0 18px 42px rgba(58,76,143,.16); }
.stats,.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stats div,.result-grid div { padding:8px; border-radius:15px; text-align:center; background:#f3f4ff; }
.stats span,.result-grid span { display:block; color:var(--muted); font-size:12px; white-space:nowrap; }
.stats strong,.result-grid strong { display:block; margin-top:2px; font-size:20px; }
.game-message { min-height:24px; margin:0; color:#6877a1; text-align:center; font-weight:700; }
.sudoku-board { display:grid; width:min(100%,420px); aspect-ratio:1; margin:0 auto; overflow:hidden; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); border:5px solid #596cac; border-radius:18px; background:#596cac; gap:2px; }
.sudoku-cell { min-width:0; min-height:0; border-radius:4px; background:#fff; font-size:clamp(30px,10vw,58px); transition:transform 120ms ease,background 120ms ease; }
.sudoku-cell:nth-child(2),.sudoku-cell:nth-child(6),.sudoku-cell:nth-child(10),.sudoku-cell:nth-child(14) { border-right:4px solid #596cac; }
.sudoku-cell:nth-child(n+5):nth-child(-n+8) { border-bottom:4px solid #596cac; }
.sudoku-cell.given { background:#edf0ff; }
.sudoku-cell.selected { background:#fff1b9; box-shadow:inset 0 0 0 4px #ffbd3f; }
.sudoku-cell.related:not(.selected) { background:#f7f5ff; }
.sudoku-cell.incorrect { background:#ffe0e6; animation:shake 260ms ease; }
.sudoku-cell.hinted { animation:hint-pop 500ms ease; }
.symbol-palette { display:grid; width:min(100%,420px); margin:14px auto 0; grid-template-columns:repeat(4,1fr); gap:10px; }
.symbol-button { min-height:64px; border:3px solid #e3e5f5; border-radius:18px; background:#fff; font-size:clamp(28px,8vw,42px); box-shadow:0 7px 14px rgba(64,77,132,.1); }
.symbol-button:active { transform:translateY(3px); }
.game-controls { display:grid; width:min(100%,420px); margin:14px auto 0; grid-template-columns:repeat(3,1fr); gap:10px; }
.control-button { min-height:52px; border-radius:16px; color:#3e4f84; background:#eef0fb; font-weight:800; }
.control-button span { margin-right:4px; font-size:20px; }
.control-button:disabled { opacity:.45; cursor:default; }
.modal { position:fixed; inset:0; z-index:10; display:grid; padding:22px; place-items:center; background:rgba(40,49,91,.38); backdrop-filter:blur(8px); }
.hidden { display:none!important; }
.modal-card { width:min(420px,100%); padding:28px; border-radius:30px; text-align:center; background:#fff; box-shadow:0 24px 64px rgba(37,46,94,.28); }
.award { font-size:64px; }
.modal-card h2 { margin:8px 0; color:#5148ad; font-size:30px; }
.modal-card p { color:var(--muted); }
.result-grid { margin:20px 0; gap:8px; }
.primary-button { min-width:220px; min-height:54px; padding:10px 28px; border-radius:999px; color:#fff; background:linear-gradient(#8b7cf3,var(--primary)); box-shadow:0 7px 0 var(--primary-dark); font-size:20px; font-weight:900; }
.modal-card .primary-button { width:100%; }
.text-button { min-height:44px; margin-top:14px; color:#6573a2; background:transparent; font-weight:800; }
@keyframes shake { 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes hint-pop { 50%{transform:scale(1.1);background:#dff8d9} }
@media (max-width:480px) { .screen{padding-top:12px}.game-header{grid-template-columns:46px 1fr 46px}.round-link,.round-button{width:46px;height:46px}.hero-sudoku{width:104px;height:104px}.hero-sudoku span{font-size:29px}.tagline{font-size:15px}.difficulty-panel{padding:13px}.difficulty-button{min-height:72px}.play-panel{padding:13px;border-radius:24px}.symbol-button{min-height:56px} }
@media (max-height:680px) and (orientation:landscape) { .sudoku-app{width:min(980px,100%)}.selection-screen{display:grid;padding:12px 42px;align-items:center;grid-template-columns:.8fr 1.2fr;grid-template-rows:auto auto auto;column-gap:34px}.hero-sudoku{width:82px;height:82px;margin:0 10px 0 0;justify-self:end;grid-column:1;grid-row:1}.hero-sudoku span{font-size:22px}.selection-screen .title-copy{margin-top:4px;grid-column:1;grid-row:2}.selection-screen .title-copy h1{font-size:32px}.tagline{margin:2px 0 0;font-size:14px;grid-column:1;grid-row:3}.difficulty-panel{width:100%;grid-column:2;grid-row:1/span 2}.difficulty-button{min-height:58px}.selection-actions{margin-top:8px;grid-column:2;grid-row:3}.game-screen{display:grid;padding:8px 20px;grid-template-columns:250px 1fr;grid-template-rows:auto auto 1fr;gap:6px 14px}.game-header,.game-title-row{grid-column:1}.game-header{grid-template-columns:46px 1fr 46px;gap:6px}.game-header .stats{gap:4px}.game-header .stats div{padding:4px 2px}.play-panel{padding:8px;grid-column:2;grid-row:1/span 3}.sudoku-board{width:min(46vh,300px)}.sudoku-cell{font-size:32px}.symbol-palette{margin-top:8px;gap:7px}.symbol-button{min-height:44px;font-size:28px}.game-controls{margin-top:8px;gap:7px}.control-button{min-height:44px}.game-title-row{margin:2px 0}.game-message{font-size:14px}.modal-card{padding:14px 22px}.award{font-size:36px}.modal-card h2{margin:2px 0;font-size:24px}.modal-card p{margin:4px 0}.result-grid{margin:8px 0}.modal-card .primary-button{min-height:44px}.text-button{min-height:36px;margin-top:6px} }
@media (prefers-reduced-motion:reduce) { *{animation:none!important;transition:none!important} }