/* A reserved status row keeps notifications stable and clear of the board. */
.notice-slot{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-width:0;padding:3px 12px 7px;pointer-events:none}
.game-notice{max-width:480px;width:fit-content;display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid #52697e24;border-radius:14px;background:#f7faf7ed;color:#334c61;box-shadow:0 3px 10px #273b5008;font-size:12px;font-weight:500;line-height:1.5;text-align:left;overflow-wrap:anywhere;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}
.game-notice::before{content:'i';display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;border-radius:6px;background:#e0e9ee;color:#435f78;font-size:12px;font-weight:750;font-family:Georgia,serif}
.game-notice.visible{opacity:1;transform:translateY(0)}
.game-notice:empty{visibility:hidden}
body:not(.editing) .game-column{grid-template-rows:44px 44px 64px minmax(0,1fr)}
body:not(.editing) .notice-slot{grid-row:3;align-self:stretch}
body:not(.editing) .game-card{grid-row:4}
.editing .notice-slot{grid-column:1/-1;min-height:64px}
.phone{grid-template-rows:44px 40px 64px minmax(0,1fr) 60px}
.phone .notice-slot{grid-row:3}
.phone canvas{grid-row:4}
.phone .phone-tools button{grid-row:5}
@media(min-width:600px){body:not(.editing) .game-column{grid-template-rows:48px 44px 64px minmax(0,1fr)}.game-notice{font-size:13px}}
@media(min-width:600px) and (max-height:600px){body:not(.editing) .game-column{grid-template-rows:40px 32px 56px minmax(0,1fr)}.game-notice{padding:6px 11px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.game-notice{transition:none;transform:none}}