/* ============================================================
   DIARY.CSS — styling for the dual-screen diary reader.
   Loaded only on diary.html, on top of the shared style.css.
   ============================================================ */

.ds-wrap{display:flex;justify-content:center;padding:4px 0 2px}

.ds-console{
  width:min(640px,100%);
  background:linear-gradient(160deg,#1c0f1a,#0a050a 65%);
  border:3px solid var(--pink);
  border-radius:24px;
  padding:16px 16px 18px;
  box-shadow:6px 6px 0 var(--shadow), inset 0 0 0 2px rgba(255,157,204,.14);
  position:relative;
}

.ds-topbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ds-led{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--hot);box-shadow:0 0 6px 2px rgba(255,20,147,.75)}
.ds-dropdown{flex:1;min-width:0;font:9px/1.4 "Press Start 2P",monospace;background:#170d19;color:var(--pale);border:2px inset #ffa7d4;padding:6px;border-radius:3px}

.ds-screen{background:#050308;border:3px solid #3a1530;border-radius:9px;box-shadow:inset 0 0 16px rgba(255,79,163,.16),inset 0 0 0 2px #000}
.ds-screen-inner{padding:11px 12px 13px;min-height:150px;display:flex;flex-direction:column}

.ds-speaker{display:flex;gap:3px;justify-content:center;color:#3a1530;font-size:7px;letter-spacing:3px;margin-bottom:6px}
.ds-top-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px}
.ds-date{font:9px "Press Start 2P",monospace;color:var(--soft)}
.ds-title{font:11px/1.6 "Press Start 2P",monospace;color:#fff;text-shadow:0 0 6px rgba(255,79,163,.5)}

.ds-hinge{height:16px;display:flex;align-items:center;justify-content:center;gap:6px;margin:5px 0}
.ds-hinge span{width:5px;height:5px;border-radius:50%;background:#3a1530}

.ds-entry-text{font-family:Silkscreen,monospace;font-size:12.5px;line-height:1.75;color:var(--pale);overflow-y:auto;max-height:320px;padding-right:5px}
.ds-entry-text::-webkit-scrollbar{width:6px}
.ds-entry-text::-webkit-scrollbar-track{background:#0e090f}
.ds-entry-text::-webkit-scrollbar-thumb{background:var(--pink);border-radius:4px}

.ds-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:16px;gap:8px}

.dpad{width:82px;height:82px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;justify-self:start}
.dpad-up{grid-column:2;grid-row:1;border-radius:4px 4px 0 0}
.dpad-left{grid-column:1;grid-row:2;border-radius:4px 0 0 4px}
.dpad-center{grid-column:2;grid-row:2;background:#0a050a;border-radius:3px}
.dpad-right{grid-column:3;grid-row:2;border-radius:0 4px 4px 0}
.dpad-down{grid-column:2;grid-row:3;border-radius:0 0 4px 4px}
.dpad-btn{background:#20101c;border:2px outset #ff9dcc;color:var(--pale);font-size:12px;display:grid;place-items:center;cursor:pointer;padding:0}
.dpad-btn:active:not(:disabled){border-style:inset;transform:translateY(1px)}
.dpad-btn:disabled{opacity:.28;cursor:not-allowed}
.dpad-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

.ds-page-indicator{font:9px "Press Start 2P",monospace;color:var(--gray);justify-self:center;white-space:nowrap}

.abxy{position:relative;width:64px;height:64px;justify-self:end;opacity:.5}
.abxy-btn{position:absolute;width:22px;height:22px;border-radius:50%;background:#20101c;border:2px solid #ff9dcc;color:var(--pale);font:8px "Press Start 2P",monospace;display:grid;place-items:center;cursor:default}
.abxy-x{top:0;left:21px}
.abxy-y{top:21px;left:0}
.abxy-a{top:21px;left:42px}
.abxy-b{top:42px;left:21px}

.ds-hint{text-align:center;margin-top:12px;font-size:10px;color:var(--gray)}

.breather-box{display:flex;justify-content:center}
.breather-frame{display:inline-block;border:3px solid var(--pink);border-radius:12px;overflow:hidden;background:#170d19;box-shadow:4px 4px 0 var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.breather-frame img{display:block;width:200px;max-width:100%;height:auto}
.breather-frame:hover{transform:translateY(-4px);box-shadow:6px 8px 0 var(--shadow)}
.breather-frame:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:480px){
  .ds-console{padding:12px 12px 16px}
  .dpad{width:74px;height:74px}
  .abxy{width:56px;height:56px}
  .abxy-btn{width:20px;height:20px}
  .abxy-x{left:18px}.abxy-y{top:18px;left:0}.abxy-a{top:18px;left:36px}.abxy-b{top:36px;left:18px}
}