/* =========================================================
   我的工具 · 井字棋
   作用域：.ttt-* 前缀；工具行沿用 timetable.css 的 .tools-list / .tool-*
   ========================================================= */
.ttt-page{
  --ttt-me:#4f7351;
  --ttt-bot:#a9743f;
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);
}
.ttt-page button{font-family:inherit}
.ttt-clear,.ttt-level,.ttt-again{border:0;background:none}

/* ---------- 页头 ---------- */
.ttt-head{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:max(10px,env(safe-area-inset-top)) 12px 10px;
  background:rgba(250,250,247,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--paper-3);z-index:20;
}
.ttt-icon-btn{
  width:36px;height:36px;flex:0 0 auto;border-radius:12px;background:var(--raise);
  border:1px solid var(--paper-3);color:var(--ink-2);display:grid;place-items:center;
  box-shadow:0 1px 6px rgba(44,62,45,.06);transition:transform .15s ease;
}
.ttt-icon-btn:active{transform:scale(.92)}
.ttt-icon-btn svg{width:18px;height:18px}
.ttt-head-title{
  flex:1;min-width:0;font-family:var(--f-display);font-size:20px;font-weight:400;color:var(--ink);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- 页面主体 ---------- */
.ttt-body{
  flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;
  padding:14px 16px calc(24px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:flex-start;justify-content:center;
  scrollbar-width:none;touch-action:pan-y;
}
.ttt-body::-webkit-scrollbar{display:none}
/* 内容不满一屏时上下留白均分，矮屏仍从顶部起、可滚动 */
.ttt-inner{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px;margin-block:auto}

/* ---------- 机器人 ---------- */
.ttt-robot{
  display:flex;align-items:center;gap:13px;
  padding:11px 14px 11px 11px;border:1px solid #e6ddcb;border-radius:18px;
  background:linear-gradient(180deg,#faf5e9,#f3ecdc);
}
.ttt-face{
  width:64px;height:64px;flex:0 0 auto;display:grid;place-items:center;
}
.ttt-face svg{width:64px;height:64px;display:block}
.ttt-face.is-thinking{animation:ttt-think 1.6s ease-in-out infinite}
@keyframes ttt-think{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-2px) rotate(-1.4deg)}
}
.ttt-say{position:relative;flex:1;min-width:0}
.ttt-robot-name{font-size:10.5px;color:#8d7a55;letter-spacing:.05em;line-height:1.2}
.ttt-bubble{
  position:relative;margin-top:6px;padding:9px 12px;min-height:38px;
  display:flex;align-items:center;border-radius:13px;
  background:var(--raise);border:1px solid #e8e0cf;
  font-size:13px;line-height:1.5;color:var(--ink);
  box-shadow:0 1px 4px rgba(44,62,45,.04);
}
.ttt-bubble:before{
  content:'';position:absolute;left:-5px;top:15px;width:9px;height:9px;
  background:var(--raise);border-left:1px solid #e8e0cf;border-bottom:1px solid #e8e0cf;
  transform:rotate(45deg);border-radius:0 0 0 2px;
}

/* ---------- 战绩与难度 ---------- */
.ttt-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ttt-score{
  display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.ttt-score b{color:var(--ink-2);font-weight:600;font-size:12px}
.ttt-clear{
  margin-left:2px;padding:4px 5px;border-radius:7px;font-size:10.5px;color:var(--ink-4);
  transition:background .15s ease,color .15s ease;
}
.ttt-clear:active{background:var(--paper-2)}
.ttt-clear.is-armed{color:var(--cinnabar);background:var(--cinnabar-soft)}
.ttt-levels{
  display:inline-flex;gap:2px;padding:3px;border-radius:12px;
  background:var(--paper-2);border:1px solid var(--paper-3);
}
.ttt-level{
  padding:5px 10px;border-radius:9px;font-size:11.5px;color:var(--ink-3);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.ttt-level.is-on{
  background:var(--raise);color:var(--accent);font-weight:600;
  box-shadow:0 1px 4px rgba(44,62,45,.1);
}

/* ---------- 棋盘 ---------- */
.ttt-board-wrap{display:flex;justify-content:center;padding:2px 0}
.ttt-board{
  position:relative;width:min(100%,340px);aspect-ratio:1/1;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:8px;padding:8px;border-radius:22px;
  background:var(--paper-2);border:1px solid var(--paper-3);
  box-shadow:inset 0 1px 3px rgba(44,62,45,.04);
}
.ttt-cell{
  position:relative;display:grid;place-items:center;
  border:1px solid var(--paper-3);border-radius:14px;background:var(--raise);
  padding:14%;touch-action:manipulation;
  transition:transform .14s ease,background .14s ease,border-color .14s ease;
}
.ttt-cell:not(.is-taken):active{transform:scale(.96)}
.ttt-cell:not(.is-taken):hover{background:#fff;border-color:var(--line)}
.ttt-cell.is-taken{cursor:default}
.ttt-cell.is-win{background:var(--accent-light);border-color:rgba(90,122,92,.35)}
.ttt-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ttt-mark{width:66%;height:66%;display:block}
.ttt-mark--x{color:var(--ttt-me)}
.ttt-mark--o{color:var(--ttt-bot)}
.ttt-cell.is-new .ttt-mark{animation:ttt-mark-in .2s cubic-bezier(.2,.8,.2,1)}
@keyframes ttt-mark-in{
  from{transform:scale(.55) rotate(-5deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}
}
.ttt-win-svg{
  position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);
  pointer-events:none;overflow:visible;
}
.ttt-win-svg line{
  stroke:rgba(90,122,92,.5);stroke-width:.07;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:ttt-line-in .32s ease-out .06s forwards;
}
@keyframes ttt-line-in{to{stroke-dashoffset:0}}

/* ---------- 状态与再来一局 ---------- */
.ttt-foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}
.ttt-status{min-height:20px;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.4}
.ttt-status.is-result{
  font-family:var(--f-display);font-size:18px;line-height:1.3;color:var(--ink);
  letter-spacing:.02em;
}
.ttt-status.is-result.win{color:var(--accent)}
.ttt-status.is-result.lose{color:var(--ink-2)}
.ttt-again{
  width:100%;max-width:340px;height:46px;border-radius:14px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 2px 10px rgba(90,122,92,.22);
  transition:transform .15s ease,box-shadow .15s ease;
}
.ttt-again:active{transform:scale(.98);box-shadow:0 1px 5px rgba(90,122,92,.2)}

/* ---------- 平板 ---------- */
@media (min-width:768px){
  .ttt-head{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
  .ttt-inner{max-width:480px;gap:14px}
  .ttt-board{width:min(100%,380px)}
  .ttt-face,.ttt-face svg{width:72px;height:72px}
}
@media (max-width:359px){
  .ttt-head-title{font-size:18px}
  .ttt-face,.ttt-face svg{width:56px;height:56px}
  .ttt-bubble{font-size:12.5px;padding:8px 10px}
  .ttt-board{gap:6px;padding:6px;border-radius:18px}
  .ttt-cell{border-radius:12px}
  .ttt-win-svg{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
}

@media (prefers-reduced-motion:reduce){
  .ttt-face.is-thinking{animation:none}
  .ttt-cell.is-new .ttt-mark{animation:none}
  .ttt-win-svg line{animation:none;stroke-dashoffset:0}
}