:root{font-family:system-ui,-apple-system,"Noto Sans Thai",sans-serif;color:#193640;background:#f3f8f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}a{text-decoration:none;color:inherit}.top{min-height:72px;background:#0c2934;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,48px);gap:16px;flex-wrap:wrap}.logo{font-size:20px;font-weight:850;letter-spacing:.04em}.mark{color:#d7ad70}.top nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}.top nav a:hover{color:#d7ad70}.tag{background:#215059;border-radius:20px;padding:7px 13px;font-size:11px;letter-spacing:.1em}main{max-width:1280px;margin:auto;padding:22px clamp(12px,3vw,40px) 50px}.hero{background:linear-gradient(115deg,#103941,#0b726b);border-radius:26px;padding:30px clamp(22px,5vw,55px);color:#fff;display:flex;justify-content:space-between;align-items:center}.hero h1{font-size:clamp(27px,4vw,46px);line-height:1.2;margin:8px 0}.hero em{font-style:normal;color:#ecd4a9}.hero p{color:#d5e8e5}.art{font-size:100px;letter-spacing:-.2em;color:#141c1e}.art span{color:white}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:#c99e64}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.panel{background:#fff;border:1px solid #dce9e6;border-radius:22px;box-shadow:0 15px 45px #0c29340c;padding:24px}.panel h2{margin:8px 0}.panel p{color:#5a7076}label{display:grid;gap:9px;font-weight:650;margin:16px 0}input,select{width:100%;min-width:0;border:1px solid #b5cdca;border-radius:12px;padding:13px 15px;background:#fff;color:#173e43;font-size:16px}button{border:0;border-radius:11px;padding:12px 16px;font-weight:700}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:#087f79;color:#fff}.secondary{background:#eaf3f1;color:#134c4b}.danger{background:#fff1f1;color:#a6232d}.tiny{font-size:12px;padding:7px 10px;background:#e8f0ec;color:#165456}.message{margin-top:14px;min-height:22px;color:#a6232d;font-weight:650}.match{margin-top:17px}.matchHead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.matchHead>div:last-child{display:flex;gap:8px}.matchGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,290px);gap:25px;align-items:start;margin-top:14px}.boardColumn{min-width:0;display:flex;flex-direction:column;align-items:center}canvas{width:min(100%,690px);height:auto;aspect-ratio:1;display:block;border-radius:13px;box-shadow:0 8px 25px #0c293438;touch-action:manipulation}aside{display:grid;gap:11px}aside button{min-height:46px}.turn{background:#f2f7f6;border-radius:13px;display:flex;align-items:center;gap:15px;padding:12px}.turn span{font-size:33px}.turn small{display:block;color:#617e84}.turn strong{display:block;font-size:19px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stats div{background:#f2f7f6;border-radius:12px;padding:12px;font-size:13px;color:#54727a}.stats strong{display:block;font-size:25px;color:#193640}.sub{font-size:12px;color:#5a7178;line-height:1.7}.result{font-weight:800}.match:fullscreen,.match.full-window{background:#f3f8f7;border-radius:0;width:100vw;height:100dvh;max-width:none;margin:0;padding:12px 20px;overflow:hidden;display:flex;flex-direction:column}.match:fullscreen .matchGrid,.match.full-window .matchGrid{min-height:0;flex:1;grid-template-columns:minmax(0,1fr) 255px}.match:fullscreen .boardColumn,.match.full-window .boardColumn{min-height:0}.match:fullscreen canvas,.match.full-window canvas{width:auto;max-width:100%;height:min(100%,calc(100dvh - 150px));max-height:100%;aspect-ratio:1}.match:fullscreen aside,.match.full-window aside{overflow-y:auto;min-height:0}@media(max-width:750px){.cards,.matchGrid{grid-template-columns:1fr}.art,.tag{display:none}.top nav{gap:10px}.panel{padding:16px}.match:fullscreen .matchGrid,.match.full-window .matchGrid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}.match:fullscreen aside,.match.full-window aside{display:flex;flex-wrap:wrap;gap:6px;max-height:26dvh}.match:fullscreen aside>* ,.match.full-window aside>*{margin:0}.match:fullscreen .stats,.match.full-window .stats,.match:fullscreen .sub,.match.full-window .sub{display:none}.match:fullscreen canvas,.match.full-window canvas{height:min(100%,60dvh)}.match:fullscreen .turn,.match.full-window .turn{padding:4px 10px}.match:fullscreen aside button,.match.full-window aside button{min-height:38px}}