/* =========================================================
   SHOCKER v65 — FIFTEEN MINUTE DUEL CLOCK
   v64の帝国式バトルテーブルへ、対局時計を一体化する。
   ========================================================= */
body.v45-battle-active.v64-shocker-battle #turn-info.v65-clock-mounted {
    position:relative !important;
    z-index:74 !important;
    display:grid !important;
    grid-template-columns:minmax(104px,1fr) minmax(126px,auto) minmax(104px,1fr) !important;
    align-items:stretch !important;
    justify-self:center !important;
    width:min(660px,calc(100vw - 18px)) !important;
    min-width:0 !important;
    min-height:30px !important;
    margin:0 !important;
    padding:2px !important;
    overflow:hidden !important;
    border:1px solid rgba(217,183,102,.72) !important;
    border-inline-width:1px !important;
    color:#eadfbf !important;
    background:
        linear-gradient(90deg,rgba(9,55,62,.9),rgba(4,7,9,.97) 31% 69%,rgba(83,13,24,.9)) !important;
    box-shadow:
        0 4px 14px rgba(0,0,0,.58),
        inset 0 1px rgba(255,239,190,.09) !important;
    clip-path:none !important;
    font-family:"Courier New","Yu Gothic",monospace !important;
    letter-spacing:0 !important;
    text-shadow:0 2px 4px #000 !important;
}

body.v45-battle-active.v64-shocker-battle #turn-info.v65-clock-mounted::before,
body.v45-battle-active.v64-shocker-battle #turn-info.v65-clock-mounted::after {
    content:"";
    position:absolute;
    top:3px;
    bottom:3px;
    width:1px;
    z-index:2;
    background:linear-gradient(transparent,rgba(255,231,160,.75),transparent);
    pointer-events:none;
}
body.v45-battle-active.v64-shocker-battle #turn-info.v65-clock-mounted::before { left:31%; }
body.v45-battle-active.v64-shocker-battle #turn-info.v65-clock-mounted::after { right:31%; }

.v65-clock-panel {
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding:2px 12px;
    border:1px solid transparent;
    overflow:hidden;
    transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.v65-clock-panel[data-side="opp"] {
    flex-direction:row-reverse;
    text-align:right;
}
.v65-clock-panel::before {
    content:"♦";
    flex:0 0 auto;
    color:rgba(236,213,152,.5);
    font:700 9px/1 Georgia,serif;
}
.v65-clock-panel[data-side="player"]::before { content:"♠"; }
.v65-clock-label {
    color:rgba(236,225,194,.68);
    font:700 7px/1 "Courier New",monospace;
    letter-spacing:.18em;
    white-space:nowrap;
}
.v65-clock-time {
    min-width:4.8ch;
    color:#f1e4bc;
    font:800 clamp(14px,2.25vh,19px)/1 "Courier New",monospace;
    font-variant-numeric:tabular-nums lining-nums;
    letter-spacing:.025em;
    white-space:nowrap;
}

.v65-clock-panel.is-active[data-side="player"] {
    border-color:rgba(83,205,208,.74);
    background:linear-gradient(90deg,rgba(17,104,111,.72),rgba(8,42,47,.35));
    box-shadow:inset 3px 0 #71d8d8,0 0 12px rgba(56,184,188,.3);
}
.v65-clock-panel.is-active[data-side="opp"] {
    border-color:rgba(229,93,104,.76);
    background:linear-gradient(270deg,rgba(128,26,39,.72),rgba(55,8,15,.35));
    box-shadow:inset -3px 0 #ed747b,0 0 12px rgba(202,51,65,.3);
}
.v65-clock-panel.is-active .v65-clock-time { color:#fff7d7; }
.v65-clock-panel.is-warning .v65-clock-time {
    color:#ffd36f;
    text-shadow:0 0 10px rgba(255,178,48,.6),0 2px 3px #000;
}
.v65-clock-panel.is-critical {
    border-color:#ff5a57 !important;
    background-color:rgba(109,12,17,.66) !important;
    animation:v65-clock-danger .8s steps(2,end) infinite;
}
.v65-clock-panel.is-critical .v65-clock-time,
.v65-clock-panel.is-expired .v65-clock-time { color:#ff8580; }
.v65-clock-panel.is-expired {
    border-color:#ff4541 !important;
    background:#430407 !important;
    box-shadow:inset 0 0 13px rgba(255,32,30,.38) !important;
}

.v65-clock-center {
    position:relative;
    display:grid;
    place-content:center;
    gap:1px;
    min-width:0;
    padding:1px 12px;
    text-align:center;
    background:linear-gradient(180deg,rgba(34,25,14,.72),rgba(3,5,7,.8));
}
.v65-turn-line {
    color:#e8d69f;
    font:700 clamp(7px,1.2vh,9px)/1 "Courier New",monospace;
    letter-spacing:.14em;
    white-space:nowrap;
}
body.v45-battle-active.v64-shocker-battle #turn-info #turn-count {
    color:var(--v64-gold-bright) !important;
    font-size:1.12em !important;
}
#v65-clock-state {
    color:rgba(231,219,184,.65);
    font:700 clamp(6px,1vh,8px)/1 "Courier New",monospace;
    letter-spacing:.1em;
    white-space:nowrap;
}
#turn-info[data-clock-state="player"] #v65-clock-state { color:#8ee2df; }
#turn-info[data-clock-state="opp"] #v65-clock-state { color:#f29b9f; }
#turn-info[data-clock-state="defense_chain"] #v65-clock-state {
    color:#ffe08b;
    text-shadow:0 0 8px rgba(255,194,66,.55);
}
#turn-info[data-clock-state="timeout"] #v65-clock-state { color:#ff7671; }

@keyframes v65-clock-danger {
    50% { filter:brightness(1.18); }
}

@media (max-width:700px) {
    body.v45-battle-active.v64-shocker-battle #turn-info.v65-clock-mounted {
        grid-template-columns:minmax(76px,1fr) minmax(104px,auto) minmax(76px,1fr) !important;
        width:calc(100vw - 12px) !important;
        min-height:27px !important;
        padding:1px !important;
    }
    .v65-clock-panel { gap:4px; padding:1px 6px; }
    .v65-clock-panel::before { display:none; }
    .v65-clock-label { font-size:6px; letter-spacing:.1em; }
    .v65-clock-time { font-size:clamp(12px,3.15vw,16px); }
    .v65-clock-center { padding-inline:6px; }
    .v65-turn-line { font-size:7px; letter-spacing:.08em; }
    #v65-clock-state { font-size:6px; letter-spacing:.05em; }
}

@media (max-width:390px) {
    body.v45-battle-active.v64-shocker-battle #turn-info.v65-clock-mounted {
        grid-template-columns:minmax(61px,1fr) minmax(91px,auto) minmax(61px,1fr) !important;
        min-width:0 !important;
        padding-inline:1px !important;
    }
    .v65-clock-panel { justify-content:center; padding-inline:3px; }
    .v65-clock-label { display:none; }
    .v65-clock-time { min-width:4.5ch; font-size:12px; }
    .v65-clock-center { padding-inline:3px; }
    .v65-turn-line { letter-spacing:.04em; }
    #v65-clock-state { font-size:5.5px; }
}

@media (orientation:landscape) and (max-height:500px) {
    body.v45-battle-active.v64-shocker-battle #turn-info.v65-clock-mounted {
        min-height:24px !important;
    }
    .v65-clock-time { font-size:13px; }
    .v65-clock-panel { padding-block:0; }
}

@media (prefers-reduced-motion:reduce) {
    .v65-clock-panel.is-critical { animation:none; }
}
