:root {
    --bg-color: #111111;
    --panel-bg: rgba(30, 30, 30, 0.88);
    --panel-border: rgba(255, 255, 255, 0.1);
    --text-main: #f0f0f0;
    --text-dim: #a0a0a0;
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --correct: #22c55e;
    --wrong: #ef4444;
    --gold: #fbbf24;
    --axis-front: #3b82f6;
    --axis-side: #ef4444;
    --axis-top: #22c55e;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: none; }
html { height:100%; overflow:hidden; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow: hidden;
    width: 100vw; height: 100vh;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    touch-action: none; /* app is a fixed full-screen canvas: no native pinch-zoom, double-tap-zoom, or panning anywhere */
}
#canvas-container { position: fixed; top:0; left:0; width:100%; height:100%; z-index:1; touch-action:none; }
.main-title {
    position: absolute; top:20px; left:50%; transform:translateX(-50%);
    z-index:100; font-size:22px; font-weight:700;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    white-space:nowrap; pointer-events:none;
}
.hud-stats {
    position:absolute; top:12px; left:12px; z-index:1000;
    background:var(--panel-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--panel-border); padding:8px 12px; border-radius:12px;
    pointer-events:none; min-width:110px; box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.hud-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:2px; }
.hud-row:last-child { margin-bottom:0; }
.hud-label { font-size:10px; color:rgba(255,255,255,0.45); font-weight:600; }
.hud-value { font-size:15px; font-weight:800; }
.hud-value.score-val { color:var(--accent); }
.cut-instructions {
    position:absolute; top:64px; left:50%; transform:translateX(-50%);
    z-index:100; background:rgba(50,50,50,0.85); backdrop-filter:blur(8px);
    border:1px solid var(--panel-border); padding:7px 16px; border-radius:20px;
    font-size:13px; pointer-events:none; white-space:normal; text-align:center;
    max-width:min(92vw, 480px); width:max-content; transition:all 0.3s;
}
.cut-instructions.warning { color:var(--wrong); border-color:rgba(239,68,68,0.35); }
.startup-guide {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:2000; background:rgba(0,0,0,0.88); backdrop-filter:blur(16px);
    border:1px solid rgba(167,139,250,0.5); padding:16px 40px 16px 20px;
    border-radius:16px; font-size:14px; font-weight:500; line-height:1.5;
    display:flex; align-items:center; flex-wrap:wrap; gap:2px 8px; justify-content:center;
    white-space:normal; text-align:center; box-sizing:border-box;
    width:min(94vw, 400px);
    box-shadow:0 12px 48px rgba(0,0,0,0.5); transition:all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.startup-guide.hidden { opacity:0; transform:translate(-50%,calc(-50% - 20px)); pointer-events:none; }
.close-guide-btn {
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:rgba(255,255,255,0.5);
    font-size:20px; line-height:1; cursor:pointer; padding:4px; min-height:auto; width:auto; flex:none;
}
.close-guide-btn:hover { color:#fff; background:none; }

/* Projection Panel (Mode A) */
.proj-panel {
    position:fixed; top:96px; left:16px; width:166px; z-index:1500;
    background:var(--panel-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--panel-border); border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5); overflow:hidden; pointer-events:auto; user-select:none;
}
.proj-panel.hidden { display:none !important; }
.proj-panel-header { padding:7px 12px; background:rgba(167,139,250,0.12); border-bottom:1px solid var(--panel-border); }
.proj-panel-title { font-size:11px; font-weight:700; color:#c4b5fd; letter-spacing:0.03em; }
.proj-views-list { padding:8px; display:flex; flex-direction:column; gap:8px; }
.proj-view-item { display:flex; flex-direction:column; gap:3px; cursor:pointer; }
.proj-view-item:hover .proj-view-label { text-decoration:underline; }
.proj-view-item:active .proj-canvas { filter:brightness(1.25); }
.proj-view-label { font-size:10px; font-weight:700; color:var(--text-dim); letter-spacing:0.05em; }
.proj-canvas {
    width:100%; aspect-ratio:1/1; border-radius:5px;
    border:2px solid rgba(255,255,255,0.08); display:block;
    transition:border-color 0.3s, box-shadow 0.3s;
}
.proj-canvas.view-correct { border-color:var(--correct); box-shadow:0 0 10px rgba(34,197,94,0.4); }
.proj-canvas.view-wrong   { border-color:var(--wrong);   box-shadow:0 0 10px rgba(239,68,68,0.4); }

/* Axis colors — match the 正面/真横/真上 labels floating in the 3D scene */
.proj-view-label.axis-front, .choice-dir-label.axis-front { color: var(--axis-front); }
.proj-view-label.axis-side,  .choice-dir-label.axis-side  { color: var(--axis-side); }
.proj-view-label.axis-top,   .choice-dir-label.axis-top   { color: var(--axis-top); }
.proj-canvas.axis-front { border-color: rgba(59,130,246,0.4); }
.proj-canvas.axis-side  { border-color: rgba(239,68,68,0.4); }
.proj-canvas.axis-top   { border-color: rgba(34,197,94,0.4); }

/* Choice Panel (Mode B) */
.choice-panel {
    position:fixed; top:96px; left:16px; width:268px;
    max-height:calc(100vh - 200px); overflow-y:auto; z-index:1500;
    background:var(--panel-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--panel-border); border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.choice-panel.hidden { display:none !important; }
.choice-panel-header {
    padding:7px 12px; background:#2a2440;
    border-bottom:1px solid var(--panel-border); font-size:11px; font-weight:700; color:#c4b5fd;
    position:sticky; top:0; z-index:5;
    box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.choice-direction { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.06); }
.choice-direction:last-child { border-bottom:none; }
.choice-dir-label { font-size:10px; font-weight:700; color:var(--text-dim); letter-spacing:0.04em; margin-bottom:6px; cursor:pointer; }
.choice-dir-label:hover { text-decoration:underline; }
.choice-row { display:flex; gap:6px; }
.choice-item {
    flex:1; cursor:pointer; border-radius:6px;
    border:2px solid rgba(255,255,255,0.1);
    overflow:hidden; transition:all 0.18s ease; aspect-ratio:1/1; position:relative;
}
.choice-item:hover { border-color:rgba(167,139,250,0.5); transform:scale(1.04); }
.choice-item.axis-front { border-color: rgba(59,130,246,0.35); }
.choice-item.axis-side  { border-color: rgba(239,68,68,0.35); }
.choice-item.axis-top   { border-color: rgba(34,197,94,0.35); }
.choice-item.selected      { border-color:var(--accent); box-shadow:0 0 10px rgba(167,139,250,0.55); }
@keyframes correctChoiceBlink {
    0%, 100% { box-shadow:0 0 10px rgba(251,191,36,0.5);  border-color:rgba(251,191,36,0.85); }
    50%      { box-shadow:0 0 20px rgba(251,191,36,0.95); border-color:var(--gold); }
}
/* Gold blink instead of green — green is already used for the 真上 axis,
   so a green "correct" highlight there reads as an axis color, not a verdict. */
.choice-item.correct-choice{ border-color:var(--gold) !important; animation:correctChoiceBlink 0.9s ease-in-out infinite; }
.choice-item.wrong-choice  { border-color:var(--wrong)   !important; box-shadow:0 0 10px rgba(239,68,68,0.6) !important; }
.choice-item canvas { width:100%; height:100%; display:block; }
.choice-number { position:absolute; top:2px; left:4px; font-size:9px; font-weight:700; color:rgba(255,255,255,0.4); pointer-events:none; }

/* Candidate navigator (Mode A 超やさしい) */
.candidate-nav.hidden { display:none !important; }
.candidate-arrow {
    position:fixed; top:60%; transform:translateY(-50%); z-index:1400;
    display:flex; align-items:center; gap:6px;
    padding:10px 16px; border-radius:999px;
    background:var(--panel-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--panel-border); color:#fff;
    font-size:13px; font-weight:700; cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,0.5); transition:all 0.2s; min-height:auto; white-space:nowrap;
}
.candidate-arrow:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-50%) scale(1.06); }
.candidate-arrow svg { width:20px; height:20px; flex:none; }
.candidate-arrow-left  { left: calc(50% - 320px); }
.candidate-arrow-right { right: calc(50% - 320px); }
.candidate-label {
    position:fixed; bottom:104px; left:50%; transform:translateX(-50%); z-index:1400;
    background:var(--panel-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--panel-border); border-radius:20px; padding:6px 18px;
    font-size:13px; font-weight:700; color:#c4b5fd; pointer-events:none;
    box-shadow:0 4px 16px rgba(0,0,0,0.4);
}

/* Bottom panel */
#ui-container {
    position:absolute; bottom:0; left:0; width:100%; z-index:10;
    pointer-events:none; display:flex; flex-direction:column; align-items:center;
    padding:20px; padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
}
.panel {
    background:var(--panel-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--panel-border); border-radius:12px; padding:12px 14px;
    pointer-events:auto; box-shadow:0 8px 32px rgba(0,0,0,0.5);
    width:95%; max-width:440px; display:flex; flex-direction:column; gap:10px;
}
.mode-tabs { display:flex; gap:6px; }
.mode-tab {
    flex:1; padding:8px 4px; font-size:13px; font-weight:600;
    background:rgba(255,255,255,0.05); border:1px solid var(--panel-border);
    border-radius:8px; color:var(--text-dim); cursor:pointer; transition:all 0.2s;
    min-height:40px; white-space:nowrap;
}
.mode-tab:hover { background:rgba(255,255,255,0.1); color:var(--text-main); }
.mode-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.game-controls { display:flex; gap:8px; align-items:center; }
select {
    flex:1; padding:8px 10px; background:rgba(255,255,255,0.05);
    border:1px solid var(--panel-border); border-radius:8px;
    color:var(--text-main); font-family:inherit; font-size:13px;
    cursor:pointer; outline:none; min-height:40px; transition:all 0.2s;
}
select:hover { background:rgba(255,255,255,0.1); }
select option { background:#2a2a2a; color:#fff; }
button {
    padding:8px 12px; background:rgba(255,255,255,0.05);
    border:1px solid var(--panel-border); border-radius:8px;
    color:var(--text-main); font-family:inherit; font-weight:600; font-size:13px;
    cursor:pointer; transition:all 0.2s; white-space:nowrap; min-height:40px; flex:none;
}
button:hover { background:rgba(255,255,255,0.15); }
.btn-accent { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-hint { background:rgba(253,224,71,0.14); border-color:rgba(253,224,71,0.4); color:#fde047; }
.btn-hint:hover { background:rgba(253,224,71,0.24); border-color:rgba(253,224,71,0.6); }
@keyframes hintBtnBlink {
    0%, 100% { background:rgba(253,224,71,0.14); border-color:rgba(253,224,71,0.4); }
    50%      { background:rgba(253,224,71,0.4);  border-color:rgba(253,224,71,0.9); }
}
.btn-hint.hint-active { animation:hintBtnBlink 2.4s ease-in-out infinite; }
.action-btn { flex:1; }

@keyframes hintPulse {
    0%, 100% { box-shadow:0 0 6px rgba(253,224,71,0.35); border-color:rgba(253,224,71,0.55); }
    50%      { box-shadow:0 0 16px rgba(253,224,71,0.85); border-color:rgba(253,224,71,1); }
}
.proj-canvas.view-hint { animation:hintPulse 1.1s ease-in-out infinite; }

/* Side buttons */
.side-button {
    position:fixed; right:24px; z-index:1000;
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
    border-radius:50%; color:white; text-decoration:none; transition:all 0.3s;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:pointer;
    padding:0; box-sizing:border-box;
}
.home-button  { top:24px; }
.zoom-button  { top:76px; }
.clear-button { top:128px; }
.side-button:hover { background:var(--accent); border-color:var(--accent); transform:scale(1.1); box-shadow:0 0 15px rgba(167,139,250,0.45); }
.side-button svg { width:20px; height:20px; stroke:currentColor; }

/* Result overlay */
.result-overlay {
    position:fixed; inset:0; z-index:5000;
    background:rgba(0,0,0,0.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
}
.result-overlay.hidden { display:none !important; }
.result-content {
    background:rgba(25,25,30,0.97); border:1px solid var(--panel-border); border-radius:22px;
    padding:40px 48px; text-align:center; box-shadow:0 24px 80px rgba(0,0,0,0.8);
    min-width:280px; max-width:380px; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.result-icon    { font-size:68px; line-height:1; }
.result-title   { font-size:30px; font-weight:800; }
.result-title.correct { color:var(--correct); }
.result-title.wrong   { color:var(--wrong); }
.result-message { font-size:14px; color:var(--text-dim); line-height:1.65; }
.result-next-btn, .result-retry-btn, .result-finish-btn {
    width:100%; padding:13px 20px; border-radius:10px;
    font-size:15px; font-weight:700; flex:none; min-height:auto;
}
.result-next-btn   { background:var(--accent); border-color:var(--accent); color:#fff; }
.result-next-btn:hover   { background:var(--accent-hover); border-color:var(--accent-hover); }
.result-retry-btn  { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); color:var(--text-dim); }
.result-retry-btn:hover  { background:rgba(255,255,255,0.12); color:var(--text-main); }
.result-finish-btn { background:var(--accent); border-color:var(--accent); color:#fff; }
.result-finish-btn:hover { background:var(--accent-hover); }

/* Setup modal (mode + difficulty picker) */
.setup-content { width:100%; gap:16px; }
.setup-title { font-size:24px; }
.setup-mode-tabs { width:100%; }
.setup-difficulty-select {
    width:100%; padding:10px 12px; background:rgba(255,255,255,0.06);
    border:1px solid var(--panel-border); border-radius:8px;
    color:var(--text-main); font-family:inherit; font-size:14px;
    cursor:pointer; outline:none; min-height:44px; transition:all 0.2s;
}
.setup-difficulty-select:hover { background:rgba(255,255,255,0.12); }

/* Bottom panel status row */
.panel-status-row { display:flex; justify-content:space-between; align-items:center; }
.mode-diff-label { font-size:12px; font-weight:700; color:var(--text-dim); letter-spacing:0.02em; }
.link-btn {
    background:none; border:none; color:var(--accent); font-family:inherit;
    font-size:12px; font-weight:700; padding:2px 4px; min-height:auto; flex:none;
    text-decoration:underline; cursor:pointer;
}
.link-btn:hover { color:var(--accent-hover); background:none; }

.hidden { display:none !important; }
.pc-only { }
.touch-only { display:none; }

@media (max-width:600px) {
    .main-title { font-size:17px; top:12px; }
    .hud-stats { top:8px; left:8px; padding:6px 10px; min-width:auto; }
    .hud-label { font-size:9px; } .hud-value { font-size:13px; }
    .cut-instructions { font-size:11px; padding:6px 12px; top:50px; max-width:90vw; }
    .proj-panel {
        top:auto; left:0; bottom:112px; right:0; width:100%;
        border-radius:12px 12px 0 0; border-left:none; border-right:none;
    }
    .proj-panel-header { display:none; }
    .proj-views-list { flex-direction:row; padding:8px 10px; gap:10px; }
    .proj-view-item { flex:1; } .proj-view-label { text-align:center; }
    /* Mobile display order: 真横→正面→真上 (still front/side/top in the DOM
       and for data-axis click handling; this only reorders visually) */
    #proj-item-side  { order:1; }
    #proj-item-front { order:2; }
    #proj-item-top   { order:3; }
    .choice-panel {
        top:auto; left:0; bottom:112px; right:0; width:100%; max-height:240px;
        border-radius:12px 12px 0 0; border-left:none; border-right:none;
    }
    .candidate-arrow { padding:8px 12px; font-size:11px; top:56%; }
    .candidate-arrow svg { width:18px; height:18px; }
    .candidate-arrow-left  { left: calc(50% - 190px); }
    .candidate-arrow-right { right: calc(50% - 190px); }
    .candidate-label { bottom:150px; font-size:12px; padding:5px 14px; }
    .side-button { width:38px; height:38px; right:12px; }
    .home-button { top:16px; } .zoom-button { top:62px; } .clear-button { top:108px; }
    .side-button svg { width:17px; height:17px; }
    .panel { padding:10px 12px; gap:8px; }
    .mode-tab { font-size:11px; padding:6px 2px; min-height:36px; }
    .action-btn { font-size:12px; padding:6px 8px; min-height:36px; }
    select { font-size:12px; min-height:36px; }
    .result-content { padding:30px 24px; margin:0 16px; }
    .result-icon { font-size:52px; } .result-title { font-size:24px; } .result-message { font-size:12px; }
    .result-next-btn, .result-retry-btn, .result-finish-btn { font-size:14px; padding:11px; }
    .pc-only { display:none; }
    .touch-only { display:inline; }
    .startup-guide {
        font-size:12px; padding:14px 34px 14px 16px; width:94vw;
        gap:2px 6px; line-height:1.45;
    }
    .close-guide-btn { right:6px; font-size:18px; }
}