.othello-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:calc(var(--space-16) + var(--space-2)) var(--space-4) var(--space-8);gap:var(--space-4);max-width:1000px;margin:0 auto;width:100%}.othello-intro{width:100%;max-width:540px;padding:var(--space-8);display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center;margin-top:var(--space-8)}.othello-intro h1{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:900;letter-spacing:-.03em}.othello-intro p{color:var(--color-text-secondary);line-height:1.6}.othello-modes{display:flex;gap:var(--space-3);width:100%}.othello-modes button{flex:1}.othello-hud{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);padding:var(--space-3) var(--space-5);border-radius:var(--radius-xl);box-shadow:0 4px 12px #0003}.hud-score-panel{display:flex;gap:var(--space-3)}.score-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);border:2px solid transparent;background:var(--color-surface-sunken);box-shadow:inset 0 2px 4px #0000004d}.score-card.black.active,.score-card.white.active{border-color:var(--game-accent)}.score-label{font-size:var(--text-xs);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary)}.score-value{font-family:var(--font-display);font-weight:900;font-size:var(--text-lg)}.hud-turn-indicator{font-weight:800;font-size:var(--text-sm);color:var(--color-text-primary)}.game-play-area{display:flex;gap:var(--space-6);width:100%;align-items:flex-start}.grids-section{flex:1}.othello-board-grids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);width:100%}.othello-layer{background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-3);box-shadow:0 8px 20px #00000040;display:flex;flex-direction:column;gap:var(--space-2)}.layer-title{font-size:11px;font-weight:900;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;text-align:center}.layer-grid{display:flex;flex-direction:column;border:2px solid var(--color-border-default);background:#14532d;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1 / 1}.othello-row{display:flex;flex:1}.othello-cell{flex:1;aspect-ratio:1 / 1;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:background var(--duration-fast) ease}.othello-cell:hover{background:#ffffff0d}.othello-cell[data-hint]:after{content:"";width:6px;height:6px;border-radius:50%;background:#fff6;pointer-events:none}.othello-piece{width:80%;height:80%;border-radius:50%;box-shadow:0 4px 10px #0006,inset 0 -2px 4px #0003;border:1px solid rgba(0,0,0,.15);animation:pop var(--duration-fast) var(--ease-spring)}.othello-piece.black{background:radial-gradient(circle at 35% 35%,#555,#111 60%,#000)}.othello-piece.white{background:radial-gradient(circle at 35% 35%,#fff,#ddd 60%,#999)}.othello-piece.last-move{box-shadow:0 4px 10px #0006,inset 0 -2px 4px #0003,0 0 0 3px var(--game-accent);animation:pulse-ring-othello 1.5s infinite ease-in-out}.othello-piece.flip-to-black{animation:flipToBlack 1.2s cubic-bezier(.4,0,.2,1) forwards}.othello-piece.flip-to-white{animation:flipToWhite 1.2s cubic-bezier(.4,0,.2,1) forwards}@keyframes pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse-ring-othello{0%,to{box-shadow:0 4px 10px #0006,inset 0 -2px 4px #0003,0 0 0 2px var(--game-accent)}50%{box-shadow:0 4px 10px #0006,inset 0 -2px 4px #0003,0 0 0 5px var(--game-accent)}}@keyframes flipToBlack{0%{transform:rotateY(180deg);background:radial-gradient(circle at 35% 35%,#fff,#ddd 60%,#999)}49%{background:radial-gradient(circle at 35% 35%,#fff,#ddd 60%,#999)}50%{transform:rotateY(90deg);background:radial-gradient(circle at 35% 35%,#555,#111 60%,#000)}to{transform:rotateY(0);background:radial-gradient(circle at 35% 35%,#555,#111 60%,#000)}}@keyframes flipToWhite{0%{transform:rotateY(180deg);background:radial-gradient(circle at 35% 35%,#555,#111 60%,#000)}49%{background:radial-gradient(circle at 35% 35%,#555,#111 60%,#000)}50%{transform:rotateY(90deg);background:radial-gradient(circle at 35% 35%,#fff,#ddd 60%,#999)}to{transform:rotateY(0);background:radial-gradient(circle at 35% 35%,#fff,#ddd 60%,#999)}}.cube-section{width:280px;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);padding:var(--space-4);border-radius:var(--radius-xl);box-shadow:0 12px 28px #0000004d;flex-shrink:0}.cube-title{font-size:var(--text-xs);font-weight:800;text-transform:uppercase;color:var(--color-text-secondary)}#cube-canvas{background:var(--color-surface-sunken);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);cursor:grab;touch-action:none}#cube-canvas:active{cursor:grabbing}.game-footer{display:flex;justify-content:center;width:100%}@media (max-width: 900px){.game-play-area{flex-direction:column;align-items:center}.othello-board-grids{grid-template-columns:repeat(2,1fr)}.cube-section{width:100%;max-width:380px}#cube-canvas{width:100%;height:auto;aspect-ratio:1 / 1}}@media (max-width: 480px){.othello-board-grids{gap:var(--space-2)}.othello-layer{padding:var(--space-2)}.layer-title{font-size:9px}}