.hero{margin:8px 0 22px}
.hero h2{margin:0;font-size:clamp(1.8rem,8vw,2.55rem);line-height:1.05;letter-spacing:-.055em}
.hero p{margin:12px 0 0;color:var(--muted);line-height:1.6}
.section{margin-top:22px}
.section-header{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-header h3{margin:0}
.section-header span{color:var(--muted);font-size:.8rem}

.resume-card{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:16px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:22px}
.resume-title{font-weight:700}
.resume-meta{margin-top:5px;color:var(--muted);font-size:.8rem;line-height:1.5}
.resume-badge{padding:7px 10px;border-radius:999px;background:rgba(52,211,153,.12);color:var(--success);font-size:.76rem;font-weight:700}
.resume-list{display:grid;gap:10px}

.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.game-card{
  --game-accent:#8b5cf6;
  --game-accent-rgb:139,92,246;
  --game-accent-label:#ddd6fe;
  --game-surface:#111827;
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,43%) minmax(0,57%);
  grid-template-areas:"copy art";
  gap:8px;
  overflow:hidden;
  min-width:0;
  min-height:126px;
  padding:10px;
  border:2px solid rgba(var(--game-accent-rgb),.68);
  border-radius:22px;
  color:var(--text);
  text-align:left;
  background:var(--game-surface);
  box-shadow:0 8px 18px rgba(0,0,0,.16),inset 0 0 0 1px rgba(var(--game-accent-rgb),.04);
  box-sizing:border-box;
}
.game-card[data-game-id="othello"]{--game-accent:#8b5cf6;--game-accent-rgb:139,92,246;--game-accent-label:#ddd6fe;--game-accent-label-light:#6d28d9}
.game-card[data-game-id="shogi"]{--game-accent:#22c55e;--game-accent-rgb:34,197,94;--game-accent-label:#bbf7d0;--game-accent-label-light:#166534}
.game-card[data-game-id="chess"]{--game-accent:#3b82f6;--game-accent-rgb:59,130,246;--game-accent-label:#bfdbfe;--game-accent-label-light:#1d4ed8}
.game-card[data-game-id="go"]{--game-accent:#f97316;--game-accent-rgb:249,115,22;--game-accent-label:#fed7aa;--game-accent-label-light:#9a3412}
.game-card.selected{
  border-color:var(--game-accent);
  background:linear-gradient(145deg,rgba(var(--game-accent-rgb),.18),rgba(var(--game-accent-rgb),.03) 54%),var(--game-surface);
  box-shadow:0 0 0 2px rgba(var(--game-accent-rgb),.2),0 10px 22px rgba(0,0,0,.2);
}
.game-card:not(:disabled){cursor:pointer}
@media(hover:hover){
  .game-card:not(:disabled):hover{
    border-color:var(--game-accent);
    background:linear-gradient(145deg,rgba(var(--game-accent-rgb),.13),rgba(var(--game-accent-rgb),.02) 54%),var(--game-surface);
    box-shadow:0 0 0 1px rgba(var(--game-accent-rgb),.17),0 10px 22px rgba(0,0,0,.2);
  }
}
.game-card:not(:disabled):active{
  border-color:var(--game-accent);
  background:linear-gradient(145deg,rgba(var(--game-accent-rgb),.23),rgba(var(--game-accent-rgb),.04) 54%),var(--game-surface);
  box-shadow:inset 0 0 0 2px rgba(var(--game-accent-rgb),.16),0 5px 12px rgba(0,0,0,.18);
}
.game-card:not(:disabled):focus-visible{
  outline:3px solid var(--game-accent);
  outline-offset:3px;
  border-color:var(--game-accent);
  box-shadow:0 0 0 6px rgba(var(--game-accent-rgb),.18),0 10px 22px rgba(0,0,0,.2);
}
.game-card:disabled{
  opacity:1;
  cursor:not-allowed;
  border-style:dashed;
  border-color:var(--line);
  color:var(--muted);
  background:var(--panel2);
  box-shadow:none;
}
.game-copy{
  grid-area:copy;
  position:relative;
  z-index:2;
  display:flex;
  min-width:0;
  padding:50px 0 3px 2px;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
}
.game-icon{
  position:absolute;
  z-index:3;
  top:12px;
  left:12px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  color:#fff;
  background:var(--game-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 4px 10px rgba(0,0,0,.24);
  font-size:1.28rem;
  line-height:1;
}
.game-name{
  display:block;
  max-width:100%;
  color:inherit;
  font-size:1rem;
  font-weight:800;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.game-status{
  display:inline-flex;
  max-width:100%;
  margin-top:7px;
  padding:4px 7px;
  border:1px solid rgba(var(--game-accent-rgb),.34);
  border-radius:999px;
  color:var(--game-accent-label);
  background:rgba(var(--game-accent-rgb),.17);
  font-size:.68rem;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}
.game-art{
  grid-area:art;
  position:relative;
  z-index:1;
  display:block;
  overflow:hidden;
  min-width:0;
  border:1px solid rgba(var(--game-accent-rgb),.14);
  border-radius:15px;
  background:var(--panel2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.game-art::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:24%;
  background:linear-gradient(90deg,var(--game-surface),rgba(17,24,39,0));
  pointer-events:none;
}
.game-visual{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  filter:saturate(1.02) contrast(1.04);
}
.game-card[data-game-id="othello"] .game-visual{object-position:62% center}
.game-card[data-game-id="shogi"] .game-visual{object-position:56% center}
.game-card[data-game-id="chess"] .game-visual{object-position:53% center}
.game-card[data-game-id="go"] .game-visual{object-position:58% center}
.game-card:disabled .game-icon{color:var(--muted);background:var(--panel);border-color:var(--line);box-shadow:none}
.game-card:disabled .game-status{color:var(--muted);background:var(--panel);border-color:var(--line)}
.game-card:disabled .game-art{border-color:var(--line)}
.game-card:disabled .game-visual{filter:grayscale(.45) brightness(.68);opacity:.58}

:root[data-theme="light"] .game-card{
  --game-surface:#fff;
  color:#172033;
  background:#fff;
  border-color:rgba(var(--game-accent-rgb),.72);
  box-shadow:0 7px 18px rgba(15,23,42,.09),inset 0 0 0 1px rgba(var(--game-accent-rgb),.03);
}
:root[data-theme="light"] .game-card.selected{
  background:linear-gradient(145deg,rgba(var(--game-accent-rgb),.11),rgba(var(--game-accent-rgb),.015) 54%),#fff;
  box-shadow:0 0 0 2px rgba(var(--game-accent-rgb),.18),0 9px 20px rgba(15,23,42,.11);
}
:root[data-theme="light"] .game-card .game-status{color:var(--game-accent-label-light);background:rgba(var(--game-accent-rgb),.11);border-color:rgba(var(--game-accent-rgb),.26)}
:root[data-theme="light"] .game-art{background:#eef2f7;border-color:rgba(var(--game-accent-rgb),.12);box-shadow:inset 0 0 0 1px rgba(15,23,42,.03)}
:root[data-theme="light"] .game-art::after{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
@media(hover:hover){
  :root[data-theme="light"] .game-card:not(:disabled):hover{
    background:linear-gradient(145deg,rgba(var(--game-accent-rgb),.075),rgba(var(--game-accent-rgb),.01) 54%),#fff;
    box-shadow:0 0 0 1px rgba(var(--game-accent-rgb),.16),0 9px 20px rgba(15,23,42,.11);
  }
}
:root[data-theme="light"] .game-card:not(:disabled):active{background:linear-gradient(145deg,rgba(var(--game-accent-rgb),.15),rgba(var(--game-accent-rgb),.02) 54%),#fff;box-shadow:inset 0 0 0 2px rgba(var(--game-accent-rgb),.14),0 5px 12px rgba(15,23,42,.1)}
:root[data-theme="light"] .game-card:disabled{color:#64748b;background:#f8fafc;border-color:#94a3b8;box-shadow:none}
:root[data-theme="light"] .game-card:disabled .game-art::after{background:linear-gradient(90deg,#f8fafc,rgba(248,250,252,0))}

.difficulty-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:22px}
.difficulty-card label{font-weight:700}
.difficulty-card select{width:min(48%,180px);min-height:48px;padding:0 12px;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:14px}

@media(max-width:390px){
  .game-card{min-height:122px;padding:9px;gap:7px}
  .game-icon{top:11px;left:11px;width:38px;height:38px;font-size:1.18rem}
  .game-copy{padding:47px 0 2px 1px}
  .game-name{font-size:.94rem}
  .game-status{padding:4px 6px;font-size:.65rem}
  .game-art{border-radius:14px}
}
@media(max-width:350px){
  .game-grid{gap:9px}
  .game-card{grid-template-columns:minmax(0,44%) minmax(0,56%);min-height:112px;padding:8px;gap:6px}
  .game-icon{top:10px;left:10px;width:34px;height:34px;font-size:1.05rem}
  .game-copy{padding:42px 0 1px}
  .game-name{font-size:.88rem}
  .game-status{padding:3px 5px;font-size:.61rem}
  .hero h2{font-size:1.65rem}
}