@font-face{font-family:Pretendard;src:url(/fonts/Pretendard-Regular.woff) format("woff");font-weight:400;font-display:swap}@font-face{font-family:Noto Sans Thai;src:url(/fonts/NotoSansThai-Regular.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}:root{--paper: #f4efe4;--paper-dim: #e9e2d2;--ink: #2c2a26;--ink-soft: #6b6559;--line: #c9c0aa;--line-strong: #8a8270;--accent: #c1552c;--accent-soft: #e7d9c4;--fill: #3a3733;--cross: #a89f8c;--wrong: #b23a3a;--ok: #4d7a52}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}button,input,select,textarea{font-family:inherit}html,body{width:100%;height:100%;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:var(--paper);color:var(--ink);font-family:Noto Sans Thai,Pretendard,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{width:100%;height:100%;position:relative;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;height:100%}.screen.active{display:flex}.btn{border:none;border-radius:10px;padding:12px 20px;font-size:15px;font-weight:600;cursor:pointer;min-height:44px}.btn-primary{background:var(--accent);color:#fff8ef}.btn-secondary{background:var(--paper-dim);color:var(--ink);border:1px solid var(--line)}.btn-large{padding:16px 32px;font-size:18px}.btn:disabled{opacity:.4;cursor:default}.btn-icon{min-width:44px;min-height:44px;padding:0 14px;border:none;background:var(--paper-dim);border-radius:10px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}#popup-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}#popup-container:not(:empty){pointer-events:auto}.popup-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center}.popup-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;min-width:280px;max-width:90vw}.popup-title{font-size:18px;font-weight:700;margin-bottom:12px}.popup-message{font-size:14px;color:var(--ink-soft);margin-bottom:20px;line-height:1.5}.popup-buttons{display:flex;gap:8px;justify-content:flex-end}.popup-btn{padding:8px 20px;border-radius:8px;border:none;font-size:14px;cursor:pointer}.popup-btn.primary{background:var(--accent);color:#fff}.popup-btn.secondary{background:var(--paper-dim);color:var(--ink)}#demo-banner{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translate(-50%);background:#ffc800e6;color:#000;padding:4px 16px;border-radius:20px;font-size:12px;font-weight:700;z-index:500;pointer-events:none}#ota-loading{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--paper);display:flex;align-items:center;justify-content:center;z-index:9999}.ota-spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:ota-spin .8s linear infinite}@keyframes ota-spin{to{transform:rotate(360deg)}}#screen-title{align-items:center;justify-content:center;position:relative}.title-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px}.app-title{font-size:32px;font-weight:700;letter-spacing:.5px;color:var(--ink)}.app-tagline{font-size:14px;color:var(--ink-soft);text-align:center;max-width:260px}.btn-lang{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;border:1px solid var(--line);background:var(--paper-dim);color:var(--ink);border-radius:20px;padding:8px 14px;font-size:13px;min-height:44px}.screen-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:8px}.screen-title{font-size:18px;font-weight:700}.header-spacer{width:44px}.pack-list{flex:1;overflow-y:auto;padding:8px 16px 24px;display:flex;flex-direction:column;gap:12px}.pack-card{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;min-height:64px;cursor:pointer}.pack-card.locked{opacity:.5}.pack-card-name{font-size:17px;font-weight:700}.pack-card-size{font-size:12px;color:var(--ink-soft);margin-top:2px}.pack-card-progress{font-size:13px;color:var(--ink-soft)}.puzzle-list{flex:1;overflow-y:auto;padding:8px 16px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;align-content:start}.puzzle-tile{aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;min-height:44px}.puzzle-tile.completed{background:var(--accent-soft);border-color:var(--accent)}.puzzle-tile-thumb{width:60%;height:60%}.puzzle-tile-badge{position:absolute;bottom:4px;right:4px;width:16px;height:16px;border-radius:50%;background:var(--ok)}#screen-complete{align-items:center;justify-content:center}.complete-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px}.complete-title{font-size:26px;font-weight:700;color:var(--accent)}.complete-canvas{display:grid;border:1px solid var(--line);width:min(70vw,320px);height:min(70vw,320px)}.complete-canvas .cc-cell{background:transparent}.complete-name{font-size:20px;font-weight:700}.complete-buttons{display:flex;gap:12px;margin-top:8px}.lives-wrap{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-soft)}.lives-display{font-weight:700;color:var(--wrong);font-size:16px}.board-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden;min-height:0}.puzzle-board{display:grid;grid-template-columns:var(--clue-col, 44px) 1fr;grid-template-rows:var(--clue-row, 44px) 1fr}.pb-corner{grid-column:1;grid-row:1}.pb-col-clues{grid-column:2;grid-row:1;display:flex;align-items:flex-end}.pb-row-clues{grid-column:1;grid-row:2;display:flex;flex-direction:column}.pb-grid{grid-column:2;grid-row:2;display:grid}.clue-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.4em;font-size:var(--clue-font, 11px);line-height:1;color:var(--ink);width:var(--cell, 28px);padding-bottom:5px}.clue-row{display:flex;justify-content:flex-end;align-items:center;gap:.5em;font-size:var(--clue-font, 11px);color:var(--ink);height:var(--cell, 28px);padding-right:6px}.clue-num{display:inline-block;min-width:1ch;text-align:center}.clue-row.dim,.clue-col.dim{color:var(--cross)}.pb-cell{border:1px solid var(--line);background:var(--paper);position:relative}.pb-cell.filled{background:var(--fill)}.pb-cell.crossed:before,.pb-cell.crossed:after{content:"";position:absolute;width:60%;height:2px;background:var(--cross)}.pb-cell.crossed:before{transform:rotate(45deg)}.pb-cell.crossed:after{transform:rotate(-45deg)}.pb-cell.wrong{background:var(--wrong)}.pb-cell.block-edge-right{border-right:2px solid var(--line-strong)}.pb-cell.block-edge-bottom{border-bottom:2px solid var(--line-strong)}.fail-banner{display:none;flex-direction:column;align-items:center;gap:8px;padding:10px 16px;background:var(--wrong);color:#fff}.fail-banner.active{display:flex}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px}.mode-toggle{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.mode-btn{border:none;background:#fff;color:var(--ink);padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;min-height:44px}.mode-btn.active{background:var(--ink);color:var(--paper)}.hint-credits{display:inline-block;margin-left:6px;background:var(--accent);color:#fff;border-radius:10px;padding:1px 7px;font-size:12px}.settings-row{display:flex;justify-content:space-around;padding:6px 16px calc(14px + env(safe-area-inset-bottom));gap:12px}.switch-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);min-height:44px;cursor:pointer}.switch-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.switch-track{display:inline-block;width:40px;height:24px;border-radius:12px;background:var(--paper-dim);border:1px solid var(--line-strong);position:relative;flex-shrink:0;transition:background-color .15s ease}.switch-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);transition:transform .15s ease}.switch-input:checked+.switch-track{background:var(--accent);border-color:var(--accent)}.switch-input:checked+.switch-track .switch-thumb{transform:translate(16px);border-color:var(--accent)}.switch-input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:2px}