@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

:root {
    --rpg-bg: #0a0a1a;
    --rpg-border: #f0e68c;
    --rpg-border-dark: #b8860b;
    --rpg-btn-bg: #1a1a3a;
    --rpg-btn-active: #3a3a6a;
}
* { box-sizing: border-box; }

#dodo-rpg-wrapper {
    position: relative;
    max-width: 800px;
    margin: 20px auto;
    font-family: 'DotGothic16', monospace;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    background: var(--rpg-bg);
    border: 3px solid var(--rpg-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(240,230,140,0.15);
}
#dodo-rpg-wrapper.fullscreen {
    position: fixed; top:0; left:0;
    width: 100vw; height: 100vh;
    max-width: none; margin: 0;
    border: none; border-radius: 0;
    z-index: 999999;
    display: flex; flex-direction: column;
}

#dodo-rpg-container {
    position: relative; width: 100%;
    aspect-ratio: 4 / 3;
    background: #000; overflow: hidden;
}
.fullscreen #dodo-rpg-container { flex:1; aspect-ratio:unset; }

#dodo-rpg-canvas {
    display: block; width:100%; height:100%;
    image-rendering: pixelated; image-rendering: crisp-edges;
}

/* ===== Toolbar ===== */
#dodo-rpg-toolbar {
    display: flex; gap: 8px; padding: 6px 10px;
    background: linear-gradient(180deg, #1a1a3a, #0d0d2a);
    border-top: 2px solid var(--rpg-border-dark);
    justify-content: flex-end;
}
#dodo-rpg-toolbar button {
    background: var(--rpg-btn-bg); border: 1px solid var(--rpg-border-dark);
    color: #fff; font-size: 18px; padding: 4px 10px;
    border-radius: 4px; cursor: pointer;
}
#dodo-rpg-toolbar button:active { background: var(--rpg-btn-active); }

/* ===== Mobile Controls ===== */
#dodo-rpg-controls {
    display: none;
    padding: 14px 20px;
    background: linear-gradient(180deg, #12122a, #0a0a1a);
    border-top: 2px solid var(--rpg-border-dark);
    justify-content: space-between;
    align-items: center;
}

/* ===== D-Pad: 単純3列グリッド、HTMLの並び順 = 見た目 ===== */
#dodo-rpg-dpad {
    display: grid;
    grid-template-columns: 58px 58px 58px;
    grid-template-rows: 58px 58px 58px;
    gap: 4px;
}
.dpad-empty {
    /* 空セル（角の4つ＋中央） */
}
.dpad-btn {
    background: var(--rpg-btn-bg);
    border: 2px solid var(--rpg-border-dark);
    color: #ffdd44;
    font-size: 24px;
    border-radius: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.dpad-btn:active, .dpad-btn.pressed {
    background: var(--rpg-btn-active);
    border-color: var(--rpg-border);
    transform: scale(0.92);
}

/* ===== Action Buttons ===== */
#dodo-rpg-action-btns {
    display: flex; gap: 16px; align-items: center;
}
.action-btn {
    width: 70px; height: 70px; border-radius: 50%;
    font-size: 22px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    font-family: 'DotGothic16', monospace;
}
#btn-a {
    background: radial-gradient(circle at 35% 35%, #ff6644, #cc3311);
    border: 3px solid #ff8866; color: #fff;
    box-shadow: 0 4px 10px rgba(255,50,0,0.4);
}
#btn-b {
    background: radial-gradient(circle at 35% 35%, #4466ff, #2233cc);
    border: 3px solid #6688ff; color: #fff;
    box-shadow: 0 4px 10px rgba(0,50,255,0.4);
}
.action-btn:active, .action-btn.pressed {
    transform: scale(0.88); box-shadow: none;
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    #dodo-rpg-wrapper { margin:0; border:none; border-radius:0; max-width:100%; }
    #dodo-rpg-controls { display: flex; }
    #dodo-rpg-toolbar { justify-content: center; }
}
@media (hover: none) and (pointer: coarse) {
    #dodo-rpg-controls { display: flex; }
}
.fullscreen #dodo-rpg-controls { display: flex; }