*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden;touch-action:manipulation}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:#203047;
  font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(circle at 12% 8%,rgba(251,146,60,.30),transparent 28%),
    radial-gradient(circle at 86% 10%,rgba(56,189,248,.24),transparent 26%),
    linear-gradient(180deg,#fff7ed 0%,#eff6ff 100%);
}
a{color:inherit;text-decoration:none}
button{font:inherit;touch-action:manipulation}
.page{width:min(1100px,calc(100% - 28px));margin:0 auto;padding-bottom:28px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#f97316,#2563eb);color:#fff;font-size:22px;font-weight:900;box-shadow:0 12px 26px rgba(249,115,22,.22)}
.brand strong{display:block;font-size:19px;line-height:1.1}.brand em{display:block;margin-top:3px;color:#64748b;font-size:12px;font-style:normal}
.back-link{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(249,115,22,.28);color:#9a3412;font-size:14px;font-weight:900}
.game-shell{display:grid;gap:18px}
.hero-card,.board-card,.score-card,.actions-card,.tips-card,.settings-card{
  border-radius:8px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(251,146,60,.26);
  box-shadow:0 18px 42px rgba(120,72,20,.12);
}
.hero-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:28px}
.eyebrow{margin:0 0 8px;color:#f97316;font-size:13px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}
.hero-card h1{margin:0;color:#172033;font-size:clamp(38px,8vw,68px);line-height:1.05;font-weight:900}
.intro{margin:14px 0 0;color:#475569;font-size:18px;line-height:1.7}
.turn-card{min-width:150px;padding:16px;border-radius:8px;background:#eff6ff;border:2px solid #bfdbfe;text-align:center}
.turn-card span{display:block;color:#2563eb;font-size:13px;font-weight:900}.turn-card strong{display:block;margin-top:6px;color:#1e3a8a;font-size:24px}
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.board-card{padding:22px}
.board{
  width:100%;
  max-width:520px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:10px;
  border-radius:8px;
  background:#1e293b;
}
.cell{
  aspect-ratio:1 / 1;
  border:0;
  border-radius:8px;
  background:#fff7ed;
  color:#172033;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:clamp(46px,16vw,92px);
  font-weight:900;
  line-height:1;
  box-shadow:inset 0 -6px 0 rgba(15,23,42,.08);
  transition:transform .12s ease,background .16s ease,box-shadow .16s ease;
}
.cell:hover{transform:translateY(-2px);background:#ffedd5}
.cell.x{color:#f97316}.cell.o{color:#2563eb}
.cell.win{background:#fef08a;box-shadow:0 0 0 4px rgba(250,204,21,.40),inset 0 -6px 0 rgba(15,23,42,.08);animation:winPulse .75s ease infinite alternate}
.cell:disabled{cursor:default}
@keyframes winPulse{from{transform:scale(1)}to{transform:scale(1.035)}}
.result-box{margin-top:16px;padding:14px 16px;border-radius:8px;background:#f8fafc;border:1px solid #dbeafe;color:#334155;font-size:18px;font-weight:900;line-height:1.6;text-align:center}
.result-box.player{background:#fff7ed;border-color:#fdba74;color:#9a3412}.result-box.computer{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.result-box.draw{background:#f1f5f9;border-color:#cbd5e1;color:#475569}
.side-panel{display:grid;gap:18px}
.score-card,.actions-card,.tips-card,.settings-card{padding:18px}
.score-card h2,.tips-card h2,.settings-card h2{margin:0 0 14px;font-size:22px}
.settings-card h2:not(:first-child){margin-top:18px}
#difficultySection{transition:opacity .18s ease,filter .18s ease}
#difficultySection.is-disabled{opacity:.42;filter:grayscale(.55)}
#difficultySection.is-disabled button{pointer-events:none}
.choice-row{display:flex;flex-wrap:wrap;gap:9px}
.choice-row button{
  min-height:42px;
  padding:0 12px;
  border-radius:999px;
  border:2px solid #fed7aa;
  background:#fff7ed;
  color:#9a3412;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
}
.choice-row button.active{background:#f97316;border-color:#ea580c;color:#fff;box-shadow:0 10px 22px rgba(249,115,22,.18)}
.skin-row button{font-size:15px}
.score-grid{display:grid;grid-template-columns:1fr;gap:10px}
.score-grid div{padding:14px;border-radius:8px;background:#fff7ed;border:1px solid #fed7aa;text-align:center}
.score-grid span{display:block;color:#ea580c;font-size:30px;font-weight:900;line-height:1;word-break:keep-all}.score-grid small{display:block;margin-top:5px;color:#7c2d12;font-weight:900}
.actions-card{display:grid;gap:10px}
.primary-btn,.ghost-btn{min-height:50px;border-radius:8px;border:0;font-size:17px;font-weight:900;cursor:pointer}
.primary-btn{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff}.ghost-btn{background:#eff6ff;color:#1d4ed8;border:2px solid #bfdbfe}
.tips-card p{margin:0;color:#475569;font-size:16px;line-height:1.8}.tips-card strong{color:#f97316}
.award-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgba(15,23,42,.28);opacity:0;pointer-events:none;transition:opacity .18s ease}
.award-modal.show{opacity:1;pointer-events:auto}
.award-card{width:min(380px,92vw);padding:28px 22px;border-radius:8px;text-align:center;background:linear-gradient(135deg,#fff7ed,#eff6ff);border:3px solid #facc15;box-shadow:0 24px 70px rgba(15,23,42,.28);animation:awardPop .35s ease both}
.award-shine{color:#f59e0b;font-size:34px;letter-spacing:7px;animation:shine .8s ease infinite alternate}
.award-card strong{display:block;margin-top:8px;color:#ea580c;font-size:34px;line-height:1.15}
.award-card p{margin:12px 0 18px;color:#1d4ed8;font-size:18px;font-weight:900;line-height:1.6}
.award-card button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:#f97316;color:#fff;font-weight:900;cursor:pointer}
.result-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at center,rgba(255,247,237,.22),rgba(15,23,42,.55));opacity:0;pointer-events:none;overflow:hidden;transition:opacity .2s ease}
.result-modal.show{opacity:1;pointer-events:auto}
.fireworks-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.firework{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;border-radius:999px;background:var(--c);box-shadow:0 0 18px var(--c);animation:fireworkBurst 1.1s ease-out forwards;transform:translate(-50%,-50%) rotate(var(--a))}
.firework::before,.firework::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;box-shadow:inherit}.firework::before{transform:rotate(60deg) translateX(28px)}.firework::after{transform:rotate(120deg) translateX(28px)}
.result-card{position:relative;z-index:2;width:min(430px,92vw);padding:30px 24px;border-radius:10px;text-align:center;background:linear-gradient(135deg,#fff7ed,#eff6ff);border:3px solid #facc15;box-shadow:0 28px 80px rgba(15,23,42,.34);animation:awardPop .36s ease both}
.result-icon{font-size:56px;line-height:1;animation:shine .75s ease infinite alternate}
.result-card strong{display:block;margin-top:10px;color:#ea580c;font-size:38px;line-height:1.15}
.result-card p{margin:12px 0 18px;color:#1d4ed8;font-size:20px;font-weight:900;line-height:1.6}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.result-card button{min-height:46px;padding:0 18px;border:0;border-radius:999px;background:#f97316;color:#fff;font-size:16px;font-weight:900;cursor:pointer}.result-card button:last-child{background:#eff6ff;color:#1d4ed8;border:2px solid #bfdbfe}
@keyframes awardPop{from{transform:scale(.84);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes shine{from{transform:translateY(0) scale(1)}to{transform:translateY(-3px) scale(1.08)}}
@keyframes fireworkBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(var(--a))}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.6) rotate(var(--a))}}
@media(max-width:820px){
  .page{width:min(100% - 20px,1100px)}
  .topbar{align-items:flex-start;flex-direction:column}
  .back-link{width:100%}
  .hero-card{display:block;padding:22px}.turn-card{margin-top:18px}
  .play-layout{grid-template-columns:1fr}
  .side-panel{grid-template-columns:1fr}
  .score-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){
  .board-card{padding:14px}
  .board{gap:7px;padding:7px}
  .choice-row button{flex:1 1 calc(50% - 9px);padding:0 8px}
  .score-grid{grid-template-columns:1fr 1fr}
  .score-grid span{font-size:24px}
  .cell{border-radius:7px}
  .result-box{font-size:16px}
}