/* SunArb Interaction Action Bar V7
   Compact action controls directly under the game player.
   Visual/interaction layer only; POST endpoints and tokens remain unchanged. */

.engine-parity .interaction-action-panel{
    grid-area:interaction;
    align-self:start;
    min-width:0;
    margin:0;
    padding:12px;
    border:1px solid #1f385c;
    border-radius:16px;
    background:linear-gradient(180deg,rgba(10,24,46,.96),rgba(7,18,35,.98));
    box-shadow:0 12px 30px rgba(0,0,0,.18)
}
.engine-parity .interaction-action-panel>.section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 9px;
    padding:0;
    border:0
}
.engine-parity .interaction-action-panel>.section-heading h2{
    margin:0;
    padding:0;
    color:#dfe9f9;
    font-size:11px;
    font-weight:850;
    line-height:1.25;
    letter-spacing:0
}
.engine-parity .interaction-action-panel>.section-heading h2::before{display:none}
.engine-parity .interaction-heading-note{
    color:#6f86a8;
    font-size:8.5px;
    font-weight:700
}
.engine-parity .interaction-action-panel .interaction-notice{
    margin:0 0 9px;
    padding:9px 10px;
    border-radius:10px;
    font-size:10px;
    line-height:1.45
}
.engine-parity .interaction-action-bar{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    min-width:0
}
.engine-parity .interaction-favorite-form{
    display:block;
    min-width:0;
    margin:0
}
.engine-parity .interaction-action-trigger{
    appearance:none;
    display:flex;
    width:100%;
    min-width:0;
    min-height:46px;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:0;
    padding:7px 8px;
    border:1px solid #24436f;
    border-radius:11px;
    color:#b9cae3;
    background:#0b1930;
    box-shadow:none;
    cursor:pointer;
    font:inherit;
    font-size:10px;
    font-weight:850;
    line-height:1.1;
    text-align:center;
    transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease
}
.engine-parity .interaction-action-trigger:hover{
    border-color:#3e72c4;
    color:#fff;
    background:#112442;
    transform:translateY(-1px)
}
.engine-parity .interaction-action-trigger:focus-visible{
    outline:3px solid rgba(71,134,255,.35);
    outline-offset:2px
}
.engine-parity .interaction-action-icon{
    display:grid;
    width:22px;
    height:22px;
    flex:0 0 22px;
    place-items:center;
    border-radius:7px;
    font-size:13px;
    line-height:1
}
.engine-parity .interaction-action-rating .interaction-action-icon{
    color:#ffd35b;
    background:rgba(255,190,55,.10)
}
.engine-parity .interaction-action-favorite .interaction-action-icon{
    color:#ff759e;
    background:rgba(255,91,137,.10)
}
.engine-parity .interaction-action-comment .interaction-action-icon{
    color:#69caff;
    background:rgba(56,166,255,.10)
}
.engine-parity .interaction-action-report .interaction-action-icon{
    color:#ff8778;
    background:rgba(255,105,94,.10)
}
.engine-parity .interaction-action-trigger.is-active,
.engine-parity .interaction-action-trigger[aria-expanded="true"]{
    border-color:#3f76cc;
    color:#fff;
    background:#13294a
}
.engine-parity .interaction-drawers{
    min-width:0;
    margin-top:9px
}
.engine-parity .interaction-drawer{
    min-width:0;
    padding:12px;
    border:1px solid #24436b;
    border-radius:12px;
    background:#071426
}
.engine-parity .interaction-enhanced .interaction-drawer[hidden]{display:none!important}
.engine-parity .interaction-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:9px
}
.engine-parity .interaction-drawer-head strong{
    color:#eef5ff;
    font-size:12px;
    line-height:1.25
}
.engine-parity .interaction-drawer-close{
    display:none;
    width:28px;
    height:28px;
    flex:0 0 28px;
    place-items:center;
    padding:0;
    border:1px solid #29486f;
    border-radius:8px;
    color:#9fb3cf;
    background:#0b1b32;
    cursor:pointer;
    font-size:17px;
    line-height:1
}
.engine-parity .interaction-enhanced .interaction-drawer-close{display:grid}
.engine-parity .interaction-drawer form{
    display:grid;
    gap:8px;
    margin:0
}
.engine-parity .interaction-drawer label{
    display:grid;
    gap:5px;
    margin:0;
    color:#9fb3cf;
    font-size:10px;
    font-weight:760;
    line-height:1.4
}
.engine-parity .interaction-drawer input,
.engine-parity .interaction-drawer select,
.engine-parity .interaction-drawer textarea{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    margin:0;
    padding:9px 10px;
    border:1px solid #27466f;
    border-radius:9px;
    outline:0;
    color:#eef5ff;
    background:#061120;
    font:inherit;
    font-size:11px;
    line-height:1.4;
    text-align:start;
    direction:inherit
}
.engine-parity .interaction-drawer input,
.engine-parity .interaction-drawer select{min-height:40px}
.engine-parity .interaction-drawer textarea{
    min-height:88px;
    max-height:200px;
    resize:vertical
}
.engine-parity .interaction-drawer input:focus,
.engine-parity .interaction-drawer select:focus,
.engine-parity .interaction-drawer textarea:focus{
    border-color:#4a7fe0;
    box-shadow:0 0 0 3px rgba(47,111,255,.10)
}
.engine-parity .interaction-drawer button[type="submit"]{
    min-height:40px;
    margin:0;
    padding:8px 11px;
    border:0;
    border-radius:9px;
    color:#fff;
    background:linear-gradient(135deg,#2f6fff,#7557ff);
    cursor:pointer;
    font:inherit;
    font-size:10.5px;
    font-weight:860
}
html[dir="rtl"] .engine-parity .interaction-action-panel,
html[dir="rtl"] .engine-parity .interaction-drawer{text-align:right}
html[dir="ltr"] .engine-parity .interaction-action-panel,
html[dir="ltr"] .engine-parity .interaction-drawer{text-align:left}

@media (min-width:861px){
.engine-parity .game-page-card{
    grid-template-areas:
        "player heading"
        "player description"
        "toolbar description"
        "interaction description"
}
}
@media (max-width:860px){
.engine-parity .game-page-card{
    grid-template-areas:
        "heading"
        "player"
        "toolbar"
        "interaction"
        "description"
}
.engine-parity .interaction-action-panel{width:100%}
}
@media (max-width:680px){
.engine-parity .interaction-action-panel{
    padding:9px!important;
    border:1px solid #e4edf6!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(31,72,121,.07)!important
}
.engine-parity .interaction-action-panel>.section-heading{
    margin-bottom:7px!important
}
.engine-parity .interaction-action-panel>.section-heading h2{
    color:#173c63!important;
    font-size:10px!important
}
.engine-parity .interaction-heading-note{display:none}
.engine-parity .interaction-action-bar{gap:5px!important}
.engine-parity .interaction-action-trigger{
    min-height:48px!important;
    flex-direction:column!important;
    gap:3px!important;
    padding:5px 2px!important;
    border:1px solid #e0eaf4!important;
    border-radius:10px!important;
    color:#315978!important;
    background:#f8fbff!important;
    box-shadow:none!important;
    font-size:8.5px!important
}
.engine-parity .interaction-action-trigger:hover,
.engine-parity .interaction-action-trigger.is-active,
.engine-parity .interaction-action-trigger[aria-expanded="true"]{
    border-color:#9ec8f5!important;
    color:#176db6!important;
    background:#eef7ff!important;
    transform:none!important
}
.engine-parity .interaction-action-icon{
    width:21px!important;
    height:21px!important;
    flex-basis:21px!important;
    font-size:12px!important
}
.engine-parity .interaction-drawers{margin-top:7px!important}
.engine-parity .interaction-drawer{
    padding:10px!important;
    border:1px solid #e0eaf4!important;
    border-radius:11px!important;
    background:#f9fbfe!important
}
.engine-parity .interaction-drawer-head{margin-bottom:7px!important}
.engine-parity .interaction-drawer-head strong{
    color:#173c63!important;
    font-size:11px!important
}
.engine-parity .interaction-drawer-close{
    border-color:#dce7f2!important;
    color:#55728f!important;
    background:#fff!important
}
.engine-parity .interaction-drawer label{
    color:#4e6c89!important;
    font-size:9px!important
}
.engine-parity .interaction-drawer input,
.engine-parity .interaction-drawer select,
.engine-parity .interaction-drawer textarea{
    border-color:#dbe6f1!important;
    color:#173c63!important;
    background:#fff!important;
    font-size:10.5px!important
}
.engine-parity .interaction-drawer input,
.engine-parity .interaction-drawer select{min-height:39px!important}
.engine-parity .interaction-drawer textarea{
    min-height:78px!important;
    max-height:170px!important
}
.engine-parity .interaction-drawer button[type="submit"]{
    min-height:39px!important;
    border-radius:9px!important;
    background:linear-gradient(135deg,#38a6ff,#1770ff)!important;
    font-size:10px!important
}
.engine-parity .interaction-action-panel .interaction-notice{
    margin-bottom:7px!important;
    padding:8px 9px!important;
    font-size:9px!important
}
}
@media (max-width:390px){
.engine-parity .interaction-action-panel{padding:8px!important}
.engine-parity .interaction-action-bar{gap:4px!important}
.engine-parity .interaction-action-trigger{
    min-height:46px!important;
    font-size:8px!important
}
.engine-parity .interaction-action-label{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
}