/* beindie — the embeddable game card (/embed/game/<slug>). Self-contained:
   its own tokens, follows the reader's colour scheme unless the URL pins one
   (?theme=light|dark). Paper-arcade, same rules as the site. */

:root{
  --paper:#f4f1ea;--paper-2:#fbf9f4;--ink:#141414;--muted:#6b6558;--line:#d9d4c7;
  --yellow:#ffd400;--red:#ff2d2d;--orange:#ff8a00;--green:#3ddc3d;--blue:#00b2ff;
  --accent:var(--yellow);color-scheme:light;
}
html[data-theme="dark"]{--paper:#080808;--paper-2:#101010;--ink:#f1ede4;--muted:#8e8c88;--line:#262626;color-scheme:dark}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{--paper:#080808;--paper-2:#101010;--ink:#f1ede4;--muted:#8e8c88;--line:#262626;color-scheme:dark}
}
.accent-yellow{--accent:var(--yellow)}.accent-red{--accent:var(--red)}.accent-orange{--accent:var(--orange)}
.accent-green{--accent:var(--green)}.accent-blue{--accent:var(--blue)}.accent-white{--accent:#ffffff}

html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.45 "Instrument Sans",system-ui,sans-serif;display:flex}
.embed{display:flex;flex-direction:column;width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--paper-2)}
.embed__art{display:block;border-bottom:1px solid var(--line);background:var(--accent)}
.embed__art img{display:block;width:100%;height:auto;aspect-ratio:460/215;object-fit:cover}
.embed__tile{display:grid;place-items:center;aspect-ratio:460/215;font:700 2.4rem/1 "Space Grotesk","Archivo Black",sans-serif;color:#141414}
.embed__body{padding:14px 16px 16px;display:grid;gap:8px;flex:1;min-height:0;overflow:hidden;container-type:size}
/* When the frame is too short for two lines of tagline under the art (the
   recommended 360×380 is not), the tagline goes entirely rather than half a line. */
@container (max-height:185px){.embed__dek{display:none}}
@media (max-height:339px){.embed__dek{display:none}}
.embed__top{margin:0;min-height:22px}
.embed__pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);padding:2px 8px;color:var(--ink)}
.embed__pill::before{content:"";width:6px;height:6px;background:var(--accent);border:1px solid var(--ink)}
.embed__title{margin:0;font:700 1.35rem/1.1 "Space Grotesk","Archivo Black",sans-serif;letter-spacing:-.025em}
.embed__title a{color:inherit;text-decoration:none}
.embed__title a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.embed__dek{margin:0;color:var(--muted);font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.embed__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.embed__btn{display:inline-block;background:var(--yellow);color:#141414;border:1px solid #141414;box-shadow:3px 3px 0 #141414;padding:7px 12px;font-weight:600;font-size:13px;text-decoration:none}
.embed__btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #141414}
.embed__by{font-size:12px;color:var(--muted);text-decoration:none}
.embed__by b{color:var(--ink);font-weight:700;font-family:"Space Grotesk","Archivo Black",sans-serif;letter-spacing:-.02em}
.embed__by:hover b{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px}