/* Updates: the list (home, /updates/, writer preview) and the writer page. Colours come from home.css / game.css. */
.upd-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.upd{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:12px 14px;background:#26173b;border:1px solid #ffffff1f;border-radius:12px;color:#efe6f8}
.upd-img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:#c4a8f2}
.upd-main{min-width:0}
.upd-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:3px;font:600 13.5px/1.2 'Fredoka',system-ui,sans-serif}
.upd-game{color:#d8f244}
.upd-game:hover{text-decoration:underline}
.upd-kind{padding:3px 8px;border-radius:999px;background:#ffffff1f;color:#efe6f8;font-size:12px}
.upd-kind.k-new{background:#ff6a9c;color:#13091f}
.upd-kind.k-update{background:#8b3fe0;color:#fff}
.upd-kind.k-fix{background:#ffd23f;color:#13091f}
.upd-time{color:#b6a6ca;font-weight:500}
.upd-title{display:block;font:600 17px/1.35 'Fredoka',system-ui,sans-serif;overflow-wrap:anywhere}
.upd-body{margin:4px 0 0;color:#dccfec;font-size:14.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.upd-empty{margin:0;color:#b6a6ca}
@media(max-width:520px){.upd{grid-template-columns:auto 1fr;padding:10px 12px;gap:10px}.upd-img{width:44px;height:44px}.upd>:nth-child(3){grid-column:1/-1}}


/* the writer page */
.write-page{display:block;max-width:none}
.write-page>h1{margin:6px 0 6px;color:#fff6df;font-size:36px}
.write-page>.lead{margin:0 0 20px;color:#dccfec}
.w-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.w-card{display:grid;gap:12px;padding:22px 24px;border:1px solid #0000001f;border-radius:14px;background:#fff6df;color:#13091f;box-shadow:0 8px 24px #0004}
.w-card .step{display:flex;align-items:center;gap:10px;margin:8px 0 0;font:700 18px/1.2 'Fredoka',system-ui,sans-serif}
.w-card .step:first-child{margin-top:0}
.w-card .step i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#13091f;color:#d8f244;font:700 14px/1 'Fredoka',system-ui,sans-serif;font-style:normal}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:0;padding:0;border:0}
.picker label{position:relative;display:block}
.picker input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.picker .tile{display:flex;flex-direction:column;overflow:hidden;border:1.5px solid #13091f33;border-radius:12px;background:#fff;transition:border-color .15s,transform .15s}
.picker .tile img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#26173b}
.picker .tile span{padding:6px 6px 7px;text-align:center;font:600 13.5px/1.2 'Fredoka',system-ui,sans-serif}
.picker label:hover .tile{border-color:#13091f;transform:translateY(-1px)}
.picker input:checked+.tile{border-color:#13091f;box-shadow:0 0 0 3px #d8f244,0 0 0 4.5px #13091f}
.picker input:focus-visible+.tile{outline:2px solid #8b3fe0;outline-offset:3px}
.kinds{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.kinds label{position:relative}
.kinds input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kinds span{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border:1.5px solid #13091f40;border-radius:999px;background:#fff;font:600 15px/1 'Fredoka',system-ui,sans-serif;cursor:pointer;transition:background .15s}
.kinds input:checked+span{background:#13091f;color:#fff6df;border-color:#13091f}
.kinds input:focus-visible+span{outline:2px solid #8b3fe0;outline-offset:2px}
.w-card input[type=text],.w-card textarea,.w-card input[type=password]{width:100%;padding:11px 12px;border:1.5px solid #13091f66;border-radius:10px;background:#fff;color:#13091f;font:500 16px/1.45 'Fredoka',system-ui,sans-serif}
.w-card textarea{min-height:92px;resize:vertical}
.w-card .count{justify-self:end;margin-top:-6px;color:#7a6c86;font-size:12.5px}
.w-card .err{min-height:1.2em;margin:0;color:#b3003c;font-weight:700}
.w-card .err:empty{display:none}
.w-card .ok{margin:0;color:#1f7a3d;font-weight:700}
.w-card .ok:empty{display:none}
.w-go{height:52px;border:0;border-radius:10px;background:#d8f244;color:#13091f;font:700 18px/1 'Fredoka',system-ui,sans-serif;cursor:pointer;transition:filter .15s}
.w-go:hover:not([disabled]){filter:brightness(1.06)}
.w-go[disabled]{opacity:.5;cursor:default}
.w-side{display:grid;gap:18px}
.w-box{padding:18px 20px;border:1px solid #ffffff1f;border-radius:14px;background:#26173b;color:#efe6f8}
.w-box h2{margin:0 0 10px;font:700 18px/1.2 'Fredoka',system-ui,sans-serif}
.w-box .hint{margin:0 0 10px;color:#b6a6ca;font-size:14px}
.w-box .upd{grid-template-columns:auto 1fr auto}
.w-del{align-self:center;height:34px;padding:0 12px;border:1.5px solid #ffffff2b;border-radius:8px;background:transparent;color:#efe6f8;font:600 13px/1 'Fredoka',system-ui,sans-serif;cursor:pointer}
.w-del:hover{border-color:#ff6a9c;color:#ff6a9c}
.w-del.sure{background:#ff6a9c;border-color:#ff6a9c;color:#13091f}
.w-share{display:flex;gap:8px}
.w-share button{flex:none;height:42px;padding:0 14px;border:1.5px solid #ffffff2b;border-radius:10px;background:transparent;color:#efe6f8;font:600 14px/1 'Fredoka',system-ui,sans-serif;cursor:pointer}
.w-share button:hover{background:#ffffff14}
.w-box input{flex:1;min-width:0;padding:0 10px;height:42px;border:1.5px solid #ffffff2b;border-radius:10px;background:#13091f;color:#efe6f8;font:500 13px/1 ui-monospace,monospace;direction:ltr}
.w-login{max-width:420px;margin:30px auto}
.w-login form{display:grid;gap:10px}
.w-all{max-height:560px;overflow:auto}
@media(max-width:900px){.w-grid{grid-template-columns:1fr}.write-page>h1{font-size:30px}}
@media(max-width:480px){.kinds span{padding:0 12px;font-size:14px}.w-card{padding:18px 14px}.picker{grid-template-columns:repeat(2,1fr)}}

/* the home page feed: a side column on wide screens (it runs beside the games, no inner scrolling), a short list above them on smaller ones */
.home-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px;align-items:start}
.feed{margin:22px 0 0;padding:18px;border:1px solid #ffffff1f;border-radius:16px;background:#1f1230}
.feed-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.feed-head h2{margin:0;font:700 24px/1.2 'Fredoka',system-ui,sans-serif;color:#fff}
.feed-all{color:#d8f244;font:600 15px/1 'Fredoka',system-ui,sans-serif;white-space:nowrap}
.feed-all:hover{text-decoration:underline}
.feed .upd-list{gap:12px}
.feed .upd{grid-template-columns:64px 1fr;gap:14px;padding:14px 16px;background:#ffffff0a}
.feed .upd-img{width:64px;height:64px}
.feed .upd-top{margin-bottom:6px}
.feed .upd-title{font-size:17.5px;line-height:1.4}
.feed .upd-body{margin-top:6px;font-size:15px;line-height:1.6}
.feed-more{display:block;width:100%;height:44px;margin-top:12px;border:1.5px solid #ffffff33;border-radius:10px;background:transparent;color:#efe6f8;font:600 15px/1 'Fredoka',system-ui,sans-serif;cursor:pointer}
.feed-more:hover{background:#ffffff12}
/* the placeholder until the updates come: two rows' worth on a narrow screen (they sit above the games), three beside them on a wide one */
.feed-list:empty::before{content:"";display:block;height:248px;border-radius:12px;background:linear-gradient(#ffffff0a 0 118px,transparent 118px 130px,#ffffff0a 130px);animation:feedslot 1s ease-in-out infinite alternate}
@keyframes feedslot{to{opacity:.55}}
@media(prefers-reduced-motion:reduce){.feed-list:empty::before{animation:none}}
@media(min-width:1200px){.feed-list:empty::before{height:380px;background:linear-gradient(#ffffff0a 0 118px,transparent 118px 130px,#ffffff0a 130px 248px,transparent 248px 260px,#ffffff0a 260px)}}
@media(min-width:1200px){
  .home-cols:has(.feed:not([hidden])){grid-template-columns:minmax(0,1fr) 400px}
  /* the same line in both views: the flat view's first row of cards and the category view's first heading both start at 24px (home.css) */
  .feed{margin-top:24px}
  .feed-more{display:none}
  .feed-list>li:nth-child(n+7){display:none}
}
@media(max-width:1199px){
  .feed{order:-1}
  .feed:not(.open) .feed-list>li:nth-child(n+3){display:none}
}