html,body{margin:0;height:100%;background:#15110c;color:#f3ece0;font-family:"Noto Kufi Arabic",Tahoma,sans-serif;overflow:hidden}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.bar{position:fixed;inset-inline:0;top:0;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));
  background:linear-gradient(#15110ccc,#15110c00)}
.bar a{color:#f3ece0;text-decoration:none;font-size:14px;background:#15110cd9;border:1px solid #c8a46a;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center}
.bar b{background:#15110cb3;padding:4px 10px;font-weight:600;font-size:15px}
.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bottom{position:fixed;inset-inline:0;bottom:0;display:grid;gap:8px;justify-items:center;
  padding:12px max(14px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
  background:linear-gradient(#15110c00,#15110ccc)}
.bottom button{font:inherit;font-size:16px;padding:12px 22px;border:1px solid #c8a46a;background:#c8a46a;color:#1d1812;cursor:pointer;min-width:240px}
.bottom button.ghost{background:transparent;color:#f3ece0}
.bottom button:focus-visible{outline:2px solid #f3ece0;outline-offset:3px}
.bottom p{margin:0;font-size:13px;color:#cbbfae;text-align:center;max-width:46ch}
.loading{position:fixed;inset:0;display:grid;place-items:center;font-size:15px;color:#cbbfae;pointer-events:none}