/* Online Python IDE on the home page, plus the Google Play strip above the nav. */

/* ---------- Play strip ---------- */
.playstrip{background:linear-gradient(90deg,var(--ink),#1d3450);color:#dbe7f5;font-size:14px}
.playstrip .wrap{display:flex;align-items:center;gap:12px;padding:8px 20px;min-height:46px}
.playstrip img.pic{width:26px;height:26px;border-radius:7px;flex:none}
.playstrip p{margin:0;flex:1;min-width:0}
.playstrip b{color:#fff;font-family:var(--head)}
.playstrip .get{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--yellow);color:var(--ink);
  font-family:var(--head);font-weight:700;font-size:13.5px;padding:7px 15px;border-radius:999px;white-space:nowrap}
.playstrip .get:hover{text-decoration:none;filter:brightness(1.06)}
.playstrip .x{flex:none;background:none;border:0;color:#8fa3bd;font-size:19px;line-height:1;cursor:pointer;padding:4px 2px}
.playstrip .x:hover{color:#fff}
@media(max-width:620px){.playstrip .hideS{display:none}.playstrip .wrap{gap:9px;padding:7px 14px}}

/* ---------- editor component (self-contained: games.css is not loaded here) ---------- */
.ide .editor{position:relative;display:flex;background:#111c2e;font-family:var(--mono);font-size:13.5px;line-height:1.55;overflow:hidden}
.ide .editor .gutter{padding:14px 8px 14px 14px;color:#56657c;text-align:right;user-select:none;white-space:pre;background:rgba(255,255,255,.03)}
.ide .editor textarea{flex:1;min-width:0;width:100%;background:transparent;color:#e6edf3;border:0;outline:none;resize:vertical;
  padding:14px 14px 14px 10px;font:inherit;line-height:inherit;tab-size:4;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.ide .keys{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ide .keys button{flex:none;font-family:var(--mono);font-size:14px;min-width:34px;height:34px;border-radius:8px;cursor:pointer}

/* ---------- IDE shell ---------- */
.idewrap{background:linear-gradient(180deg,#0e1726,#0b1320);border-bottom:1px solid var(--line);padding:26px 0 30px}
.idehead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.idehead h1{color:#fff;font-size:clamp(26px,3.4vw,38px);margin:0 0 6px}
.idehead p{color:#9fb3cd;margin:0;font-size:16px;max-width:640px}
.idehead .badges{display:flex;gap:8px;flex-wrap:wrap}
.idehead .badges span{font-size:12.5px;color:#b9cce4;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:4px 11px}

.ide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px}
.idepane{background:#111c2e;border:1px solid #223354;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.idebar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#0d1626;border-bottom:1px solid #223354;flex-wrap:wrap}
.idebar .ttl{font-family:var(--head);font-weight:700;font-size:13.5px;color:#cfe0f5;margin-right:auto}

/* file tabs */
.ftabs{display:flex;gap:4px;overflow-x:auto;padding:7px 8px 0;background:#0d1626;border-bottom:1px solid #223354}
.ftab{display:inline-flex;align-items:center;gap:7px;flex:none;background:#16233a;border:1px solid #223354;border-bottom:0;
  color:#9fb3cd;font-family:var(--mono);font-size:12.5px;padding:7px 11px;border-radius:9px 9px 0 0;cursor:pointer}
.ftab:hover{color:#dce9f8}
.ftab.on{background:#111c2e;color:#fff;border-color:#35507e;box-shadow:inset 0 2px 0 var(--blue)}
.ftab .fx{opacity:.5;font-size:14px;line-height:1}
.ftab .fx:hover{opacity:1;color:#ff9a9a}
.ftab.add{font-size:15px;padding:6px 12px;color:#7f94b3}

/* editor + console */
.ide .editor{border-radius:0;background:#111c2e;flex:1}
.ide .editor textarea{min-height:330px;font-size:13.5px}
.ide .gutter{background:rgba(255,255,255,.025)}
.ide .keys{padding:7px 8px;background:#0d1626;border-top:1px solid #223354}
.ide .keys button{background:#16233a;border-color:#223354;color:#bcd0e8}
.ide .keys button:active{background:#1d3250}

.idebtn{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-weight:700;font-size:13px;
  padding:7px 14px;border-radius:999px;border:1px solid #2b3f63;background:#16233a;color:#cfe0f5;cursor:pointer}
.idebtn:hover{background:#1d3250;color:#fff}
.idebtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.idebtn.primary:hover{background:#2f6ea8}
.idebtn.primary[disabled]{opacity:.55;cursor:progress}
.idebtn[hidden]{display:none}
.idebtn.danger{background:#5c2330;border-color:#7d2f3f;color:#ffd7dd}

.ideout{flex:1;margin:0;padding:12px 14px;background:#0b1320;color:#d6e2f2;font-family:var(--mono);font-size:13px;
  line-height:1.55;white-space:pre-wrap;overflow:auto;min-height:150px;max-height:330px;word-break:break-word}
.ideout .e{color:#ff9a9a}
.ideout .hint{color:#ffd48a}
.askrow[hidden]{display:none}
.askrow{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0b1320;border-top:1px solid #2a3f66}
.askrow .caret{color:#5fcdff;font-family:var(--mono);font-weight:700}
.askrow input{flex:1;min-width:0;background:#111c2e;border:1px solid #2a3f66;border-radius:8px;color:#e6edf3;
  font-family:var(--mono);font-size:13px;padding:7px 10px;outline:none}
.askrow input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(53,114,165,.25)}
.askrow .idebtn{padding:6px 11px;font-size:12px}
.ideout .in{color:#9fe3ff}
#ide-nointeractive{margin:7px 0 0;font-size:12px;color:#8fa6c4}
.figs{display:flex;flex-direction:column;gap:10px;padding:0 14px}
.figs:not(:empty){padding:12px 14px;border-top:1px solid #223354}
.figs img{max-width:100%;border-radius:10px;background:#fff}
.stdin{border-top:1px solid #223354;background:#0d1626;padding:9px 12px}
.stdin label{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#7f94b3;margin-bottom:5px}
.stdin textarea{width:100%;background:#0b1320;color:#d6e2f2;border:1px solid #223354;border-radius:8px;padding:7px 9px;
  font-family:var(--mono);font-size:12.5px;resize:vertical;min-height:42px}
.idefoot{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0d1626;border-top:1px solid #223354;
  font-size:12.5px;color:#8fa6c4;flex-wrap:wrap}
.idefoot .run{margin-left:auto}
#ide-status{font-family:var(--mono);font-size:12px}
.idenote{color:#7f94b3;font-size:13px;margin:14px 0 0;text-align:center}
.idenote a{color:#9fd0ff}

@media(max-width:900px){
  .ide{grid-template-columns:1fr}
  .ide .editor textarea{min-height:240px}
  .ideout{max-height:240px}
}

/* The old hero headline is now an <h2> (the IDE owns the page's single <h1>),
   but it should still read as the hero of that section. */
.hero .h1like{font-size:clamp(34px,5vw,54px);font-weight:800;line-height:1.04;letter-spacing:-.03em;margin:0 0 .5em}
.hero .h1like em{font-style:normal;color:var(--blue);position:relative;white-space:nowrap}
.hero .h1like em::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;background:var(--yellow);opacity:.55;z-index:-1;border-radius:4px}
@media(max-width:900px){.hero .h1like em{white-space:normal}.hero .h1like em::after{display:none}}