/* molihua.org — 俄罗斯方块 skin. Overrides vendor/blockrain.css. */
:root{
  --paper:#FCFBF7;
  --ink:#1F1B18;
  --ink-2:#6E6357;
  --rule:#E3DFD4;
  --accent:#0E6B45;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:640px;margin:0 auto;padding:32px 20px 56px}
header.mh{border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:28px}
header.mh h1{font-size:22px;font-weight:600;margin:0;letter-spacing:.04em}
header.mh p{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.7}

.stage{display:flex;justify-content:center;padding:0 70px 70px}  /* gutters for the touch buttons */
#tetris{width:280px;height:560px;border:1px solid var(--rule)}

.keys{margin-top:26px;border-top:1px solid var(--rule);padding-top:14px;
      font-size:13px;color:var(--ink-2);line-height:2}
.keys b{font-weight:600;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
        font-size:12px;padding:0 2px}

/* ---- vendor overrides: paper, not black ---- */
.blockrain-game-holder{color:var(--ink);font-family:inherit;font-size:15px}
.blockrain-start-holder,.blockrain-game-over-holder{background:rgba(252,251,247,.93)}
.blockrain-start-msg,.blockrain-game-over-msg{font-size:17px;color:var(--ink);margin-bottom:22px}
.blockrain-score-holder{top:12px;right:14px;text-align:right}
.blockrain-score-msg{font-size:11px;letter-spacing:.18em;color:var(--ink-2)}
.blockrain-score-num{font-size:22px;font-weight:600;color:var(--ink);
                     font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.blockrain-btn{border:1px solid var(--ink);color:var(--ink);background:none;
               padding:10px 26px;font-size:15px;cursor:pointer;letter-spacing:.08em}
.blockrain-btn::before,.blockrain-btn::after{display:none}   /* kill the offset-shadow trick */
.blockrain-btn:hover{background:var(--ink);color:var(--paper)}
.blockrain-touch{border:1px solid var(--rule);background:rgba(255,255,255,.6);
                 color:var(--ink-2);border-radius:0;line-height:48px}
.blockrain-touch:active{background:var(--rule)}


/* vendor ships ASCII glyphs ("<", ">", "<o", "o>", ".") on the touch buttons */
.blockrain-touch-left::after        {content:"←"}
.blockrain-touch-right::after       {content:"→"}
.blockrain-touch-rotate-left::after {content:"↺"}
.blockrain-touch-rotate-right::after{content:"↻"}
.blockrain-touch-drop::after        {content:"↓"}
.blockrain-touch{font-size:20px;font-family:system-ui,sans-serif}

/* ---- phone tier: touch buttons move UNDER the board ----
   KEEP THIS BLOCK LAST. blockrain derives the playfield from the element's
   aspect ratio (rows = floor(h/w*10)) and measures it ONCE at init, so the
   box must be 1:2 and definite before the script runs. */
@media (max-width:430px){
  .wrap{padding:20px 12px 40px}
  .stage{padding:0 0 92px}
  #tetris{width:min(100%,300px);height:auto;aspect-ratio:1/2}
  .blockrain-touch{width:46px;height:46px;line-height:44px;font-size:18px;
                   top:100%;bottom:auto;margin-top:16px}
  .blockrain-touch-rotate-left {left:calc(50% - 139px);right:auto}
  .blockrain-touch-left        {left:calc(50% - 81px); right:auto}
  .blockrain-touch-drop        {left:calc(50% - 23px); margin-left:0}
  .blockrain-touch-right       {left:calc(50% + 35px); right:auto}
  .blockrain-touch-rotate-right{left:calc(50% + 93px); right:auto}
}

/* ---- mouse/keyboard devices: no on-screen buttons, no gutters ----
   MUST stay after the phone tier. jQuery's .show() writes inline
   display:block, so !important is required to beat it. */
@media (hover:hover) and (pointer:fine){
  .blockrain-touch{display:none!important}
  .stage{padding:0}
}