/* Mahjong Connect: the felt, the tiles on it, the path between them. */
body{background:radial-gradient(ellipse at 50% 35%,#1C6D58,#12503F 60%,#0B3328);font-size:18px}
.screen{background:none}

/* home: title over buttons; a short wide screen puts them side by side */
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4em;padding:1.2em;text-align:center}
.home-side{display:flex;flex-direction:column;align-items:center;gap:.7em}
.home-buttons{display:flex;flex-direction:column;align-items:center;gap:.8em}
.home .title{font-size:clamp(2.3em,10vw,4.2em);text-wrap:balance}
.home .pill{min-height:56px;font-size:1.3em;white-space:nowrap;padding:.6em 1.8em}
.links{flex-wrap:wrap;max-width:24em}
.links .link{min-height:44px;font-size:1.05em;color:var(--brass-hi)}
.hero-tiles{display:flex;gap:.5em;height:84px;align-items:flex-end}
.hero-tiles .tile{position:relative;--tw:56px;--th:68px;animation:bob 3s ease-in-out infinite}
.hero-tiles .tile:nth-child(2){animation-delay:.4s}.hero-tiles .tile:nth-child(3){animation-delay:.8s}.hero-tiles .tile:nth-child(4){animation-delay:1.2s}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (max-height:480px) and (min-aspect-ratio:5/4){
  .home{flex-direction:row;gap:2.4em;padding:.6em 1em .6em max(150px,calc(env(safe-area-inset-left) + 140px))}
  html.hw-embed .home{padding-left:1em}
  .home .title{font-size:clamp(2em,7vw,3.2em)}
  .hero-tiles{height:62px}.hero-tiles .tile{--tw:42px;--th:51px}
  .home-side{flex:1 1 auto;min-width:0}
  .home-buttons{flex:none}
  .home .pill{font-size:1.15em}
  .links{display:grid;grid-template-columns:1fr 1fr;gap:.1em .4em;max-width:none}
}
@media (max-height:340px){.hero-tiles{display:none}}

/* the game: bar on top, felt, dock under; a short wide screen puts bar and dock at the sides */
#game{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr}
.bar{padding:max(.4em,env(safe-area-inset-top)) .8em .2em}
.bar .jewel{width:48px;height:48px}
.level-pill{display:flex;flex-direction:column;align-items:center;background:rgba(11,51,40,.6);border:1px solid var(--hair);border-radius:999px;padding:.3em 1.2em;line-height:1.15}
.level-pill span{font:800 1.1em/1.1 var(--serif);color:var(--brass-hi)}
.level-pill small{color:var(--ink-soft);font-size:.82em}
.clock{min-width:3.4em;text-align:center;font:700 1.1em/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.dock{gap:1.4em;padding:.3em 0 max(.6em,env(safe-area-inset-bottom))}
.tool{position:relative;width:auto;height:52px;min-width:52px;border-radius:999px;padding:0 1em 0 .8em;display:flex;gap:.4em;align-items:center;font-weight:700;color:var(--brass-hi)}
.tool svg{width:1.3em;height:1.3em}
.tool .badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;border-radius:11px;background:var(--vermilion);color:#fff;font:800 13px/22px var(--sans);font-style:normal;padding:0 5px}
.tool.glow{animation:glow 1s ease-in-out infinite;border-color:var(--brass-hi)}
@keyframes glow{50%{box-shadow:0 0 0 3px var(--lacquer),0 0 22px 6px var(--brass)}}
@media (max-height:480px) and (min-aspect-ratio:5/4){
  #game{grid-template-rows:1fr;grid-template-columns:auto 1fr auto}
  .bar{flex-direction:column;justify-content:flex-start;padding:max(.5em,env(safe-area-inset-top)) .4em .5em max(.5em,env(safe-area-inset-left))}
  .level-pill{padding:.3em .6em;border-radius:.8em}
  .dock{flex-direction:column;justify-content:center;gap:.7em;padding:.4em max(.5em,env(safe-area-inset-right)) .4em .4em}
  .tool{width:56px;padding:0;justify-content:center}
  .tool span{display:none}
}
@media (max-width:420px){.dock{gap:.7em}.tool{padding:0 .8em 0 .6em}}

/* the board */
.felt{position:relative;min-height:0;min-width:0;display:grid;place-items:center;overflow:hidden}
.board{position:relative;left:auto;top:auto;outline:none;touch-action:none;user-select:none;-webkit-user-select:none}
.board:focus-visible{outline:none}
.board .tile{cursor:pointer;transition:transform .12s,opacity .3s,filter .25s}
.board .tile svg{transform:scale(.92)}
.board .tile:hover{filter:brightness(1.05)}
.board .tile.picked{transform:translateY(calc(var(--tw)*-.1));box-shadow:0 0 0 3px #FFD86B,0 0 calc(var(--tw)*.45) #FFD86B,
  calc(var(--tw)*.058) calc(var(--tw)*.058) 0 #3F7A2C,calc(var(--tw)*.075) calc(var(--tw)*.075) 0 #2C5A1E;z-index:2}
.board .tile.risen{animation:hintpulse .9s ease-in-out infinite;z-index:2}
@keyframes hintpulse{50%{transform:translateY(calc(var(--tw)*-.08));box-shadow:0 0 0 3px #7FD1B2,0 0 calc(var(--tw)*.5) #7FD1B2}}
.board .tile.gone{opacity:0;transform:scale(1.25);pointer-events:none}
.board .tile.deal{animation:dealin .38s cubic-bezier(.2,.9,.3,1.3) backwards}
@keyframes dealin{from{opacity:0;transform:translateY(-30px) scale(.7)}}
.board .tile.back{animation:dealin .25s ease-out backwards}
.board .tile.spin{animation:spin .46s ease-in-out}
@keyframes spin{45%,55%{transform:scale(.15) rotate(180deg);opacity:.4}}
.board .tile.shake{animation:shake .3s}
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}
.lines path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lines .glow{stroke:rgba(255,216,107,.45)}
.lines .link-line{stroke:#FFF4C8}
.cursor{position:absolute;width:calc(var(--tw) + 8px);height:calc(var(--th) + 8px);border:3px solid #7FD1B2;border-radius:calc(var(--tw)/6);pointer-events:none;z-index:4;transition:left .08s,top .08s}
.notice{position:absolute;left:50%;bottom:.6em;transform:translateX(-50%);margin:0;background:rgba(27,18,10,.88);border:1px solid var(--brass);border-radius:999px;padding:.45em 1.1em;font-weight:700;color:var(--brass-hi);z-index:6;white-space:nowrap;pointer-events:none}
.float{position:absolute;left:50%;top:40%;transform:translateX(-50%);font:900 1.6em/1 var(--serif);color:var(--brass-hi);text-shadow:0 2px 0 #5a3410,0 4px 12px rgba(0,0,0,.5);pointer-events:none;z-index:6;animation:floatup 1s ease-out forwards}
@keyframes floatup{to{transform:translate(-50%,-50px);opacity:0}}

/* cards */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.card p{margin:.3em 0 .6em}
.card .row[data-primary]{background:linear-gradient(180deg,var(--brass-hi),var(--brass) 48%,var(--brass-lo));color:#3B220C;border-color:var(--brass-hi)}
.card .row[data-primary] small{color:#5a3a12}
.card .rows,.card > .row{margin-top:.4em}
.card > .row + .row{margin-top:.5em}
.card .row:disabled{opacity:.5}
.result-line{display:flex;flex-direction:column;align-items:center;gap:.3em}
p.result-name{text-align:center}
.result-name{font:italic 700 1em/1 var(--serif);color:var(--ink-soft)}
.big-stars{display:block;font-size:2.2em;line-height:1;color:#FFD86B;letter-spacing:.1em;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.levels .stars{color:#FFD86B;white-space:nowrap}
.stats span{text-align:center}
@media (max-height:480px){.result-line{flex-direction:row;justify-content:center;gap:.8em;margin:0!important}.big-stars{font-size:1.4em}.card p.note{margin:.1em 0 .3em}}